Kinetic type art: 17 art-directed typography pieces on the beat

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.

Gates

• Technique, not someone's work. Named designers and title sequences are cited for technique; never reproduce an artist's drawings, a film's title card or a brand's wordmark.
• Readability ceiling. At most 20 characters per second on screen; one word per beat is safe up to about 180 BPM.
• Free fonts only. Every font in the presets is OFL or Apache. Swap in the person's brand font only if they have a license for video.
• Seek-safe. Every value is a function of timeline time; randomness is seeded by frame. No Date.now(), requestAnimationFrame or unseeded Math.random().
• No credits here. These templates render locally for free. Generated footage, voice or music is the varg-ai skill: call estimate_cost and wait for the person's approval before any generation.

Pick a template

17 templates, 54 presets. Each reference file has the same sections: how the pros do it (every rule cited), presets, timing and numbers, how to build it, mistakes that look amateur, sources. Each JSON file holds the same presets as machine-readable values.

Read references/shared-type-craft.md first: it holds the numbers every template here shares.

Workflow

1. Match the request to a template and one or two presets from the table. Say which and why in one line, and show the person the preset names with their one-line looks before building anything.
2. Read the reference for that template, after the shared file, and load its JSON. Take values from the JSON; do not re-guess them.
3. Build it the way the reference's "Build it" section says, starting from the named HyperFrames blocks or varg components where it names them. Drive every value from timeline time so any frame renders the same on a re-render.
4. Fit it to the brand: swap in the person's colors and fonts only where the reference allows, then re-check contrast and safe zones with the numbers in "Timing and numbers".
5. Check a draft: render stills at the key moments (entrance, hold, exit), go through "Mistakes that look amateur", and fix before the final render.

Rules that hold for every template

1. 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.
2. 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.
3. Readability ceiling 20 characters/s; one word per beat safe to ~180 BPM.
4. Caps +0.05 to +0.12em; never letterspace lowercase; condensed slam caps 0 to +0.02em.
5. 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.
6. Real 3D CSS and real text for depth: perspective on the scene, linear travel for tunnels/walls.
7. Anime title cards: heavy Mincho serif squeezed to 0.55–0.75 width, not a condensed font.
8. Didones only big, at the large optical size.
9. Riso: #FF48B0, #3255A4, #FFE800 multiply, 1–3 px misregistration. Photocopy: desaturate, Levels 41/214, speckle grain, 1.7 px blur, horizontal streaks.
10. Screens serve the message: one huge title, one visual system, counters change on story beats.

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.

Every rule in the references cites its source by number. The full list, with links and what was taken from each, is in references/sources.md. Values marked as house defaults in a reference are our own starting points where no expert published a number.

Related skills

• title-design: lower thirds, show opens, CRT and glitch title reveals.
• motion-formats: kinetic lyric video and wave wordmark formats.
• paper-shaders: paper, halftone and grain backgrounds.
• HyperFrames registry (npx hyperframes catalog --query "…"): about 450 ready-made blocks; the references name the ones to start from.