animated-text-overlayslisted

Add or FIX an ANIMATED text overlay — text that reveals or moves over time (typewriter / letter-by-letter, word-by-word fade, slide-up, pop, gradient shine, lower-third, kinetic hook / title / caption). Load this BEFORE hand-writing any code overlay (add_overlay kind code) that animates text — it owns the element-local timing contract that prevents the "only the first few letters show" reveal bug. Triggers — "make the caption type out", "animate the caption", "letter-by-letter typewriter", "kinetic hook", "the animated caption is broken / cut off". NOT for subtitles synced to speech (use speech-captions); NOT for plain static text (use add_overlay kind text).
Nagellabs/libi · ★ 2 · AI & Automation · score 75

Install: claude install-skill Nagellabs/libi

# Animated Text Overlays (kinetic typography) Use this when the user wants text that **animates** — "make the caption type out", "animated hook", "make the title pop in", "word-by-word reveal" — **or when you are about to add OR FIX a code overlay that animates text** (a typewriter reveal, a kinetic caption, a broken/cut-off animated caption). For plain static text use `libi.add_overlay({ kind: "text" })`. For subtitles synced to spoken audio use the **`speech-captions`** skill. For a caption that needs real **depth / perspective** — text mapped onto a road/floor, or 3D-positioned lyrics that play with the footage (not a flat 2D treatment) — use the **`three-overlays`** skill (real WebGL); this skill is for FLAT kinetic text only. ## Structured text first — declarative reveal + 3D, no code A `kind: "text"` overlay is now declarative for BOTH motion and depth — prefer it over a code overlay whenever it can express the look: - **Reveal vocabulary** on `reveal.mode`: `typewriter`, `fade-words`, `slide-up`, `pop`, plus `karaoke` (full line, active word highlighted via `reveal.highlightColor`) and `word-current` (only the active word shows). The renderer paces these natively off the overlay's element-local window — no JS draw function to author or validate. - **Declarative 3D** via the `threeD` field on `kind: "text"` (depth, bevel, front/side color, lighting, tilt) — flat decorative text that wants real extrusion stays `kind: "text"`, no WebGL code. Reach for the