kinetic-type-beats — Kinetic-Type Beats

intent: A flat, centered, bold-type shot where the motion IS the word/phrase changing — the line either swaps tokens in place by hard cut, or builds a statement across full-screen beats (each with its own move) that lands a spring-pop payoff.

roles served

• Hook (from hook-kinetic-type-flash): when one stationary line lands a punchy rhetorical question or "you keep doing X" callout and the in-place token swap itself is the joke.
• Hook (from hook-kinetic-type-escalation): when ONE statement should escalate across distinct full-screen beats (each a different move) and punctuate on a spring-pop payoff element — a rising-intensity / "transform X into Y" opener.
• Problem (from problem-kinetic-type-beats): when the script is 3–5 short pain statements (or a "what-if?" framing) that should each land alone, on a bare canvas, before the next replaces it — no product visible yet.
• Product_Intro (from product-intro-kinetic-type-namedrop): when the hook IS the words — hard-cut through "Introducing…" / tagline / value beats and resolve on the brand name or logo.
• Benefits (from benefits-kinetic-type): when "what you get" is a rapid-fire staccato montage — 8–12 short value phrases, each flashing and clearing before the next at high tempo.
• CTA (from cta-kinetic-type): when the sign-off is a punchy closing line (or a short stack of value lines) that snaps/fades in beat-by-beat and lands on the brand lockup or URL — no spatial set, no clicked button.
• Brand_Outro (from brand-outro-kinetic-type-resolve): when the close is a rapid center-channel barrage of single-word verbs asserting breadth, resolving on the brand's one defining word (motion-is-the-message, no logo lockup).

duration: 3.4–12s (Benefits fastest ~3.5–4s at 8–12 sub-0.5s beats; Brand_Outro ~3.6s; Problem longest 7–12s; CTA spans 3.6–11.7s with beat count)

shot structure (flat, fixed center anchor; bold sans-serif text on a solid [bg color]; type/tokens are the only subject; camera locked unless a modifier is noted; two folded sub-shapes — (A) fixed-line token swap and (B) multi-beat statement build)

• Scene 1 (0.0–~1.0s) — first beat lands. Solid [bg color] field. Bold [type color] text arrives dead-center via ONE entrance: type-on character-by-character with a trailing blinking caret, OR a hard-cut FLASH-in (no fade/slide), OR a per-word staggered fade/blur, OR an oversized word that smoothly SCALES DOWN to a small centered word. An optional [accent color] move plays on the key word(s): a left→right drawn underline / strike-through, a small particle/dot burst from behind the text, or a [accent color] selection-box framing the word.

  • Variant — Hook (flash): just the fixed [hook line] (or its first word) parks at center; no escalation move.
  • Variant — Hook (escalation): [beat 1 text] arrives big and scale-downs to centered, OR sits over a glowing [motif] with a slow camera push-in (see camera modifier); ends on a hard cut.
  • Variant — Problem: centered [pain line 1] reveals in chunks across one or two lines with its [accent] underline / particle burst.
  • Variant — Product_Intro: bold [hook word, e.g. "Introducing"] enters with a typographic accent (split-and-slide apart, drawn underline, or [accent] selection-box).
  • Variant — Brand_Outro: optional single-frame flash of [product UI / hero asset] precedes the verb channel, then [verb 1] hard-cuts in centered.

