Kinetic Typography — effect skill for text & titles
For AI agents: find the right skill in one call —
curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the use-case page.
Kinetic type for web and video: line, word or char splits, mask and blur reveals, variable-font motion, frozen-frame QA.
- Type: Effect · Text & titles
- Slug:
iart-kinetic-typography - Status: live
- Publisher: iart.ai (community)
- License: MIT
- Source: https://github.com/iart-ai/kinetic-typography-skills/tree/main/skills/kinetic-typography
- Works in: Claude Code, Cursor, Codex
- Requires: A Chromium browser for the standalone-HTML tier, or Node.js with Remotion for video, Optional helpers: Playwright via npx, ffmpeg and ffprobe
- Cost: Free — open-source, renders locally
- Adoption: 2,313 installs, 16 GitHub stars (skills.sh, 2026-10-26)
What it does
Animates text for web and video: pick line, word or character granularity, then apply mask, blur, clip-path or stagger reveals with concrete easing and stagger timings, animate variable-font axes through font-variation-settings, or run SVG text along a path, with recipes for CSS, GSAP SplitText, Framer Motion and Remotion. For HTML deliverables it requires splitting only after document.fonts.ready, a ?t=N freeze harness for deterministic screenshots, and a start/mid/end check for clipped glyphs, FOUC and wrong line breaks. The verify helpers (Playwright screenshots, an ffmpeg contact sheet, an ffprobe spec check) live in the repo-root scripts/, so they arrive with the Claude Code plugin install but not with a skills-CLI install that copies only the skill folder. Per-character splitting breaks Arabic-script joining; use Persian Motion Director for RTL text.
Use when
- Animate a headline or an animated title card
- Split-text reveal or stagger by character, word or line
- Lyric or caption video with animated words
- Animate a variable font's weight or put text on a path
Not for
- Arabic-script or RTL text: per-letter boxes break joining (use persian-motion-director)
- Transcript-driven subtitle tracks (use remotion-captions or a captions skill)
- Choosing or licensing fonts (use adobe-fonts or chinese-font-selector)
Install
- Claude Code:
/plugin marketplace add iart-ai/kinetic-typography-skills && /plugin install kinetic-typography-skills - Codex:
npx skills add iart-ai/kinetic-typography-skills - Cursor:
npx skills add iart-ai/kinetic-typography-skills
Example output
https://skills.varg.ai/previews/iart-kinetic-typography.mp4 — README showcase GIF: 'Words that move', 'Fast', 'Make it feel alive', 'Rise / Fall / Repeat' set as kinetic type (splits, mask and blur reveals, weight changes). First 6.6 s, before the iart.ai end card. (credit: iart.ai (kinetic-typography-skills), https://github.com/iart-ai/kinetic-typography-skills#readme)
Used for
- Lyric video: Lyrics synced to the song: the sung line big and highlighted, karaoke-style, over art or a shader.
More text & titles skills
- Canopy Part Title: Leaves sweep across the frame and part to reveal your headline: a 12-second 1080p title block.
- Code Slice Hero: A tiled headline flips cell by cell under a sweeping depth field to reveal a second line: an 8-second hero.
- Glass Shard Title: Glass shards fly in through fog and tile themselves into your headline, then fly out past the camera.
- Wireframe Portal Title: A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.
- PixiJS Text: Render and animate text in PixiJS v8: canvas Text, BitmapText, HTMLText and per-character SplitText.
- Title & Kinetic Typography Direction: Typography direction for video: text jobs, hierarchy, reveal-hold-exit timing, safe zones, contrast, font licensing.
Run the generation on varg
varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg(skill + hosted MCP) - Codex, Cursor, Gemini CLI, OpenClaw:
npx skills add vargHQ/skills --skill varg-ai -a <agent> -y - Claude.ai, ChatGPT, any MCP client: connect
https://mcp.varg.ai/mcp - API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt