# Animate Text

Curated text animation catalog with exact JSON specs for headings, labels, counters...

- Repository: https://github.com/marvkr/better-design (547 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add marvkr/better-design --skill animate-text -g -a claude-code -y`
Codex: `npx skills add marvkr/better-design --skill animate-text -g -a codex -y`
Cursor: `npx skills add marvkr/better-design --skill animate-text -g -a cursor -y`
Gemini CLI: `npx skills add marvkr/better-design --skill animate-text -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/marvkr/better-design/blob/HEAD/.agents/skills/animate-text/SKILL.md