animate-text — Claude Code skill: what it does, how to install
A catalog of 24 text animation specs. Your agent picks an effect by name and rebuilds it in GSAP, Motion, CSS or WAAPI.
npx skills add pixel-point/animate-text --skill animate-text -a claude-codeWhat animate-text does
The skill gives an agent a named library of effects for headings, labels, counters and text swaps. Every entry has two JSON files: a portable motion contract in assets/specs/<id>.json and an exact recipe in assets/effects/<id>.json with content, renderer algorithm, playback, runtime, host requirements and library adapters. The bundle holds 24 specs; the site shows 20 of them.
You can name an effect and skip the search. Say soft-blur-in or typewriter and the agent reads that JSON or runs node scripts/get-spec.mjs <id>. Otherwise it browses references/catalog.md or calls node scripts/find-spec.mjs "<query>" for ranked matches. Node.js 20+ is required for the scripts only; the Markdown notes and JSON files still work without it.
Treat the library you ask for as fixed. Request GSAP and you get GSAP, not a CSS lookalike. Do not port the demo site's fonts, colors or layout into your section, because showcase.stage covers container requirements alone. Layout-dependent effects such as kinetic-center-build need the exact recipe; a generic stagger will not reproduce them.
What it helps with
- pick a heading animation from a ready catalog
- port a site effect to GSAP without visual drift
- reproduce one id like
typewriterin a different stack - build a full enter-and-exit loop for changing text
- hand an agent real timings instead of guesses from a demo clip
Example prompts for the agent
- Take
soft-blur-infromassets/specs/soft-blur-in.jsonand rebuild it in Motion for my section heading. - Find a counter animation in the catalog and tell me what it needs to run.
- Build a line reveal with GSAP from the exact recipe
assets/effects/line-reveal.json, keep my own copy.
How to install animate-text
1Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a claude-code2Manually: put the files in place
~/.claude/skills/animate-text/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/animate-text/
1Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a codex2Manually: put the files in place
.agents/skills/animate-text/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a cursor2Manually: put the files in place
.cursor/skills/animate-text/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pixel-point/animate-text animate-text2Manually: put the files in place
.github/skills/animate-text/SKILL.md1Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a gemini-cli2Platform CLI
gemini skills install https://github.com/pixel-point/animate-text --path skills/animate-textManually: put the files in place
.devin/skills/animate-text/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pixel-point/animate-text --skill animate-text -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about animate-text
How do I install animate-text in Claude Code?
Run npx skills add pixel-point/animate-text --skill animate-text -a claude-code. The skill lands in ~/.claude/skills/animate-text/SKILL.md.
What does animate-text do?
It is a text animation catalog with JSON specs. An agent selects an effect by name and translates it into your stack, timings and motion parameters included.
Do I need Node.js for it?
Only for the helper scripts, which require version 20+. Without Node the Markdown references and JSON assets still carry the skill.
