animate-text — скилл анимации текста
Каталог из 24 готовых спецификаций текстовых анимаций: агент выбирает эффект по имени и переносит его в GSAP, Motion, CSS или WAAPI.
npx skills add pixel-point/animate-text --skill animate-text -a claude-codeЧто делает animate-text
Скилл даёт агенту библиотеку именованных эффектов для заголовков, подписей, счётчиков и смены текста. У каждого есть JSON-контракт в assets/specs/<id>.json — портируемое описание движения, — и точный рецепт в assets/effects/<id>.json: содержание, алгоритм рендера, тайминги, требования к хосту и адаптеры под конкретные библиотеки. Всего 24 спецификации, на сайте показывают 20.
Работает через ссылки и скрипты. Если вы называете id вроде soft-blur-in или typewriter, агент читает нужный JSON или запускает node scripts/get-spec.mjs <id>. Без имени эффекта он подбирает его по references/catalog.md, а node scripts/find-spec.mjs "<query>" вернёт совпадения по метаданным. Скриптам нужен Node.js 20+, без него остаются Markdown-описания и JSON.
Названную вами библиотеку скилл считает обязательной: попросили GSAP — будет GSAP, а не похожий эффект на CSS. Переносить типографику, цвета и вёрстку демо-сайта в свою секцию не нужно, showcase.stage описывает только требования к контейнеру анимации. Если эффект держится на раскладке вроде kinetic-center-build, спецификацию придётся брать из точного рецепта: обычный stagger его не заменит.
Какие задачи решает
- подобрать анимацию для заголовка из готового каталога
- перенести эффект с сайта в GSAP без визуальных расхождений
- воспроизвести конкретный id вроде
typewriterв другом стеке - собрать цикл появления и исчезновения для текстовой смены
- отдать агенту точные тайминги вместо догадок по демо-ролику
Примеры запросов агенту
- Возьми эффект
soft-blur-inизassets/specs/soft-blur-in.jsonи перенеси его в Motion для заголовка моей секции. - Найди в каталоге анимацию для счётчика цифр и покажи, что нужно для её запуска.
- Сделай line reveal на GSAP по точному рецепту
assets/effects/line-reveal.json, текст оставь мой.
Как установить animate-text
1Через Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a claude-code2Вручную: положить файлы
~/.claude/skills/animate-text/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/animate-text/
1Через Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a codex2Вручную: положить файлы
.agents/skills/animate-text/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a cursor2Вручную: положить файлы
.cursor/skills/animate-text/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pixel-point/animate-text animate-text2Вручную: положить файлы
.github/skills/animate-text/SKILL.md1Через Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a gemini-cli2Командой платформы
gemini skills install https://github.com/pixel-point/animate-text --path skills/animate-textВручную: положить файлы
.devin/skills/animate-text/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о animate-text
Как установить animate-text в Claude Code?
Выполните npx skills add pixel-point/animate-text --skill animate-text -a claude-code. Скилл окажется в ~/.claude/skills/animate-text/SKILL.md.
Что делает animate-text?
Это каталог текстовых анимаций с JSON-спецификациями. Агент берёт эффект по имени и переводит его в нужную библиотеку, сохраняя тайминги и параметры движения.
Обязателен ли Node.js?
Только для вспомогательных скриптов, им нужна версия 20+. Без Node скилл работает через Markdown-справки и JSON-файлы.
