Motion Design
LottieFiles/motion-design-skill
Applies motion design principles to create emotionally-driven, technically sound animations and transitions.
Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.
Install Animate Text
$ npx skills add pixel-point/animate-text --skill animate-text -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pixel-point/animate-text animate-text --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pixel-point/animate-text.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/animate-text .claude/skills/animate-text && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "animate-text" agent skill from https://github.com/pixel-point/animate-text/tree/main/skills/animate-text into .claude/skills/animate-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate-text", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pixel-point/animate-text/tree/main/skills/animate-textType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pixel-point/animate-text --skill animate-text -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pixel-point/animate-text animate-text --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pixel-point/animate-text.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/animate-text .agents/skills/animate-text && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "animate-text" agent skill from https://github.com/pixel-point/animate-text/tree/main/skills/animate-text into .agents/skills/animate-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate-text", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pixel-point/animate-text --skill animate-text -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pixel-point/animate-text animate-text --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pixel-point/animate-text.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/animate-text .cursor/skills/animate-text && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "animate-text" agent skill from https://github.com/pixel-point/animate-text/tree/main/skills/animate-text into .cursor/skills/animate-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate-text", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pixel-point/animate-text.git --path skills/animate-text--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pixel-point/animate-text --skill animate-text -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pixel-point/animate-text animate-text --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pixel-point/animate-text.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/animate-text .gemini/skills/animate-text && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "animate-text" agent skill from https://github.com/pixel-point/animate-text/tree/main/skills/animate-text into .gemini/skills/animate-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate-text", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pixel-point/animate-text animate-textInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pixel-point/animate-text --skill animate-text -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pixel-point/animate-text.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/animate-text .github/skills/animate-text && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "animate-text" agent skill from https://github.com/pixel-point/animate-text/tree/main/skills/animate-text into .github/skills/animate-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate-text", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pixel-point/animate-text --skill animate-text -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pixel-point/animate-text animate-text --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pixel-point/animate-text.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/animate-text .opencode/skills/animate-text && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "animate-text" agent skill from https://github.com/pixel-point/animate-text/tree/main/skills/animate-text into .opencode/skills/animate-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animate-text", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
animate-text- GitHub stars
- 149
- Used in
- 1 other repo
- Token cost
- ~1.6k tokens
- SKILL.md length
- 736 words
- Files
- 66 (incl. scripts, references, assets)
- Skills in repo
- 2
- Repo updated
- First seen
- Licence
- None found
At a glance
Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.
- Works in 9 steps: Determine whether the user wants → If the user names an effect id, read… → Otherwise use references/catalog.md or… → …
- An agent needs to pick
- SKILL.md covers When To Use, Workflow, Bundled Resources and Optional Helper Scripts, plus 2 more sections
- Calls node
What it does
Animate Text is an agent skill from pixel-point/animate-text. 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.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 67 other files, including scripts, reference files and assets (for example `assets/catalog.json`, `assets/effects/blur-out-up.json` and `assets/effects/bottom-up-letters.json`).
It sits in Frontend & Design, covering Web animation and motion, Motion graphics and Translation. It works with GSAP, Lottie and Motion.
When your agent uses it
- An agent needs to pick
- Translate named effects like soft blur in
- Kinetic builds into WAAPI
Example prompts
- “/animate-text”
Requirements
- Node.js
Workflow steps
9 steps, taken from the first numbered list in SKILL.md.
- Determine whether the user wants
- If the user names an effect id, read assets/specs/.json or run node scripts/get-spec.mjs .
- Otherwise use references/catalog.md or optionally run
- Use assets/specs/.json when the user wants a portable translation of the motion intent.
- Use assets/effects/.json or node scripts/get-effect.mjs when the user wants the exact generated animation behavior.
- If the user names a target animation library, treat that as binding. Follow showcase.library_selection and use only the matching…
- For exact reproduction, follow showcase.renderer, showcase.playback, showcase.timing, showcase.runtime, showcase.stage…
- Treat showcase.stage as animation host requirements only. Do not copy typography, color, padding, card chrome, or page layout from the…
- When applying an effect to an existing section, preserve that section's text. Use showcase.content only as demo/fallback copy unless the…
What it can do on your machine
Read from SKILL.md and the folder at commit 0f783e4. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Animate Text loads about 1.6k tokens when it runs, and up to ~7.4k if it reads all its reference files. Until then it costs about 87 tokens; SKILL.md has 736 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 736 words (~1,596 tokens).
“Use this skill as a text animation catalog backed by generated JSON contracts.”
- name
- animate-text
Files
SKILL.md and 65 other files (scripts, references, assets) in skills/animate-text of pixel-point/animate-text.
- SKILL.md
- assets/catalog.json
- assets/effects/blur-out-up.json
- assets/effects/bottom-up-letters.json
- assets/effects/depth-parallax-words.json
- assets/effects/fade-through.json
- assets/effects/focus-blur-resolve.json
- assets/effects/kinetic-center-build.json
- assets/effects/line-by-line-slide.json
- assets/effects/mask-reveal-up.json
- assets/effects/micro-scale-fade.json
- assets/effects/per-character-rise.json
- assets/effects/per-word-crossfade.json
- assets/effects/scale-down-fade.json
- assets/effects/shared-axis-x.json
- assets/effects/shared-axis-y.json
- assets/effects/shared-axis-z.json
- assets/effects/shimmer-sweep.json
- assets/effects/short-slide-down.json
- … and 47 more
Open the folder on GitHubat commit 0f783e4
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in pixel-point/animate-text, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Animate Text next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Animate Text this skillpixel-point/animate-text | 149 | 1 repos | ~1.6k | Automated safety check: Pass | None | |
| Motion DesignLottieFiles/motion-design-skill | 1.9k | 1 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Motiscope RecreateKumarSashank/motiscope | 122 | — | ~2k | Automated safety check: Pass | MIT | |
| RecreateKumarSashank/motiscope | 122 | — | ~1.8k | Automated safety check: Notes | MIT | |
| Lottie Animation Integrationfreshtechbro/claudedesignskills | 986 | — | ~4.5k | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 58k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Motiscope Recreate
KumarSashank/motiscope
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.
Recreate
KumarSashank/motiscope
Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.
Lottie Animation Integration
freshtechbro/claudedesignskills
Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.
HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
Hyperframes Animation
chmonitor/chmonitor
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus…
More from pixel-point/animate-text
Vitest
pixel-point/animate-text
Vitest testing framework patterns for test setup, async testing, mocking with vi., snapshots, and test performance (formerly test-vitest).
Related
Categories
Questions about Animate Text
What does Animate Text do?
Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Animate Text is an agent skill from pixel-point/animate-text. Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.
When should I use Animate Text?
Animate Text fits situations like: an agent needs to pick; translate named effects like soft blur in; kinetic builds into WAAPI.
How do I install Animate Text in Claude Code?
Run `npx skills add pixel-point/animate-text --skill animate-text -a claude-code`. Or copy the skill folder (skills/animate-text in pixel-point/animate-text) into .claude/skills/animate-text in your project. Claude Code loads it when a task matches its description.
How do I install Animate Text in Codex?
Run `npx skills add pixel-point/animate-text --skill animate-text -a codex`. Or copy the skill folder (skills/animate-text in pixel-point/animate-text) into .agents/skills/animate-text in your project. Codex loads it when a task matches its description.
Can I use Animate Text in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pixel-point/animate-text --skill animate-text -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animate-text, .gemini/skills/animate-text, .github/skills/animate-text and .opencode/skills/animate-text in your project.
What does Animate Text need to run?
Going by SKILL.md and its folder, Animate Text needs the command-line tools its instructions call (node). Our summary lists: Node.js.
Does Animate Text access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Animate Text safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Animate Text use?
No licence was found for Animate Text or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Animate Text use?
About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.8k tokens, read only when the agent opens those files.
What are the alternatives to Animate Text?
Skills that share tags, products or a category with Animate Text: Motion Design (LottieFiles/motion-design-skill, 1.9k stars), Motiscope Recreate (KumarSashank/motiscope, 122 stars), Recreate (KumarSashank/motiscope, 122 stars) and Lottie Animation Integration (freshtechbro/claudedesignskills, 986 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Animate Text?
pixel-point (a GitHub organization) maintains it in pixel-point/animate-text, which has 149 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on April 24, 2026.
Source: pixel-point/animate-text on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.