# Три слоя движения на странице — и чем делать самый мелкий Дата: 2026-06-26 Теги: frontend, design Источник: https://ponomar.art/notes/kogda-ne-stroit-instrument/ > Микро-анимация, hero-сцены и фоновые шейдеры — три разных инструмента, не один. Где проходят границы, на примере маленького CSS-навыка transitions.dev и одной ловушки при его установке. --- Анимация на сайте — это не одна задача, а три разных слоя, и путаница между ними даёт код, который потом тяжело держать. Я развожу их так: микро-движение (наведение, открытие модалки, лёгкий наклон карточки), сценовое движение (hero, появление секций при скролле, stagger) и фон (живые градиенты, шум). Каждому слою — свой инструмент. Попытка закрыть все три одним обычно кончается тем, что инструмент тянут туда, где он слаб.
МИКРО наведение · модалка · карточка CSS · transitions.dev СЦЕНА hero · скролл · stagger JS · Motion ФОН градиенты · шум WebGL-шейдеры
Три слоя движения — каждому слою свой инструмент. Растягивать один на все три — главный источник «тяжёлых» анимаций.
Под самый мелкий слой я недавно поставил готовую вещь — **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/` в `~/.claude/skills/` — именно симлинком, не копией, чтобы обновления приходили через один источник. Полчаса недоумения «почему не подхватывается», если не знать заранее. Любопытно, что сначала я собирался завернуть всё это — три инструмента под три слоя — в собственный навык-маршрутизатор: спрашиваешь, он направляет к нужному. И в последний момент не стал. Готовый навык обновляет его автор; моя обёртка протухла бы при первом же апдейте сверху, а «маршрутизатор» просто повторял бы то, что я и так держу в голове как вот эту карту слоёв. Карта полезнее обёртки — она ничего не ломает при чужих релизах. Так что коротко и применимо: прежде чем тянуться к одному большому инструменту анимации, спросите, на каком вы слое. Микро-движение почти всегда закрывается чистым CSS — и теперь для этого есть готовый набор. Сцена — это JS-движок. Фон — шейдеры. Большинство «тяжёлых» анимаций на сайтах тяжёлые ровно потому, что инструмент взяли не со своего слоя.