# 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 `.md` to 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](https://skills.varg.ai/effects.md) · [Text & titles](https://skills.varg.ai/browse/skills/kinetic-type.md)
- **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

- [SaaS launch or product promo](https://skills.varg.ai/use-cases/launch-video.md): A polished launch film for an app or website: UI cards, device mockups, kinetic type, music.
- [Changelog or release video](https://skills.varg.ai/use-cases/changelog-video.md): Release notes, a PR or a GitHub repo turned into a short video for X or LinkedIn.
- [Lyric video](https://skills.varg.ai/use-cases/lyric-video.md): 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](https://skills.varg.ai/skills/hyperframes-canopy-part-title.md): Leaves sweep across the frame and part to reveal your headline: a 12-second 1080p title block.
- [Code Slice Hero](https://skills.varg.ai/skills/hyperframes-code-slice-hero.md): A tiled headline flips cell by cell under a sweeping depth field to reveal a second line: an 8-second hero.
- [Glass Shard Title](https://skills.varg.ai/skills/hyperframes-glass-shard-title.md): Glass shards fly in through fog and tile themselves into your headline, then fly out past the camera.
- [Wireframe Portal Title](https://skills.varg.ai/skills/hyperframes-wireframe-portal-title.md): A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.
- [PixiJS Text](https://skills.varg.ai/skills/pixijs-scene-text.md): Render and animate text in PixiJS v8: canvas Text, BitmapText, HTMLText and per-character SplitText.
- [Title & Kinetic Typography Direction](https://skills.varg.ai/skills/calesthio-title-kinetic-typography.md): 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