• Scene 2..N — beats replace each other in place (the engine). The center anchor advances one beat at a time; nothing from the prior beat lingers. Choose the swap mechanism by sub-shape:

  • Sub-shape A (fixed-line token swap): the line stays fixed and only the variable slot changes by an instant hard CUT (no roll/scroll/blur) — [token A] → [token B] → [token C] — OR the final word(s) backspace out and a new word retypes ([word A] → [word B]). The rest of the line holds.
  • Sub-shape B (multi-beat statement build): each full-screen beat hard-cuts to a NEW background/line, and each gets its own distinct entrance/exit MOVE — springy scale-in/scale-out overshoot, 3D letter-tumble (glyphs scatter into a rotating depth cloud, then reassemble into the next phrase), motion-blur fly-in that resolves sharp at center, prior text accelerates/zooms past the camera while fading, letter-spacing collapse, or a bottom-up masked slide. Background may hard-flip [bg A]↔[bg B] on selected beats with [type color] inverting to stay legible.
  • Variant — Hook (escalation): beat 2 [beat 2 text] (more emphatic) snaps in; beat 3 [beat 3 text] (climax) holds, then a transition-out move on the type itself — a Z-dolly forward THROUGH an oversized glyph, OR a per-word karaoke highlight sweep lighting words left→right.
  • Variant — Problem: each [pain line k] enters by chunk-reveal or motion-blur fly-in as the prior blurs/zooms off; an optional [accent color] interstitial word ("[what-if hook]") scales up from center, holds, then zooms past the camera and fades.
  • Variant — Product_Intro: each [tagline phrase] is a hard-cut/push-through inverted-text beat with its own one-shot accent (strike-through, slider/toggle shapes sliding in, or a bg-invert cycle white→[accent]→black flipping fg/bg).
  • Variant — Benefits: high tempo (~0.4s/beat) — each [benefit phrase] pops via springy scale-in/out or 3D letter-tumble; multiple bg light↔dark flips across the run with text-color invert.
  • Variant — CTA: each [value line] → [value line] → [CTA verb line] clears by hard cut / zoom-blur cut through near-black / fade-out, then the next pops/fades/slides in. Optional [accent motif] draws on behind (rising line-graph trim-path, thin wireframe guides, gutter geometry tiles).
  • Variant — Brand_Outro: a centered single [verb / keyword] HARD-CUTS to the next at a steady ~0.2s cadence (no fade/scale) over a continuous moving field (see camera modifier).

• Scene N (final beat → end) — resolve and HOLD. The last beat lands and holds to the end (settle only, no further scale-out). Resolution diverges by role:

  • Variant — Hook (flash): last token swap lands and holds; optional tiny punctuation/emphasis snap (? → ?!, or fill snaps to [accent color]).
  • Variant — Hook (escalation): resolve on [payoff bg] — a [payoff element] (colored square / heart-eyes reaction emoji) SPRING-POPS in center; small [accent motes] drift outward; subtle settle.
  • Variant — Problem: final [pain line] reveals (left→right swipe with leading-edge blur, OR letters explode radially then the resolving line fades up); holds the pain on screen.
  • Variant — Product_Intro: resolve on the brand — [logo mark] / [wordmark] pops in centered (optional sting: liquid/ink splash, blob backing), OR the final value word holds inside an expanding-iris [accent] circle that scales to fill frame and hard-cuts the closing word through it.
  • Variant — Benefits: the last [benefit phrase] arrives (optionally on the inverted bg) and SETTLES — does not scale/tumble back out.
  • Variant — CTA: land on the lockup — [logo mark] SCALES UP small→full and holds, OR a [logo]/[url] builds segment-by-segment beside its icon. End-card holds dead static.
  • Variant — Brand_Outro: hard cut to the [resolve word / brand keyword] (longest, still centered); HOLDS ~0.5s while the background field keeps moving.

motion vocabulary: hard-cut / flash word swaps; in-place token cycle (instant cut, no roll/scroll/blur); type-on with trailing blinking caret; backspace-and-retype; per-word staggered fade/blur reveal; big→small scale-down; springy scale-in/scale-out overshoot; 3D letter-tumble scatter-and-reassemble; motion-blur fly-in / blur-off; prior text zoom-through-camera; letter-spacing collapse; bottom-up masked slide; drawn-on [accent] underline / strike-through; particle/dot burst from text; [accent] selection-box frame; bg-invert hard-flip with text-color invert; karaoke per-word highlight sweep; radial letter-explode; expanding-iris circle wipe-to-next; final spring-pop payoff element (square / emoji / logo mark); drifting [accent] motes / ambient shapes; segment-by-segment URL/wordmark build; final-token punctuation snap; settle-and-hold.

rule mapping

