animate-text skill
A catalog of 24 text animations with exact JSON specs that an agent ports to Motion, GSAP, WAAPI or CSS
- 151 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill consists of references and JSON files; the agent reads them and writes animation code in your project.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/animate-textDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists of references and JSON files; the agent reads them and writes animation code in your project.
This is third-party code. Review the repository files before installing.
What it does
animate-text is a skill for animating headings, labels, counters and text swaps. The agent picks an effect from the catalog by id, for example `soft-blur-in`, `typewriter`, `shared-axis-y` or `kinetic-center-build`, and reproduces it in the project. Each of the 24 effects has a portable motion spec and an exact recipe with the rendering algorithm, the playback loop and the host requirements. If the user names a library, the skill requires staying in it: Motion, GSAP, `Element.animate` (WAAPI), CSS, Lottie or Rive. For Motion and GSAP the recipe has separate blocks with imports, time unit conversion, easing curves and keyframe shape. The agent keeps the section text already on the page and uses the demo copy from a recipe only when asked. The `scripts` folder holds optional helpers for Node.js 20 and newer: `list-specs.mjs`, `get-spec.mjs`, `get-effect.mjs` and `find-spec.mjs`. Without Node the skill works from the references and JSON files.
Who it is for. Front-end developers and landing page designers who want proven text reveal and swap effects without tuning timings by hand.
Good fit when
- A landing page heading must appear line by line or word by word, and ready timings and stagger are needed.
- An effect from the catalog must be repeated in GSAP while the project runs on Motion or plain CSS.
- A counter or label swaps its text in place, and the transition should follow `shared-axis` or `per-word-crossfade`.
- A designer named an effect by id, and the agent must reproduce it without guessing.
- The agent has to pick a suitable effect for a task and chooses it from the reference with selection hints.
Not a fit when
- You need animation of graphics, icons or whole pages: the catalog covers text animation only.
- A custom effect from scratch is needed that is not among the 24.
- The project forbids animation or demands static text only for the reduced motion setting.
Example request
Animate the hero heading with the soft-blur-in effect in GSAP and keep the page text unchanged.Limitations
The last commit dates from April 2026, and the repository shows no license. The repository itself contains a Next.js site, while the installable skill lives in `skills/animate-text`. It is generated by a script from the `catalog` folder, so the skill files must not be edited by hand. The specs describe motion, not styling: the agent should not copy the typography, colors or layout of the demo site. Of the 24 effects the site shows 20, and the rest exist only in the skill.
How to disable. Delete the `animate-text` folder from the agent skills directory.
FAQ
How do I install animate-text in Claude Code?
Run `npx skills add pixel-point/animate-text --skill animate-text` in the project root. After the agent restarts, the skill is picked up for requests about heading animation and text swaps.
How does the portable spec differ from the exact recipe?
The spec in `assets/specs/<id>.json` describes the intent of the motion and suits any stack. The recipe in `assets/effects/<id>.json` fixes the rendering algorithm and is needed when the effect must look like the one on the site.
Which animation libraries are supported?
Explicit adapter blocks exist for WAAPI, Motion and GSAP. For CSS, Lottie, Rive and other stacks the agent builds from the spec and the notes in `references/implementation-notes.md`.
Is Node.js required?
No. The scripts in `scripts` speed up effect lookup and need Node.js 20 or newer, but the agent can read the references and JSON directly.
What does the skill do with text that is already on the page?
It keeps it. The demo copy from a recipe is used only when the user asks to reproduce the showcase.
Discussion
No questions or reviews yet.
Related
SkillsA skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
Motion2Code includes a web-animation skill: the agent checks output against source frames and shows both versions side by side.
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
A skill of ready CSS transitions for web interfaces: modals, dropdowns, toasts, loaders and dozens of other animations with matching rules
A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
Official GreenSock skills that teach agents correct GSAP animation code, from tweens and timelines to ScrollTrigger, plugins and React
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| animate-text (this card) | no | 151 | |
| Web Animation Skills | no | 81 | teaches GSAP, SVG, Lottie and page transitions in general; this one is only a catalog of text effects with ready timings |
| Motion.dev Animations Skill | no | 224 | a reference for the Motion.dev library; this one has portable effect specs that move to any library |
README in short
The main documentation covers the Next.js, Tailwind and shadcn/ui site itself: startup, scripts and folder structure. The skill section explains that the catalog in `catalog/text-animations` is the single source, and both the skill and the site data are generated from it. For consumers it gives one install command through the skills.sh ecosystem.