Animate Text
Curated text animation catalog with exact JSON specs for headings, labels, counters...
Install
npx skills add marvkr/better-design --skill animate-text -g -a claude-code -y- Repository
- marvkr/better-design547
- Category
- Design
- Updated
- 10d ago
- License
- MIT
- Context cost
- Mediumabout 1,502 tokens
- Runs scripts
- Yes, review before use
What it does
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, orkinetic-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
