animate-text — скилл
Каталог из 24 анимаций текста с точными JSON-спецификациями, которые агент переносит в Motion, GSAP, WAAPI и CSS
- 151 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл состоит из справочников и JSON-файлов, агент читает их и пишет код анимации в вашем проекте.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/animate-textОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из справочников и JSON-файлов, агент читает их и пишет код анимации в вашем проекте.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
animate-text — скилл для анимации заголовков, подписей, счетчиков и смены текста. Агент выбирает эффект из каталога по id, например `soft-blur-in`, `typewriter`, `shared-axis-y` или `kinetic-center-build`, и воспроизводит его в проекте. Для каждого из 24 эффектов есть портативная спецификация движения и точный рецепт с алгоритмом отрисовки, циклом воспроизведения и требованиями к контейнеру. Если пользователь назвал библиотеку, скилл требует остаться в ней: Motion, GSAP, `Element.animate` (WAAPI), CSS, Lottie или Rive. Для Motion и GSAP в рецепте есть отдельные блоки с импортами, переводом единиц времени, кривыми плавности и формой кейфреймов. Текст раздела на странице агент сохраняет, демонстрационный текст из рецепта подставляет только по прямой просьбе. В папке `scripts` лежат необязательные помощники на Node.js 20 и новее: `list-specs.mjs`, `get-spec.mjs`, `get-effect.mjs` и `find-spec.mjs`. Без Node скилл работает по справочникам и JSON-файлам.
Для кого. Фронтенд-разработчикам и дизайнерам лендингов, которым нужны проверенные эффекты появления и смены текста без подбора таймингов вручную.
Подходит, если
- Заголовок лендинга должен появляться построчно или по словам, и нужны готовые тайминги и каскад появления.
- Эффект из каталога требуется повторить в GSAP, хотя проект уже работает на Motion или чистом CSS.
- Счетчик или подпись меняют текст на месте, и переход надо сделать в стиле `shared-axis` или `per-word-crossfade`.
- Дизайнер назвал эффект по id, а агент должен воспроизвести его без догадок.
- Среди эффектов нужен подходящий под задачу, и выбор делают по справочнику с подсказками.
Не подходит, если
- Нужны анимации графики, иконок или целых страниц: каталог описывает только анимацию текста.
- Требуется собственный эффект с нуля, которого нет среди 24.
- Проект запрещает анимацию или требует только статичный текст для режима уменьшенного движения.
Пример запроса к агенту
Анимируй заголовок героя эффектом soft-blur-in на GSAP, текст на странице не меняй.Ограничения
Последний коммит сделан в апреле 2026 года, лицензия в репозитории не указана. Сам репозиторий содержит сайт на Next.js, а устанавливаемый скилл лежит в папке `skills/animate-text`. Он собирается скриптом из папки `catalog`, поэтому править файлы скилла вручную нельзя. Спецификации описывают движение, но не оформление: типографику, цвета и верстку демонстрационного сайта агент копировать не должен. Из 24 эффектов сайт показывает 20, остальные доступны только в скилле.
Как отключить. Удалите папку `animate-text` из каталога скиллов агента.
Частые вопросы
Как поставить animate-text в Claude Code?
Выполните `npx skills add pixel-point/animate-text --skill animate-text` в корне проекта. После перезапуска агента скилл подхватится по запросам про анимацию заголовков и смену текста.
Чем портативная спецификация отличается от точного рецепта?
Спецификация в `assets/specs/<id>.json` описывает намерение движения и подходит для переноса на любой стек. Рецепт в `assets/effects/<id>.json` фиксирует алгоритм отрисовки и нужен, когда эффект должен выглядеть как на сайте.
Какие библиотеки анимации поддерживаются?
Явные блоки адаптеров есть для WAAPI, Motion и GSAP. CSS, Lottie, Rive и другие стеки агент собирает по спецификации и заметкам из `references/implementation-notes.md`.
Нужен ли Node.js?
Нет. Скрипты в `scripts` ускоряют поиск эффектов и требуют Node.js 20 и новее, но агент может читать справочники и JSON напрямую.
Что скилл делает с текстом, который уже есть на странице?
Сохраняет его. Демонстрационный текст из рецепта агент использует только по прямой просьбе воспроизвести витрину.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для Claude Code и Codex: делает из AI-видео и кадров веб-анимацию, которая следует за прокруткой, курсором, касанием или наклоном устройства
Motion2Code содержит скилл веб-анимации: агент сверяет результат с кадрами ролика и показывает обе версии рядом.
Web Animation Skills
web-animation-skills
Скиллы веб-анимации: GSAP, SVG, Lottie, микровзаимодействия, переходы между страницами, 60 кадров в секунду. Установка npx skills или плагином
Скилл с готовыми CSS-переходами для веб-интерфейсов: модалки, выпадашки, тосты, лоадеры и десятки других анимаций по правилам подбора
Скилл принципов motion-дизайна для агентов: тайминг, easing, хореография и приемы анимации Disney в применении к интерфейсу
Официальные скиллы GreenSock: учат агента правильно писать анимации на GSAP, от твинов и таймлайнов до ScrollTrigger, плагинов и React
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| animate-text (эта карточка) | нет | 151 | |
| Web Animation Skills | нет | 81 | учит GSAP, SVG, Lottie и переходы между страницами в целом; здесь только каталог эффектов текста с готовыми таймингами |
| Motion.dev Animations Skill | нет | 224 | справочник по библиотеке Motion.dev; здесь портативные спецификации эффектов, которые переносят в любую библиотеку |
Коротко о README
Основная часть документации посвящена самому сайту на Next.js, Tailwind и shadcn/ui: запуск, скрипты, структуру папок. Раздел про скилл объясняет, что каталог в `catalog/text-animations` служит единственным источником, а скилл и данные сайта из него генерируются. Для пользователей дана одна команда установки через экосистему skills.sh.