--- title: "Kinetic Type Art: 17 typography pieces on the beat — AI video effect for text & titles" description: "Typeface strobe, beat slams, word tunnels, manifestos, riso posters and decrypt titles with beat maths, spacing and palettes as presets. Install in Claude Code, Codex and Grok with one command." url: https://varg.ai/how-to/skills/kinetic-type-art updated: 2026-10-29 --- # Kinetic Type Art: 17 typography pieces on the beat — effect skill for text & titles > **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q="` returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the how-to page. From a terminal: `curl -fsSL https://varg.ai/install | sh` installs the vargai CLI (https://varg.ai/how-to/cli.md): `vargai search` and `vargai install ` with no key, every varg model after `vargai login`. Typeface strobe, beat slams, word tunnels, manifestos, riso posters and decrypt titles with beat maths, spacing and palettes as presets. - **Type:** [Effect](https://varg.ai/how-to/effects.md) · [Text & titles](https://varg.ai/how-to/browse/skills/kinetic-type.md) - **Slug:** `kinetic-type-art` - **Status:** live - **Publisher:** varg (varg, verified) - **License:** MIT - **Source:** https://github.com/vargHQ/skills/tree/main/kinetic-type-art - **Works in:** Claude Code, Codex, Cursor, Gemini CLI, OpenClaw, varg Studio - **Requires:** Node 22 + ffmpeg (HyperFrames) or a Remotion 4 project - **Cost:** Free: renders locally with HyperFrames, Remotion or ffmpeg. Generated footage, voice or music is billed in varg credits with an estimate first. - **Runtime:** Minutes per template, mostly render time ## What it does Seventeen typography pieces where type is the picture. They share one craft: cut on the beat, hold between beats, space letters like a typographer, and keep every glitch discrete and seeded so it renders the same twice. **17 templates, 54 presets.** Every rule in the skill cites its source; every preset is exact values (durations, easing, sizes, colors, fonts) in a JSON file the agent loads. | Template | Presets | |---|---| | **Anime command screen title**: A compressed serif title card inside a fictional command screen with counters, glow and scanlines | Alert, Monitor, Title card only | | **Bitten word title**: A word eaten letter by letter, one scalloped bite per beat | Lemon, Orange, Lime, Strawberry | | **CRT decrypt title**: Two rows of glowing type decrypt on a side-angle CRT among dim labels | Amber, Green, Serif | | **Didone city title**: Two-word place name in traced Didone caps that holds, then springs wide | Ink, Night, Big stretch | | **Echo stack over halftone portrait**: Two words in stacked echoes over a dot-screened portrait, torn away to a moire contour face | Mono, Riso, Night | | **Glyph-tracking terminal camera**: A virtual camera tracks the newest glyphs of an agent terminal across beat-timed shots | Dark, Light, Tilt | | **Hyphen bridge wordmark**: Two words joined by a hyphen that grows, stands up and shrinks back | Paper, Night, Riso | | **Justified manifesto column**: A manifesto set word by word into one justified column, photos opening in gaps | Dark, Light, Caps poster | | **Liquid artwork reveal**: An artwork appears through a liquid distortion that settles, then the title resolves | Ripple, Marble, Reeded glass | | **Dot-burst particle title**: Typed titles where dots gather into one and burst into a coloured particle field | Meadow, Evening, Monochrome, Electric | | **Perspective photo wall**: Masonry wall of photos and captions tilted back, sliding toward camera in a seamless loop | Gallery, Night, Floor | | **Photocopy explainer**: Explainer graphics in photocopied paper and toner: question to number grid, or a clipping under a highlighter | Explainer, Article, Riso zine | | **One-word-per-beat red slam**: Big condensed words, one per beat, full frame on red | Slam, Punch, Riso, Invert accent | | **Scanned-sheet glitch wordmark**: A wordmark on a scanned sheet that holds, breaks up in short glitch bursts, and settles clean | Paper, Night, Newsprint | | **Type specimen grid**: One word set many ways on a ruled Swiss grid, intercut with photos | Swiss, Riso, Serif waterfall | | **Typeface strobe**: One word cut through many typefaces on a fast beat, landing on the brand face | Per beat, Strobe, Colour pairs | | **Repeating word corridor**: A word repeated on four walls of a corridor rushing toward camera | Paper, Night, Riso | **Rules every template follows** - Beat lock: frames per beat = 60/BPM × fps; tempos landing on whole frames at 30 fps: 90, 100, 120, 150 BPM; compute events from absolute time. - Cut on the beat, hold between: swaps are hard cuts on frame 0 of a beat; moves start 1–2 frames early; end on a 1–1.5 s hold. - Readability ceiling 20 characters/s; one word per beat safe to ~180 BPM. - Caps +0.05 to +0.12em; never letterspace lowercase; condensed slam caps 0 to +0.02em. - Glitch/decrypt discrete and seeded from (frame, glyph, seed); bursts 3–8 frames inside long clean holds; letter flips 0.2 s, 0.05 s stagger. - Real 3D CSS and real text for depth: perspective on the scene, linear travel for tunnels/walls. **Built from:** Tom Kan (Art of the Title) + Fonts In Use; Matthew Butterick (Practical Typography); Jhey Tompkins (@jh3yy); Peiran Tan; John LePore & David Sheldon-Hicks (Pushing Pixels); Kyle Cooper (Se7en); crt-pi; Envato Tuts+; @natAndrewson, @_chenglou, @ilovetypography. Renders locally with HyperFrames or Remotion for 0 credits; generated footage, voice or music runs through varg with a cost estimate first. ## Use when - How to make kinetic typography that hits on the beat - How to make a glitch logo animation on paper texture - How to make a text decrypt scramble effect for a title - How to make a 3D word tunnel animation - How to make a font changing every beat title - How to make a risograph style motion poster ## Not for - Add TikTok captions to my talking-head video (use caption-styles) - Put a name lower third on the interview (use title-design) - Generate an AI music video for my song (use varg-music-video) ## Install - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` - Codex: `npx skills add vargHQ/skills --skill kinetic-type-art -a codex -y` - Cursor: `npx skills add vargHQ/skills --skill kinetic-type-art -a cursor -y` - OpenClaw: `npx clawhub@latest install kinetic-type-art` - Gemini CLI: `npx skills add vargHQ/skills --skill kinetic-type-art -a gemini-cli -y` - Any agent, with the vargai CLI: `vargai install kinetic-type-art` ## Example output https://s3.varg.ai/files/72c55813-c0fa-4cf2-9f64-ec4f7ed0e7ae/file_a21ee5f206b4.mp4 — example (credit: varg) ## More text & titles skills - [Canopy Part Title](https://varg.ai/how-to/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://varg.ai/how-to/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://varg.ai/how-to/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://varg.ai/how-to/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://varg.ai/how-to/skills/pixijs-scene-text.md): Render and animate text in PixiJS v8: canvas Text, BitmapText, HTMLText and per-character SplitText. - [Kinetic Typography](https://varg.ai/how-to/skills/iart-kinetic-typography.md): Kinetic type for web and video: line, word or char splits, mask and blur reveals, variable-font motion, frozen-frame QA.