Docs Block Reference Kinetic Block

Kinetic Block

Animated "kinetic poster" typography. Turns 1-4 short lines of text into a dramatic, motion-design title sequence — letters and lines animate in, hold, and animate out on a shared timeline.

Type: kinetic

When to use

USE for: hero / opening titles, taglines, manifesto statements (1-4 declarative lines), section dividers, short pull-quotes, animated logotypes.

DO NOT use for: body paragraphs, lists, long sentences, prices/data, anything over 4 lines or ~4 words per line. There is no auto-chunker — the block animates exactly the lines you give it.

Strip terminal punctuation. Prefer ALL CAPS or Title Case for heroes.

Two authoring modes

A kinetic block has a Mode toggle:

  • Composition (default) — pick a numbered preset from the catalog and type your lines into one textarea. The preset decides each line's motion/timing. Three composable layers (Hierarchy, Reveal, Accent) refine the look. Fastest path.
  • Per-Line — author each line independently: per line you set text, motion, size (px), font, weight. Maximum control. Use when a preset is close but a specific line needs a different motion/size/font.

    • Most generation should use Composition mode. Reach for Per-Line when the design calls for mixed fonts/sizes per line.

    Settings reference (keys for generation)

    | key | type | default | applies | notes | |---|---|---|---|---| | composition | enum (see catalog) | block-slam | Composition mode | the preset key | | tier | hero / label / equal | hero | scene comps | size hierarchy (see Hierarchy) | | reveal | none / iris / wipe / slit | none | all | stage-level entry mask | | accent | none/slash/backslash/brackets/frame/numeral | none | scene comps | poster overlay | | accent_text | string | "" | accent=numeral | the big background number, e.g. 2024 | | custom_mode | 1/0 | 0 | — | 1 = Per-Line mode | | custom_lines | JSON array | [] | Per-Line | per-line entries (see schema) | | color | hex | #ffffff | all | block text color (single color, no gradient by design) | | loop | 1/0 | 1 | all | replay continuously | | speed | 0.25–3 | 1 | all | timing multiplier | | intensity | 0.5–2 | 1 | all | motion-amplitude multiplier | | height | px | 400 | all | block height when fit_container is off | | fit_container | 1/0 | 0 | all | fill parent height (use in square cells) |

    Background is transparent — the containing section/cell shows through. For ambient color, use the section's gradient/mesh background, NOT the text.

    Composable layers (Composition mode)

    These stack on top of any composition for huge expressive range (composition × hierarchy × reveal × accent).

    Hierarchy (tier) — size relationship between lines

    • hero (default): line 1 is the big hero, the rest are small captions.
    • label: line 1 is a small label, line 2 is the hero, the rest are captions.
    • equal: every line the same size.

    Reveal (reveal) — stage-level entry mask that clips the whole block open

    • iris: a circle expands from the centre.
    • wipe: a hard edge sweeps across.
    • slit: a horizontal slit opens vertically.

      • Plays once on entry; composes with any composition (e.g. Camera Arc revealed through an iris).

    Accent (accent) — poster decoration overlay

    • slash // / backslash \\: a mark at the top-left.
    • brackets [ ]: rules flanking the block.
    • frame: a border inset from the block edges.
    • numeral: a big faint number behind the text — set accent_text (e.g. 2024, 24/7).

    Composition catalog

    Pick by tone and line count. Scene compositions (first five) are the cinematic motion-pack effects and honor Hierarchy/Reveal/Accent.

    Scene compositions

    • Cylinder (cylinder) — Lines wrap a horizontal drum rolling around the X axis. The line sequence repeats to fill the drum (1 line ×6, 2 ×3, 3 ×2, 4 ×2 faces). Best with short lines.
    • Slide Assemble (slide) — Letters slide in horizontally under a // accent, hold, slide out. Left-aligned headline + captions.
    • Bar Sweep (sweep) — A skewed bar sweeps across and reveals the text in its wake, then wipes it out.
    • Extruded (brutal) — Bold letters with a hard 3D depth-shadow slide in horizontally. Brutalist.
    • Camera Arc (arc) — Letters blast in oversized from the camera, assemble, then blast back out. Most dramatic entrance.

    Hero + subtitle / general

    • Block Slam (block-slam) — Hero rises through a tight mask; sub bounce-slides. ★ best default.
    • Spotlight (spotlight) — Hero blurs in dramatically; sub letter-spaces. Cinematic.
    • Rise Fall (rise-fall) — Hero rises in, drops out; sub bounce-slides.
    • Quick Flash (quick-flash) — Snappy zoom in/out. Punchy CTAs.
    • Edge Burst (edge-burst) — Letters converge from the edges to centre.
    • Center Burst (center-burst) — Letters explode outward from centre.

    Multi-line / cascade

    • Triple Cascade (triple-cascade) — 3 lines, distinct motion each.
    • Up Cascade (reverse-cascade) — builds bottom-to-top.
    • Pulse Zoom (pulse-zoom) — each line pops with bounce.
    • Slide Stack (slide-stack) — lines build from alternating sides with bounce + per-letter kick, layered.
    • Side Step (side-step) — glide in from sides, exit the opposite side.
    • Mixed Cascade (mixed-cascade) — scatter / bounce / blur, variety per line.

    Letter-level

    • Wave Build (wave-build) — each line a different motion, sine-staggered.
    • Typewriter (typewriter) — types in letter-by-letter, then un-types (erases backward) on exit.
    • Random Rain (random-rain) — letters drop/rise in random order.
    • Letter Blur (letter-blur) — blur / letter-space / distort per line.

    Energetic / noise

    • Explosion (explosion) — letters scatter in from random angles at full intensity.
    • Tremor (tremor) — hero shakes in; label glitches.
    • Static (static) — hero noise-flickers in like a broken neon sign.
    • Glitch (glitch) — chromatic-aberration glitch in/out.
    • Distortion (distortion) — resolves out of heavy blur + contrast noise (analog tune-in).
    • Slow Burn (slow-burn) — slow blur in, long hold. Meditative.

    Decorative

    • Bracketed (bracketed) — brackets emerge at centre and split outward revealing text between them.
    • Viewfinder (viewfinder) — four corner brackets snap in around the hero (camera framing).
    • Scribbled (scribbled) — hero kicks in; a loose squiggle scribbles underneath. Single line only.

    Per-Line mode schema

    custom_mode: 1 and custom_lines = a JSON array (max 4 entries):

    ``json [ { "text": "BIG HEAVY", "motion": "rise", "px": 96, "weight": "900" }, { "text": "small serif light", "motion": "fade-in", "px": 34, "font": "Georgia, serif", "weight": "300" }, { "text": "mono medium", "motion": "glide-from-l", "px": 50, "font": "monospace", "weight": "600" } ] ``

    Per entry:

    • text — the line.
    • motion — one of the entry-motion keys below. The matching exit is auto-paired.
    • px — line size in pixels. Omit/blank = auto-fit (engine sizes the line to fit).
    • font — a CSS font-family stack (or omit to inherit). The UI offers a curated set: System, Sans, Serif, Editorial, Humanist, Couture, Display, Stamped, Script, Hand, Marker, Chalk, Mono, Typewriter.
    • weight — 300–900 (omit to inherit the block's heavy default).

    Entry-motion keys (for motion)

    Translate: rise, drop, glide-from-l, glide-from-r, bounce-slide-l, bounce-slide-split, bounce-rise Scale: zoom-in, scatter-in Fade/blur: fade-in, blur-in, spacing-in, letter-kick-in Clip-mask: circle-reveal, slit-open, wipe-right, wipe-left Glitch/noise: glitch-in, distort-in, shake-in, noise-flicker

    Screen-level Auto-advance

    For multi-screen kinetic sequences, set screen_autoplay_seconds (>0) on the screen (Scroll Timeline section), not the block. The screen auto-advances N seconds after becoming active. Pauses when the tab is hidden. Off by default.

    Examples

    Bold hero (Composition): ``yaml composition: block-slam text: | THE FUTURE STARTS HERE ``

    Cinematic single word, revealed through an iris: ``yaml composition: spotlight reveal: iris text: | AWAKE ``

    Poster with year numeral + brackets: ``yaml composition: slide accent: numeral accent_text: "2024" tier: label text: | EST NOIR STUDIO since two thousand ``

    3D drum (short lines): ``yaml composition: cylinder fit_container: 1 text: | EAT DRINK REPEAT ``

    Mixed typography (Per-Line): ``yaml custom_mode: 1 custom_lines: | [ { "text": "BREAKING", "motion": "letter-kick-in", "px": 88, "weight": "900" }, { "text": "the mold", "motion": "glide-from-r", "px": 40, "font": "Georgia, serif", "weight": "400" } ] ``

    Anti-patterns

    • No paragraphs, no >4 lines, no >~4 words/line — they clip at the block edges.
    • No terminal punctuation in kinetic copy.
    • Don't use Cylinder with long multi-word lines — keep them short or the drum faces collide.
    • Don't pick scribbled with more than one line (single-line only).
    • Don't combine Composition mode and Per-Line mode in one block — pick one (custom_mode decides).
    • No text gradient (single color by design); for color ambiance use the section background.
    • Don't enable reveal/accent on every block by default — they're deliberate accents.
    • All motion uses ease-in-out; only the Cylinder spin is linear (continuous loop).