• hard-cut / flash word swaps, in-place token cycle, whole-line state swaps at time thresholds → discrete-text-sequence
• type-on character-by-character + blinking trailing caret → discrete-text-sequence (text/typing state progression) + context-sensitive-cursor (caret blink/color-switch)
• backspace-and-retype final word(s) → discrete-text-sequence (typos/holds/backspace is explicitly in-scope)
• one short distinct phrase per beat / script-driven phrase windows / word-by-word tagline assembly → dynamic-content-sequencing
• percussive per-beat phrase entrances on a shared beat array (distinct entrance per phrase, steady cadence) → kinetic-beat-slam (best fit for the multi-beat statement-build engine and the ~0.2s Brand_Outro verb march)
• per-word staggered fade/blur reveal → kinetic-beat-slam (per-phrase/per-word distinct entrances); the soft-focus blur component → depth-of-field-blur (selective-focus blur on the off-focus words)
• big→small scale-down on a word; springy scale-in/scale-out overshoot → spring-pop-entrance (spring pop/settle) backed by gsap-effects for the plain scale tween
• 3D letter-tumble scatter-into-depth-cloud then reassemble → depth-scatter-assemble (glyphs scatter into a 3D depth cloud and reassemble into the next phrase; combine w/ 3d-text-depth-layers for the extruded read, or hacker-flip-3d for an in-place per-char flip flavor)
• karaoke per-word highlight sweep synced across words → asr-keyword-glow (keyword glow+scale on a synced rail) OR css-marker-patterns (highlight sweep) — choose ASR-driven vs. static-timeline sweep
• drawn-on [accent] underline / strike-through / loop / scribble under key word → css-marker-patterns (highlight sweep / circle / burst / scribble / sketchout)
• particle/dot burst from behind text → css-marker-patterns (burst) backed by gsap-effects
• [accent] selection-box frame around a word → css-marker-patterns (circle/box marker) + gsap-effects
• bg-invert hard-flip (light↔dark / white→accent→black) with text-color invert → discrete-text-sequence (whole-text/state swap covers the synchronized fg/bg state change)
• letter-spacing collapse; bottom-up masked slide → gsap-effects (tween letter-spacing / masked translate) + techniques: per-word kinetic typography / clip-path reveal
• expanding-iris circle wipe that morphs the current word into the next at the same center → scale-swap-transition (morph two elements at same center)
• final spring-pop payoff element (colored square / reaction emoji / logo mark) → spring-pop-entrance (or physics-press-reaction for a weightier pop)
• drifting [accent] motes / ambient shapes / soft drifting gradient field beneath the type → sine-wave-loop (idle drift loop)
• segment-by-segment URL / wordmark build beside its icon → discrete-text-sequence (segment-by-segment state reveal) or dynamic-content-sequencing
• final-token punctuation / emphasis snap (?→?!, fill→accent) → discrete-text-sequence
• settle-and-hold final frame → spring-pop-entrance (settle phase) / static hold (no rule needed)
• motion-blur fly-in / blur-off / zoom-through-camera streak on type → motion-blur-streak (directional velocity blur on a fast fly-in / zoom-through; the heavy motion-blur smear resolves sharp at center)
• radial letter-explode (glyphs explode outward radially then resolve) → depth-scatter-assemble (radial per-letter explode-and-resolve is in scope alongside the depth-cloud scatter)
• 3D letter-tumble depth-cloud scatter-and-reassemble → depth-scatter-assemble (free tumbling depth-cloud that flies out and snaps back into the next phrase)

camera modifier (optional, layered over the flat shot; most variants are camera-locked)

• Slow continuous global zoom-in / uniform push-in running underneath the whole sequence (Problem, Brand_Outro) → multi-phase-camera (push phase) — gives parallax between the fixed type and a moving background field.
• Camera dolly/zoom forward THROUGH an oversized glyph along Z as a beat transition-out (Hook escalation, Product_Intro push-through) → coordinate-target-zoom (target the glyph center) or multi-phase-camera (push).
• Slow push-in on Scene 1 over a glowing [motif] (Hook escalation) → multi-phase-camera (push) or coordinate-target-zoom.
• Note: the in-place token swap (sub-shape A) and most Benefits/Hook-flash/CTA variants are fully camera-static — the swap is the only motion.