Анимация на сайте — это не одна задача, а три разных слоя, и путаница между ними даёт код, который потом тяжело держать. Я развожу их так: микро-движение (наведение, открытие модалки, лёгкий наклон карточки), сценовое движение (hero, появление секций при скролле, stagger) и фон (живые градиенты, шум). Каждому слою — свой инструмент. Попытка закрыть все три одним обычно кончается тем, что инструмент тянут туда, где он слаб.
Под самый мелкий слой я недавно поставил готовую вещь — transitions.dev. Это
набор из 21 CSS-перехода: один namespace классов, семантические custom
properties, встроенный prefers-reduced-motion. Никакого JavaScript в рантайме,
чистый CSS. Ровно для микро-движения: кнопка, модалка, карточка. И ровно поэтому
он не для hero и не для переходов между страницами — там нужен JS-движок с
управлением таймингами и прерываниями (у меня это React и Motion), а фон вообще
отдельная история на WebGL-шейдерах. Инструмент хорош тем, что честно занимает
свой слой и не притворяется, что умеет больше.
Одна практичная деталь, если будете ставить внешние agent-skills. transitions.dev
приезжает через npx skills — это пакетный менеджер навыков от vercel-labs. Он
кладёт навык в общий каталог ~/.agents/skills, но Claude Code по умолчанию не в
списке его таргетов, так что навык встаёт и… не виден. Лечится симлинком из
~/.agents/skills/<name> в ~/.claude/skills/<name> — именно симлинком, не
копией, чтобы обновления приходили через один источник. Полчаса недоумения «почему
не подхватывается», если не знать заранее.
Любопытно, что сначала я собирался завернуть всё это — три инструмента под три слоя — в собственный навык-маршрутизатор: спрашиваешь, он направляет к нужному. И в последний момент не стал. Готовый навык обновляет его автор; моя обёртка протухла бы при первом же апдейте сверху, а «маршрутизатор» просто повторял бы то, что я и так держу в голове как вот эту карту слоёв. Карта полезнее обёртки — она ничего не ломает при чужих релизах.
Так что коротко и применимо: прежде чем тянуться к одному большому инструменту анимации, спросите, на каком вы слое. Микро-движение почти всегда закрывается чистым CSS — и теперь для этого есть готовый набор. Сцена — это JS-движок. Фон — шейдеры. Большинство «тяжёлых» анимаций на сайтах тяжёлые ровно потому, что инструмент взяли не со своего слоя.