Раньше эффектная веб-анимация выглядела так: дизайнер делает в After Effects → экспортирует в Lottie → разработчик внедряет → что-то ломается → круг повторяется.
Начну с главного, про что многие не знают: GSAP стал бесплатным. Раньше самые топовые плагины вроде разбивки текста на буквы или морфинга фигур были за подпиской. После того как библиотеку купил Webflow, открыли все.
Готовые компоненты, которые агент ставит за один запрос:
— React Bits (47К звезд на GitHub). 100+ анимированных компонентов. Самая быстрорастущая библиотека в этой нише.
— Aceternity UI (~28К звезд). Про эффектные штуки: 3D-карточки, светящиеся лучи, магнитные кнопки, частицы.
— Magic UI (~15К звезд). Аккуратные микровзаимодействия и анимации под маркетинговые страницы.
— 21st.dev. Библиотека на 10К компонентов, а главное (!) есть подключение для агента. В Claude Code / Cursor пишешь, что нужно, он собирает компонент и кладет в проект.
— Osmo. ~200 готовых вещей: переходы между страницами, навигации, слайдеры, эффекты. Делают ребята, у которых больше 35 наград «сайт дня» на Awwwards.
И то, без чего агент пишет анимацию криво: скиллы.
— Официальные скиллы от GSAP. Учат агента пользоваться библиотекой правильно: какие приемы и плагины, как не сделать типовые ошибки.
— Web Animation Skills. GSAP, SVG, Lottie, переходы между страницами и отдельный упор на плавные 60 кадров. Работают в Claude Code, Cursor, Codex.
— Motion Skills. Полсотни скиллов под моушн-графику, анимацию и видео.
Сохраняйте для следующего проекта. Если знаете годные инструменты, кидайте в комменты 🚀
Сейчас агент может собрать анимацию сразу кодом. Ниже мой набор инструментов.
Начну с главного, про что многие не знают: GSAP стал бесплатным. Раньше самые топовые плагины вроде разбивки текста на буквы или морфинга фигур были за подпиской. После того как библиотеку купил Webflow, открыли все.
Готовые компоненты, которые агент ставит за один запрос:
— React Bits (47К звезд на GitHub). 100+ анимированных компонентов. Самая быстрорастущая библиотека в этой нише.
— Aceternity UI (~28К звезд). Про эффектные штуки: 3D-карточки, светящиеся лучи, магнитные кнопки, частицы.
— Magic UI (~15К звезд). Аккуратные микровзаимодействия и анимации под маркетинговые страницы.
— 21st.dev. Библиотека на 10К компонентов, а главное (!) есть подключение для агента. В Claude Code / Cursor пишешь, что нужно, он собирает компонент и кладет в проект.
— Osmo. ~200 готовых вещей: переходы между страницами, навигации, слайдеры, эффекты. Делают ребята, у которых больше 35 наград «сайт дня» на Awwwards.
И то, без чего агент пишет анимацию криво: скиллы.
— Официальные скиллы от GSAP. Учат агента пользоваться библиотекой правильно: какие приемы и плагины, как не сделать типовые ошибки.
— Web Animation Skills. GSAP, SVG, Lottie, переходы между страницами и отдельный упор на плавные 60 кадров. Работают в Claude Code, Cursor, Codex.
— Motion Skills. Полсотни скиллов под моушн-графику, анимацию и видео.
Почему скиллы – это важно.
Без них агент пишет устаревший / тормозящий код. Скиллы дают ему правила и лучшие практики. Чтобы не получить шаблонную анимацию, покажите конкретный реф или компонент + подключите нужный скилл. Тогда агент не угадывает, а собирает результат по образцу.
Сохраняйте для следующего проекта. Если знаете годные инструменты, кидайте в комменты 🚀