| name | animate-text |
| description | Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or similar stacks. |
Animate Text
Use this skill as a text animation catalog backed by generated JSON contracts.
Use assets/specs/<id>.json for a portable motion contract. Use assets/effects/<id>.json for exact animation reproduction, including content, renderer algorithm, playback, runtime, host requirements, rendering contract, and library adapters.
This skill ships 24 specs in total. The website currently showcases 20 of them.
When To Use
Use this skill when the request involves:
- animating headings, labels, counters, editorial copy, or text swaps
- matching a named effect id such as
soft-blur-in, typewriter, shared-axis-y, or kinetic-center-build
- choosing a motion pattern from a curated catalog and translating it into a target stack
- reproducing the current animation behavior in another stack without relying on example components
- implementing the same spec with WAAPI, Motion / motion.dev, GSAP, CSS, Lottie, Rive, or another renderer
Workflow
- Determine whether the user wants:
- the exact site version of a visible effect
- a portable translation of the motion contract
- If the user names an effect id, read
assets/specs/<id>.json or run node scripts/get-spec.mjs <id>.
- Otherwise use
references/catalog.md or optionally run:
node scripts/list-specs.mjs
