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.

47 stars 3 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add sakuraoxo-clio/sakura-animate-text --skill animate-text

Manual install

git clone --depth 1 https://github.com/sakuraoxo-clio/sakura-animate-text.git /tmp/sakura-animate-text
mkdir -p ~/.claude/skills
cp -r /tmp/sakura-animate-text/. ~/.claude/skills/animate-text

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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

1. Determine whether the user wants:
   - the exact site version of a visible effect
   - a portable translation of the motion contract
2. If the user names an effect id, read `assets/specs/<id>.json` or run `node scripts/get-spec.mjs <id>`.
3. Otherwise use `references/catalog.md` or optionally run:
   - `node scripts/list-specs.mjs`
   - `node scripts/find-spec.mjs "<query>"`
4. Use `assets/specs/<id>.json` when the user wants a portable translation of the motion intent.

Read the full skill on GitHub

Details

Skill name: animate-text
Repository: sakuraoxo-clio/sakura-animate-text
License: MIT
Repo updated: 20 June 2026

FAQ

What does the Animate Text skill do?

How do I install the Animate Text skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add sakuraoxo-clio/sakura-animate-text --skill animate-text. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Animate Text popular?

It lives in sakuraoxo-clio/sakura-animate-text, which has 47 GitHub stars and 3 forks.

Related skills

Modern React Guidance

adhhamdev/modern-react-guidance

Authoritative guidance for modern React 19+ (Actions, use, Compiler, View Transitions, Fragment refs, Activity, browser, useEffectEvent). Use when writing, reviewing, refactoring, or migrating React components, forms, data fetching, concurrent UI, or upgrading to React 19+. Triggers on React, React 19, useActionState, useOptimistic, forwardRef, useEffect data fetch, React Compiler, ViewTransition, Suspense patterns, or codemods. Always prefer latest official patterns over training data.

Frontend & Design

Sbox

gavogavogavo/claude-sbox

Use when writing or modifying code for s&box, sbox, the Facepunch sandbox engine, or any Source 2 game project in C#. Triggers on mentions of s&box, sbox, sandbox game, Facepunch engine, Source 2 game, `.sbproj`, `.razor` with `PanelComponent`, `@inherits PanelComponent`, `Sandbox.Component`, `GameObject` + `Components.Get<T>`, `Scene.Trace`, `CharacterController` + `.Move()`, `SkinnedModelRenderer`, `NavMeshAgent`, `[Sync]`, `[Rpc.Broadcast]`, `[Property]`, `INetworkListener`, `ISceneEvent`, `PlayerController` in C#. Also triggers on any file with `using Sandbox;` or `using Sandbox.UI;` that

Frontend & Design

Vibe to UI

MonkeyUI-dev/vibe-to-ui

Design systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact restoration), and applies only after confirmation. Use when designing or restyling UI, collecting design inspiration under ~/.vibe-to-ui/inspirations, extracting tokens/motion, generating assets, saving brand context under ~/.vibe-to-ui, or Git remote sync of Design Context for cross-devi

Frontend & Design

Ak Elementor Studio

abanoubkhaliil/Ak-Elementor-Studio

AK Elementor Studio — built by Abanoub Khalil (akstudio.me). Converts ANY input — HTML/CSS/JS code, screenshots, images (PNG, JPG, WebP), PDFs, Figma exports, design mockups, wireframes, or any visual file — into fully structured Elementor page JSON templates importable into WordPress. Activate this skill whenever the user: uploads a design image or screenshot and wants it built in WordPress, shares HTML/CSS/JS to convert to Elementor, pastes code or attaches a file and mentions Elementor, WordPress, or page builder, says anything like "convert this to Elementor", "build this in WordPress", "t

Frontend & Design

Canvas Cowork

flowith-ai/canvas-cowork

Generate text, images and videos on Flowith's canvas from the CLI, headless or with a live cursor. Use for any image/video generation (Seedance, Veo, Kling, gpt-image, Gemini image), "canvas", "Flowith", "Neo", drawing/creating visual content, or past canvas work. /canvas-cowork

Frontend & Design

Work with Design Systems

natdexterra/work-with-design-systems

Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured descriptions, validation, and optional export of tokens.css + AI rules to the user's codebase). Use when the user says 'audit my design system', 'check component quality', 'create design system', 'build DS in Figma', 'generate component library', 'add slots to my components', 'sync desi

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.