What is animate-text?

A catalogue of text-animation specifications for effects such as typewriter text, blur-ins, line reveals, and crossfades. Each specification describes how the effect should behave and how it can be implemented in different animation systems.

Use it to choose a named text effect, reproduce an existing animation, or translate its specification into WAAPI, Motion, GSAP, CSS, Lottie, Rive, or another supported renderer.

It provides exact, reusable motion rules when an interface needs a particular text effect, reducing guesswork when reproducing or translating an animation.

animate-text — Skill for Claude Code and Codex by marvkr/better-design

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add marvkr/better-design --skill animate-text

Clone the repo

git clone --depth 1 https://github.com/marvkr/better-design

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/marvkr/better-design/animate-text/github.svg)](https://agentmods.dev/skills/marvkr/better-design/animate-text)

Your own site

<a href="https://agentmods.dev/skills/marvkr/better-design/animate-text"><img src="https://agentmods.dev/badge/skills/marvkr/better-design/animate-text/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/marvkr/better-design/animate-text"><img src="https://agentmods.dev/badge/skills/marvkr/better-design/animate-text.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 81 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,402 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00081	$0.01402
Opus 5.5	$0.00032	$0.00561
Sonnet 5.5	$0.00016	$0.00280
Haiku 4.5	$0.00008	$0.00140

Measured 1mo ago against content hash 346d475ec128, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

animate-text scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

The scan reads SKILL.md. This mod also ships 2 executable files (scripts/find-spec.mjs, scripts/get-effect.mjs), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/animate-text/SKILL.md · 86 lines

How it starts

The opening of the file, as written. The whole thing — 86 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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
- node scripts/find-spec.mjs "<query>"
Use assets/specs/<id>.json when the user wants a portable translation of the motion intent.
Use assets/effects/<id>.json or node scripts/get-effect.mjs <id> 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 showcase.library_adapters.<library> block for that effect.
For exact reproduction, follow showcase.renderer, showcase.playback, showcase.timing, showcase.runtime, showcase.stage, showcase.rendering_contract, showcase.library_selection, and showcase.library_adapters over assumptions inferred from the portable spec alone.
Treat showcase.stage as animation host requirements only. Do not copy typography, color, padding, card chrome, or page layout from the source website unless the user explicitly asks for that UI.
When applying an effect to an existing section, preserve that section's text. Use showcase.content only as demo/fallback copy unless the user explicitly asks to reproduce the showcase copy.

Read the full file on GitHub · 86 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

1mo ago First seen · 86 lines · 81 tokens per session scan A 346d475ec128

Subscribe to this mod's changes

animate-text is a skill published in the GitHub repository marvkr/better-design (527 stars, last pushed 1mo ago), licensed MIT. It adds 81 tokens to every session and 1,402 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Claude Code Creative and media ai-design component-library cursor design-systems design-tokens

vfx-text-cursor

Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.

nexu-io/open-design · 28 tokens

screenshot-to-design-system

Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette…

WCF900905/screenshot-to-design-system · 75 tokens

hatch-pet

Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells…

nexu-io/open-design · 114 tokens

magazine-web-ppt

For marketing and gtm work: bind launches, campaigns, events, and brand plans to growth and pipeline outcomes. Built around the core query "annual-marketing-plan", with GTM strategy lead judgment, buyer-ready proof, and this outcome: approve launch plan, campaign budget, or GTM motion.

nexu-io/open-design · 67 tokens

replit-deck

For product and technical management work: turn PRDs, roadmaps, RFCs, architecture reviews, and retros into decision documents. Built around the core query "pm-feature-business-case-deck", with product strategy lead judgment, buyer-ready proof, and this outcome: approve the feature, architecture, roadmap, or incident…

nexu-io/open-design · 71 tokens

clinical-case-report

Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds"…

nexu-io/open-design · 73 tokens