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=<what the person wants>"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.mdto its path. Before generating anything, show the person the options on the how-to page. From a terminal:curl -fsSL https://varg.ai/install | shinstalls the vargai CLI (https://varg.ai/how-to/cli.md):vargai searchandvargai install <slug>with no key, every varg model aftervargai login.
Typeface strobe, beat slams, word tunnels, manifestos, riso posters and decrypt titles with beat maths, spacing and palettes as presets.
- Type: Effect · Text & titles
- 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: 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.
- Kinetic Typography: Kinetic type for web and video: line, word or char splits, mask and blur reveals, variable-font motion, frozen-frame QA.