# Как создать анимированный сайт в Claude Code за вечер в 2026
> Узнайте, как создать анимированный сайт в Claude Code: задать стиль через CLAUDE.md, использовать GSAP и проверить скорость и доступность сайта.
Source: https://ailoot.ai/blog/ru/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/ru/animated-website-claude-code/
Language: ru
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-d79d4310e84529ec5cfff827c4f0f571a8d5aa7b9c8d024a4632c5b55625ca58
Главное
За вечер Claude Code способен собрать анимированный сайт, но без чётких рамок результат часто напоминает шаблон: модель тяготеет к усреднённым решениям из обучающих данных. Задайте ограничения в `CLAUDE.md`, выберите конкретное визуальное направление и добавьте в контекст актуальную документацию библиотеки анимаций. Особенно важно не перегружать страницу движением: избыток эффектов выдаёт машинную генерацию и может замедлить появление первого экрана.
Подробнее о работе с моделями — в [документации Ailoot](https://ailoot.ai/docs/).
## Почему сайт, созданный ИИ, узнаётся с первого экрана?
Главное
Если не задать модели направление, она смешает знакомые ей решения и выдаст усреднённый результат. Раньше таким маркером были фиолетовые кнопки и шрифт Inter, теперь часто встречаются кремовый фон, серифная типографика и терракотовые акценты. Anthropic в документации своего навыка описывает три распространённых облика и называет их поведением по умолчанию.
Вы поручаете агенту сделать посадочную страницу. Спустя сорок минут сайт уже работает: разделы на месте, вёрстка адаптируется к экрану, кнопки реагируют на нажатие. Но страница почему-то кажется знакомой.
Дело в исходных данных. Модель обучалась на огромном количестве готовых сайтов, где некоторые решения встречались особенно часто. Создатель Tailwind CSS Адам Уотан публично принёс извинения за один из таких эффектов.
Тысячи руководств и стартовых шаблонов переняли те же цвета, сместив баланс примеров. Так модель усвоила, что кнопки часто бывают фиолетовыми. Аналогично закрепляются привычные шрифты, радиусы углов и тени.
Модные признаки шаблонного дизайна меняются. В документации навыка `frontend-design` Anthropic описывает уже другие типовые образы.
Сейчас ИИ-дизайн часто складывается в три направления: тёплый кремовый фон (примерно #F4F1EA), выразительный серифный заголовок и терракотовый акцент; почти чёрный фон с одним ярким кислотно-зелёным или киноварным цветом; газетная вёрстка с тонкими линейками, без скруглений и с плотными колонками. Каждое решение может подойти своей задаче, однако здесь оно появляется как настройка по умолчанию, а не как осознанный выбор, независимо от темы.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Чтобы избежать такого результата, не оставляйте агенту полностью открытое задание. На вопрос «сделай красиво» модель ответит знакомым средним вариантом. Задайте палитру, сочетание шрифтов и основной визуальный приём — тогда у неё появятся конкретные ориентиры.
Анимацию особенно заметно, когда её слишком много. Статичная страница с хорошей типографикой всё ещё может казаться заготовкой: на живых сайтах элементы появляются при прокрутке, реагируют на курсор, а переходы связывают экраны.
## Что понадобится для анимированного сайта в Claude Code?
Главное
Все инструменты в этом наборе доступны бесплатно. Нужны Claude Code, библиотека GSAP и навык `frontend-design` от Anthropic. С конца апреля 2025 года GSAP можно использовать без оплаты, в том числе с прежде платными плагинами вроде SplitText и MorphSVG. Для публикации подойдёт бесплатный хостинг. Расходы связаны только с работой самого агента.
Разберём инструменты и их условия отдельно, поскольку вокруг стоимости GSAP возникала путаница.
**GSAP** — библиотека для анимации, используемая на многих сайтах, отмеченных наградами. Webflow приобрела её в октябре 2024 года, после чего появились сообщения, будто библиотека сразу стала бесплатной. Это произошло позже: в тот момент Webflow подтвердила, что действующие тарифы сохраняются. Бесплатным GSAP стал **в конце апреля 2025 года**, начиная с версии 3.13.
Теперь GSAP полностью бесплатен для всех благодаря поддержке Webflow.
— GSAP, https://gsap.com/pricing
В описании версии 3.13 отдельно говорится, что бесплатными стали и плагины, которые раньше были платными, включая SplitText и MorphSVG; коммерческое использование также разрешено. По состоянию на июль 2026 года актуальная версия — `gsap@3.15.0`.
При этом бесплатная библиотека не становится открытой: лицензия GSAP остаётся проприетарной. Она запрещает создавать на её основе визуальный редактор анимаций, который конкурирует с Webflow. Для сайтов, работы с клиентами и коммерческих проектов такого ограничения нет.
**Навык `frontend-design` от Anthropic** содержит инструкции, меняющие подход агента к интерфейсам. В описании репозитория сказано:
Инструкции помогают создавать выразительные и осмысленные интерфейсы или перерабатывать уже существующие. Они направляют выбор визуальной концепции и типографики, чтобы итоговый дизайн не выглядел стандартным шаблоном.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Метод состоит из двух этапов. Сначала агент определяет систему дизайн-токенов: от четырёх до шести названных цветов, шрифты хотя бы для двух ролей, схему расположения элементов в виде текстового наброска и один основной визуальный приём. Затем он проверяет и критикует собственный план с учётом задачи и только после этого пишет код.
## Как помочь Claude Code уйти от шаблонных решений?
Главное
Начните с двух шагов. В `CLAUDE.md` перечислите типовые решения, которых следует избегать: стандартную палитру, одинаковый шрифт для заголовков и основного текста, а также анимацию любых свойств, кроме прозрачности и трансформаций. Затем установите `frontend-design`: навык просит агента сначала составить систему дизайна и оценить план, а уже потом переходить к коду.
Сначала зададим правила в файле проекта: они будут учитываться при каждом запросе и не требуют дополнительных расходов.
Полезная отправная точка — список ограничений против шаблонных решений. Его принцип прост: назвать варианты, к которым модель тяготеет по умолчанию, и запретить их прямо.
```markdown
## Anti-Generic Guardrails
- Colors: Never use default Tailwind palette (indigo-500, blue-600).
Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
with a clean sans. Apply tight tracking (-0.03em) on large headings,
generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).
```
Технические правила оставлены на английском: короткие указания на языке документации модель обычно воспринимает точнее.
Запрет на анимацию лишних свойств стоит рядом с ограничениями по цветам и теням не случайно. Нулевая прозрачность на первом экране может навредить показателю скорости; об этом речь пойдёт ниже.
Теперь установим навык. Официальные навыки Anthropic можно добавить через плагин:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
Плагин `example-skills` устанавливает сразу все двенадцать навыков дизайна; выбрать только один при такой установке нельзя. Если нужен исключительно `frontend-design`, скопируйте его папку вручную. Claude Code увидит её без перезапуска текущей сессии:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
Среди других полезных навыков этого набора — `theme-factory` с десятью готовыми темами и обязательным подтверждением человека перед их применением, `web-artifacts-builder` для создания проектов на React с подготовленными компонентами и `algorithmic-art` для генеративной графики. Отдельный материал рассказывает, [как выбрать skills для Claude Code](https://ailoot.ai/blog/ru/choose-claude-code-skills/).
Файл правил и навык дополняют друг друга. Правила исключают нежелательные решения, а навык задаёт процесс: спроектировать систему, проверить её и лишь затем писать код.
Основную работу по настройке нужно сделать до запроса: заранее задать контекст и ограничения, на которые будет опираться агент. В такой схеме сам промпт играет меньшую роль, чем подготовленные инструкции. Например, файл `CLAUDE.md` служит отправной точкой для описания проекта и его правил.
## Как выбрать визуальное направление и задать анимацию?
Главное
Выберите одну конкретную визуальную концепцию: например, брутальный документальный стиль или светлый бежевый минимализм. Такое направление помогает заменить расплывчатое пожелание точными визуальными ориентирами. Перед тем как использовать стороннюю подборку навыков, отдельно проверьте её лицензию и условия распространения.
Отдельной категории с названием «движение» в этой подборке нет. Анимационные приёмы размещены среди других навыков веб-дизайна.
В частности, в именах навыков встречаются такие варианты: `animation-on-scroll`, `gsap`, `gsap-scrolltrigger-storytelling`, `cinematic-gsap-lenis-motion-system`, `cinematic-scroll-storytelling`, `marquee-loop`, `masked-reveal`, `staggered-word-reveal`, `reveal-hover-effect`, `scroll-progress-timeline`, `scroll-scrubbed-visual-sequence`, `scroll-scrubbed-word-reveal`, `scroll-world-storytelling`.
Для человека без опыта программирования полезнее начать с визуального направления. Вместо общего пожелания «сделай современно» выберите понятный стиль и передайте агенту его название:
- `clean-minimal-beige-light-mode` — светлый минимализм с бежевой палитрой
- `dark-glass-clean-layout` — чистый интерфейс с тёмным стеклянным оформлением
- `documentary-brutalist-agency` — брутальный документальный стиль
- `editorial-portfolio-chapters` — портфолио, разбитое на журнальные главы
- `orange-clean-paper-saas` — сервисный сайт в бумажной стилистике с оранжевым акцентом
- `solar-duotone-bold` — выразительное двухцветное оформление
- `tech-green-dark-mode-modern` — тёмный технологичный стиль с зелёными акцентами
- `light-mode-paper-technical` — светлый технический стиль с бумажными мотивами
Есть и инструменты для 3D-графики и визуальных эффектов: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
## Как передать Claude Code актуальную документацию GSAP?
Главное
В документации GSAP есть файл `llms.txt` объёмом около 25 килобайт, подготовленный для языковых моделей. Передайте агенту ссылку, чтобы он пользовался текущим описанием методов, а не полагался на устаревшие знания. Страницы документации также доступны в формате Markdown. У библиотеки Motion есть аналогичный, ещё более объёмный файл.
При работе с библиотеками анимации агент может помнить прежний способ подключения: импортировать модуль по старому пути или регистрировать плагин по устаревшей схеме. В итоге код не запускается.
Снизить риск помогает актуальная документация в контексте запроса. GSAP публикует версию, удобную для языковых моделей:
```
https://gsap.com/llms.txt
```
Сейчас файл занимает примерно 25 килобайт. Отдельные страницы документации также можно получить в Markdown, добавив `.md` к адресу страницы.
Например, запрос может выглядеть так:
```
Прочитай https://gsap.com/llms.txt и https://gsap.com/docs/v3/Plugins/ScrollTrigger.md
Дальше собери на главной одну сцену: заголовок появляется по мере
прокрутки первого экрана, картинка справа сдвигается медленнее текста.
Используй только transform и opacity. Никакого transition-all.
```
Для библиотеки Motion, ранее называвшейся Framer Motion, тоже доступен такой файл; он ещё объёмнее. Motion распространяется по лицензии MIT и остаётся проектом с открытым исходным кодом. Актуальная версия — `motion@12.42.2`. Если сайт сделан на React и нужны простые эффекты появления, можно рассмотреть Motion. Для сложных сцен, связанных с прокруткой, подойдёт GSAP с плагином ScrollTrigger.
С помощью ScrollTrigger можно создавать эффектные анимации, связанные с прокруткой, используя совсем немного кода.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Есть и варианты без библиотек. Переходы между состояниями в пределах одной страницы с помощью View Transitions API получили базовую поддержку 14 октября 2025 года. Межстраничные переходы в Firefox не поддерживаются. CSS-анимации по прокрутке также пока нельзя считать доступными везде: они работают в Chrome и недавно появились в Safari, а в Firefox требуют ручного включения настройки. Поэтому попросите агента проверить поддержку нужной возможности браузером и предусмотреть обычный переход, если её нет.
## Как превратить пример сайта в точный промпт?
Главное
Покажите агенту пример и опишите, что именно нужно воспроизвести: слои, композицию, типографику, движение и реакцию элементов. Одной фразы вроде «сделай похожую анимацию» недостаточно — нужны конкретные указания, основанные на видимом поведении страницы.
Обычно проще всего показать пример желаемого результата. Однако агент не воспринимает сайт как человек, если ему доступен только текстовый запрос.
Запись экрана можно разобрать по отдельным составляющим: сюжету, расположению блоков, движению, типографике и 3D-графике. Результатом такого анализа становится подробный промпт, пригодный для дальнейшей работы.
Главный принцип можно выразить так:
Не ограничивайтесь общими просьбами вроде «сделай красиво», «добавь похожую анимацию» или «сделай плавные переходы». Переводите визуальные пожелания в точные указания по реализации.
Исходный код страницы даёт дополнительные сведения о поведении элементов: реакции на курсор, 3D-графике, прокрутке и слоях с разной скоростью движения. Разбейте эти наблюдения на отдельные задания для секций, кнопок, эффектов наведения и других состояний. Если код доступен, ориентируйтесь на его поведение и не выводите эффекты только из скриншота.
При съёмке страниц с отложенной загрузкой или 3D-графикой обычный полноразмерный скриншот может оказаться пустым: браузер ещё не успел отрисовать содержимое. Прокрутите страницу по экрану за раз, дайте элементам загрузиться и только затем соберите снимки в единое изображение.
## Пошаговый план: анимированный сайт за вечер
Главное
Двигайтесь по порядку: задайте правила, установите навык дизайна, выберите одну визуальную концепцию и соберите статичную страницу. После этого добавьте одну сцену анимации, настройте поддержку уменьшенного движения и проверьте опубликованный сайт. Начинайте с одного эффекта за раз — так проще найти причину ошибок. При таком подходе работу можно выполнить за вечер.
1. ### Создайте проект
Если проекта пока нет, начните с новой пустой папки. Откройте её в терминале и запустите `claude`. Попросите агента подготовить основу одностраничного сайта для вашего бизнеса, опишите сам бизнес и укажите: «чистый HTML и CSS, без библиотек». Созданные файлы образуют корень проекта, где продолжится работа.
2. ### Добавьте файл CLAUDE.md
Поместите блок Anti-Generic Guardrails в файл `CLAUDE.md` в корне проекта. Если файла ещё нет, попросите агента создать его. Правила ориентированы на Tailwind; для проекта на чистом CSS поясните: «примени эти принципы к обычному CSS». Содержание ограничений от этого не меняется. Подробнее о назначении файла можно прочитать в разборе четырёх правил для CLAUDE.md.
3. ### Установите frontend-design
Используйте плагин `example-skills` или вручную скопируйте папку `frontend-design` по инструкции выше. Убедиться, что навык доступен, поможет команда `/doctor`.
4. ### Выберите одну визуальную концепцию
Используйте только одно направление. Если смешать брутальный документальный стиль с бежевым минимализмом, получится именно то усреднение, от которого вы хотите уйти. Названия папок дают общее представление о содержимом, но не показывают его визуально. Откройте `SKILL.md` выбранного навыка и изучите описание палитры и шрифтов.
5. ### Сначала создайте статичную страницу
Пока не добавляйте анимации. Сначала настройте типографику, отступы и сетку. Попросите агента запустить локальный просмотр и перейдите по выданному адресу. Для проверки с телефона попросите открыть сайт для других устройств в вашей сети — агент подскажет нужный адрес.
6. ### Добавьте одну анимационную сцену
Ограничьтесь одним эффектом. Например, заголовок на первом экране постепенно появляется, а фоновый слой движется медленнее переднего. Передайте агенту `llms.txt` выбранной библиотеки и точно укажите, что движется, в каком направлении и сколько миллисекунд длится эффект. Не задавайте первому экрану нулевую прозрачность — об этом сказано ниже.
7. ### Учтите настройку уменьшенного движения
Примените CSS-правило и настройку JavaScript для reduced motion из раздела доступности. До публикации проверьте страницу с включённым уменьшением движения.
8. ### Опубликуйте сайт и проверьте скорость
Разместите статические файлы на бесплатном хостинге, например Vercel, Netlify или GitHub Pages. Попросите агента опубликовать проект на выбранной платформе и предоставить ссылку. Затем проверьте публичный адрес через PageSpeed Insights: сервис не сможет открыть локальную страницу. Обратите внимание на «Largest Contentful Paint» — время до отрисовки крупнейшего элемента. Хорошим считается результат до 2,5 секунды. До публикации агент может измерить локальную версию через Chrome DevTools MCP, открыв её в Chrome.
Именно на шестом шаге проще всего испортить уже выполненную работу.
## Почему избыток анимации усиливает ощущение ИИ-генерации?
Главное
По наблюдению Anthropic, излишнее движение может сделать дизайн более похожим на машинную генерацию. По умолчанию агент нередко добавляет эффекты при прокрутке к каждому разделу, из-за чего всё непрерывно движется и перетягивает внимание. Лучше выделить одну сцену на первом экране, а остальные элементы оставить спокойными.
Легко подумать: если без анимации страница кажется простой, надо добавить больше эффектов. Но этот подход часто приводит к обратному результату.
Иногда сдержанность работает лучше: избыток анимации может усилить впечатление, что дизайн создан автоматически.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Это предупреждение содержится в `frontend-design` — том самом навыке, который должен улучшить внешний вид сайта. В нём также перечислены другие заготовки: крупное число с небольшой подписью и градиентным акцентом для самых разных задач; нумерация разделов 01 / 02 / 03 даже там, где они не образуют последовательность.
Вот распространённый сценарий: агенту поручают «добавить анимации», и он назначает появление при прокрутке всем разделам. Заголовок въезжает, карточки поднимаются по очереди, отзывы выдвигаются сбоку, подвал постепенно проявляется. Каждый эффект может быть уместен сам по себе, но вместе они создают непрерывную суету без ясного фокуса.
Вместо этого выберите одну хорошо продуманную сцену, часто на первом экране, и используйте движение умеренно. Анимация похожа на интонационное выделение: если подчеркнуть всё, акцент перестанет работать.
Попросите агента сделать одну сцену на первом экране, а остальные разделы оставить статичными. Такая формулировка задаёт более точные рамки, чем общая просьба добавить анимации.
## Как анимации влияют на скорость сайта?
Главное
Если элемент имеет нулевую прозрачность, браузер не учитывает его при выборе крупнейшего отрисованного элемента. Поэтому приём «спрятать первый экран, а затем показать при прокрутке» может ухудшить важный показатель скорости. Для плавной анимации обычно достаточно трансформаций и прозрачности: изменение других свойств часто требует повторно рассчитывать вёрстку.
Google оценивает страницу по трём показателям: Largest Contentful Paint — до 2,5 секунды; отзывчивость на действия пользователя — до 200 миллисекунд; сдвиг вёрстки — до 0,1. Значения рассчитываются по 75-му процентилю реальных посещений.
При выборе крупнейшего элемента браузер исключает объекты с нулевой прозрачностью: пользователь их не видит. Это же правило касается показателя отрисовки крупнейшего элемента.
Представьте, что агент скрывает блок, задав ему нулевую прозрачность, а затем показывает при прокрутке. Если так сделан первый экран, его содержимое может быть уже загружено, но показателю понадобится дождаться фактической отрисовки. Если прозрачность снимает скрипт после загрузки, ожидание может затянуться до выполнения скрипта.
Есть два способа избежать этой проблемы: начать анимацию с небольшой ненулевой прозрачности либо оставить первый экран видимым и анимировать только его положение.
Важно также различать свойства, которые браузеру дёшево анимировать, и те, что требуют больше работы.
По возможности ограничивайте анимации прозрачностью и трансформациями: тогда браузер сможет выполнять их на этапе композитинга конвейера отрисовки.
— web.dev, https://web.dev/articles/animations-guide
Иными словами, браузер собирает страницу из слоёв. Сдвиг и изменение прозрачности можно выполнить на последнем, обычно более дешёвом этапе. Другие изменения могут потребовать заново пересчитать страницу. В измерениях из той же документации анимация через верхнее и левое смещение заняла 37 миллисекунд на расчёт вёрстки и 79 миллисекунд на отрисовку. Похожий эффект через трансформацию показал нулевые значения для обоих этапов.
Есть нюанс: прозрачность помогает браузеру плавно анимировать элемент, но нулевая прозрачность исключает его из показателя скорости. «Недорого для браузера» и «безопасно для метрики» означают разные вещи.
Отдельного внимания заслуживает `will-change` — свойство, которое часто добавляют «для оптимизации». В документации MDN есть предупреждение:
Чрезмерное применение will-change расходует память и может заставить браузер выполнять более сложную отрисовку в ожидании возможных изменений. Это ухудшает производительность.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
MDN также указывает, что это свойство стоит применять как крайнюю меру при уже обнаруженных проблемах со скоростью. Заблаговременное добавление не гарантирует улучшения. Например, строка `will-change: transform, opacity`, назначенная десяткам элементов, скорее создаст дополнительную нагрузку.
Для сдвига вёрстки правило обратное: документация Google не советует избегать анимаций вообще и отмечает, что аккуратные переходы могут помочь обновлять содержимое без резких изменений для читателя. Меняйте масштаб трансформацией вместо ширины и высоты, а положение — с помощью сдвига вместо координат.
## Как учитывать людей, чувствительных к движению?
Главное
При вестибулярных нарушениях анимация, привязанная к прокрутке, может вызвать неприятные симптомы. Все браузеры поддерживают системную настройку «уменьшить движение» уже больше пяти лет, но агент не добавит её без прямого указания. Нужны и CSS-правило, и явная ветка настройки анимаций в JavaScript: одно чтение предпочтения не останавливает таймлайн.
Это не только вопрос внимательного отношения к читателю: пользователи старше сорока лет могут быть частью целевой аудитории сайта.
Консорциум W3C описывает возможные последствия анимации, связанной с действиями пользователя, для людей с вестибулярными нарушениями. Среди них могут быть тошнота, мигрень и настолько сильный дискомфорт, что человеку потребуется отдых.
Один из способов учесть настройку уменьшенного движения — добавить CSS-правило:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
При использовании этого правила стоит помнить о трёх деталях.
Оставьте базовые HTML и CSS видимыми и статичными. Создавайте движение только в ветке, где пользователь его разрешает; CSS-переопределение длительности само по себе не отменяет JavaScript-таймлайн.
Спецификация предусматривает, что движение можно убрать, сократить или заменить; полное отключение — не единственный подход. Например, резкий выезд можно заменить коротким проявлением. Если полностью отключить все анимации, могут перестать работать индикаторы загрузки и прогресса.
JavaScript-анимациям нужна собственная обработка предпочтения. Сохранение `matchMedia(...).matches` в переменную ничего не меняет без ветвления настройки. В GSAP оставьте элемент видимым в обычных HTML/CSS и создавайте движение только при разрешении:
```js
// Запустить после загрузки GSAP и элементов страницы.
function mountMotion() {
const mm = gsap.matchMedia();
mm.add('(prefers-reduced-motion: no-preference)', () => {
gsap.from('.hero-title', { y: 24, duration: 0.35 });
});
return () => mm.revert();
}
const cleanupMotion = mountMotion();
// Вызвать cleanupMotion() при удалении страницы или компонента.
```
У заголовка не должно быть скрывающего или смещающего базового стиля. При reduced motion он остаётся видимым и неподвижным. Если настройка изменится при открытой странице, GSAP отменит анимацию при прекращении совпадения условия. `mm.revert()` также убирает собранные анимации при удалении компонента. Для Motion реализуйте аналогичную ветку его средствами: одного CSS недостаточно. См. [жизненный цикл и очистку GSAP matchMedia](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
Отдельно учитывайте критерий WCAG 2.2.2 базового уровня. Если движение, мигание или прокрутка запускаются автоматически, продолжаются больше пяти секунд и показываются одновременно с другим содержимым, пользователь должен иметь возможность остановить их. Это относится, например, к автоматически переключающимся каруселям и бесконечным бегущим строкам.
## Семь типичных причин, из-за которых анимация работает плохо
Главное
Чаще всего проблемы связаны с тем, что первый экран скрыт, анимации стало слишком много или выбраны неподходящие свойства. Ещё одна распространённая ошибка — изменение обычной прокрутки страницы. При выборе длительности учитывайте диапазон 100–400 миллисекунд: агент может поставить секунду, хотя такая задержка подходит не каждому эффекту.
**1. Первый экран сначала скрыт.** Элемент с нулевой прозрачностью не учитывается в показателе отрисовки крупнейшего элемента. Это может стать серьёзной проблемой, особенно если показатель важен для видимости сайта в поиске.
**2. Анимированы все разделы подряд.** Заголовки въезжают, карточки появляются одна за другой. Anthropic предупреждает: избыток эффектов может сделать дизайн похожим на сгенерированный.
**3. Сайт перехватывает прокрутку.** Вместо обычного поведения колеса мыши страница навязывает свой сценарий. Это может запутать пользователя, поэтому сохраняйте управление прокруткой за ним и не заменяйте его «кинематографическим» эффектом.
**4. Анимируются свойства, требующие перерасчёта.** Для перемещения и изменения размера используйте трансформации, а не координаты и размеры. По приведённым выше измерениям разница составила 37 и 79 миллисекунд против нулевых значений.
**5. Эффекты длятся слишком долго.** Для большинства случаев начните с короткой анимации и подбирайте длительность по самому движению. Диапазон 100–400 миллисекунд может служить ориентиром, но анимация в 400 миллисекунд уже выглядит медленной и подходит главным образом для крупных перемещений. Агент нередко задаёт одну секунду по умолчанию.
**6. Не учтено предпочтение уменьшить движение.** Агент сам может не добавить поддержку этой настройки — укажите её в задании.
**7. Сайт постепенно начинает тормозить.** В React анимации, созданные без привязки к элементу и без очистки, могут размножаться при каждом обновлении компонента. Из-за этого производительность страницы со временем снижается.
Есть и ещё один риск: попросить агента делать скриншоты и исправлять всё, что он на них заметит. Для статичной страницы такой цикл может пригодиться, но промежуточный кадр анимации агент может принять за ошибку, исправить и снова увидеть незавершённое движение. Дополнительные снимки также расходуют контекст.
## Сколько стоит такая работа и как экономить лимит?
Главное
Используемые здесь инструменты доступны бесплатно, а расходы связаны с работой агента. На анимацию обычно требуется больше итераций, чем на простую вёрстку: код нужно многократно запускать и смотреть на результат. Работайте над сценами по одной, держите `CLAUDE.md` компактным и избегайте повторяющихся скриншотов анимированных блоков.
Сложная страница с прокруткой через космос может исчерпать месячный лимит на одном проекте. Такое происходит, потому что эффект нельзя надёжно проверить, просто прочитав код: нужны запуски и исправления. Каждая правка может потребовать заново изучить файлы, а частые скриншоты добавляют лишние шаги.
Чтобы не тратить ресурсы зря, добавляйте по одной сцене и проверяйте результат. Не просите сразу анимировать весь сайт. При необходимости отключите цикл автоматических скриншотов для подвижных блоков и осмотрите страницу самостоятельно. Оставьте `CLAUDE.md` достаточно коротким, чтобы правила не занимали значительную часть контекста при каждом запросе. Перед работой дайте агенту `llms.txt` библиотеки: так ему проще использовать актуальный способ подключения и не тратить время на отладку устаревшего варианта.
О расходе токенов при работе с проектом рассказывает материал [почему Claude Code перечитывает весь проект](https://ailoot.ai/blog/ru/claude-code-rereads-project/), а советы по экономии собраны в разборе [как не исчерпать лимиты Claude Code](https://ailoot.ai/blog/ru/claude-code-token-limits-saving/).
## Что делать дальше?
Главное
Рабочая последовательность проста: ограничьте типовые решения, выберите одно визуальное направление, добавьте одну сцену движения, проверьте скорость и учтите настройки пользователя. Самое важное — заранее дать агенту конкретные ориентиры. После этого анимацию можно добавлять постепенно и осознанно.
Выполните восемь шагов выше: выберите визуальную концепцию, создайте одну сцену на первом экране и проверьте сайт на скорость.
### Источники
- [anthropics/skills](https://github.com/anthropics/skills) — официальные навыки Anthropic, включая `frontend-design`
- [GSAP: Pricing](https://gsap.com/pricing) — условия бесплатного использования
- [GSAP 3.13 release](https://gsap.com/blog/3-13) — изменения лицензирования в конце апреля 2025 года
- [GSAP: llms.txt](https://gsap.com/llms.txt) — документация для языковых моделей
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) — документация плагина анимации при прокрутке
- [Motion](https://motion.dev/) — библиотека анимаций с открытым исходным кодом
- [web.dev: Animations guide](https://web.dev/articles/animations-guide) — руководство по анимационным свойствам
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) — рекомендации по использованию `will-change`
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) — документация настройки уменьшенного движения
- [WCAG 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) — критерий доступности для автоматически движущегося содержимого
- [W3C: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) — рекомендации по анимации в ответ на действия пользователя
- [Mobbin MCP](https://mobbin.com/mcp) — библиотека примеров интерфейсов для агента
Для дальнейшей работы — [Ailoot](https://ailoot.ai/).
## Вопросы и ответы
### Почему CSS reduced-motion не останавливает GSAP?
Переопределение длительности CSS не отменяет JavaScript-таймлайн. Создавайте анимацию GSAP внутри ветки matchMedia no-preference и сохраняйте элемент видимым в базовом стиле. Тогда reduced motion оставит страницу статичной.
### Как предотвратить накопление анимаций после навигации?
При удалении страницы или компонента вызывайте функцию очистки, возвращённую настройкой анимации. В примере mm.revert() восстанавливает стили и удаляет анимации, собранные этим экземпляром matchMedia.
## Ailoot · Компания и портфель её проектов
Ailoot опирается на накопленный опыт работы, большую клиентскую базу, стабильный сервис и постоянный контроль KPI.
Компания и портфель её проектов: миллионы клиентов; продажи на миллиарды ежемесячно.
Этот опыт Ailoot использует для API-доступа к нейросетям в продуктах клиентов, агентах, приложениях и автоматизациях.