Typewriter Reveal

roles served

• Hook (from hook-typed-line-to-reveal): Type a relatable question/statement live, then COLLAPSE it and spring-pop the brand — a logo lockup OR a product-UI moment (“here’s the everyday pain, now here’s us”).
• Brand_Outro (from brand-outro-persistent-mark-cta-rail): Hold the hero mark dead-center/top the whole shot while a sub-line beneath it swaps or types its way into the final CTA — landing the ask once the logo is already established.

duration: 3.6–7s (Brand_Outro 3.6–6.0s · Hook 5.5–7s)

shot structure (one consolidated template; [slots] are product-agnostic)

• Scene 1 (0.0–~2.0s): On a solid [bg color] field, a blinking text-input caret | sits at the line start, then [primary line] TYPES on character-by-character with the caret trailing.

  • Variant — Hook: nothing else is on screen; the typed [hook line] owns the frame. (Sub-variant: the line types inside UI chrome — a rounded [input/pill] — and the whole assembly continuously TRANSLATES leftward + scales slightly so the active caret stays pinned near frame-center while earlier words scroll off and clip past the left edge — a ticker push.)
  • Variant — Brand_Outro: a [logo mark] (+ optional [wordmark]) is already centered/upper and STAYS fully visible for the entire shot; an entry flourish plays on the mark itself (e.g. [checkmark/icon] strokes into the mark, or thin concentric rings ripple outward from it), and the typed [tagline / product label] is the SUB-LINE beneath the mark.

• Scene 2 (~2.0–4.5s): The typed line is MODIFIED in place — the active text is edited rather than re-shot.

  • Variant — Hook: final word(s) BACKSPACE out and a new word RETYPES ([word A] → [word B]), or the fill/caret snaps to [accent color] on the final word. Holds briefly.
  • Variant — Brand_Outro: the sub-line is REMOVED in place — a direct hard CUT/replace (NO backspace) or a moving mask-WIPE erases it — while the mark performs a small idle move (gentle rotate / sparkle reposition); the mark never leaves frame.

• Scene 3 — resolve:

  • Variant — Hook (collapse, ~0.3–0.7s): caret vanishes; the whole text/assembly COLLAPSES to a point at center (horizontal X-collapse or scale-to-0 zoom-out) and disappears, leaving a clean [bg]. Then (remainder) a centered [brand element] SPRING-POPS in:
    • logo-lockup sub-variant: a [mark/icon] pops, then slides aside as a [wordmark] UNMASKS / slides out from behind it; both settle into a centered lockup.
    • product-UI sub-variant: a [UI control] (e.g. button) pops; a [cursor] sweeps in from a corner and homes onto it; on contact a ~150ms state-FLIP — base cross-fades to [accent color], icon inverts, and a soft radial GLOW blooms outward and persists.
  • Variant — Brand_Outro (~4.5s–end): the final [CTA] resolves in the sub-line slot — TYPED in with a caret and/or shown as a [CTA in accent-color button] beside plain text; an optional [accent color] GLOW ring / halo settles around the persistent mark. Holds to end. Final frame: [logo mark] + (glow ring) + [CTA].

motion vocabulary: blinking text caret; character-by-character type-on; backspace-and-retype OR in-place hard-cut/mask-wipe text swap; optional leftward ticker push (assembly translates to keep caret centered); persistent centered hero mark (never vanishes) with entry flourish (icon stroke-draw, concentric ripple rings) and small idle move (rotate / sparkle); X-collapse / scale-to-0 zoom-out of the typed line; spring-pop brand reveal; wordmark unmask-slide into lockup; cursor sweep + UI state-flip + radial glow bloom; accent glow/halo ring settle; pill/button CTA reveal; hold.

rule mapping (per motion verb → rules/<id>.md)

• blinking text caret → context-sensitive-cursor (caret color-switch + blink)
• character-by-character type-on → discrete-text-sequence (typing/typos/holds/backspace); recipe gsap-effects (typewriter)
• backspace-and-retype → discrete-text-sequence
• in-place hard-cut / replace text swap → discrete-text-sequence (whole-text state swaps)
• mask-wipe erase of sub-line → techniques.md clip-path reveal (run in reverse)
• leftward ticker push (assembly translates to keep caret centered) → camera-cursor-tracking (viewport follows a moving caret)
• persistent hero mark hold → no motion rule needed (static anchor; intentional — it’s the absence of motion)
• entry flourish: icon stroke-draw into mark → svg-path-draw
• entry flourish: concentric ripple rings from mark → cursor-click-ripple (ripple bloom)
• small idle mark move (rotate / sparkle reposition) → sine-wave-loop (idle)
• X-collapse / scale-to-0 zoom-out of typed line → scale-swap-transition (closest fit — it morphs/collapses elements at a shared center; approximation, since a standalone collapse-and-vanish without the paired same-center brand pop isn’t its exact case)
• spring-pop brand reveal → spring-pop-entrance (alt physics-press-reaction)
• collapse-text → pop-brand as a same-center morph pair → scale-swap-transition (morph two elements at same center)
• wordmark unmask-slide into lockup → techniques.md clip-path reveal (unmask); slide via spring-pop-entrance
• cursor sweep onto UI control + press → cursor-click-ripple (cursor→target press + ripple)
• UI state-flip (base/icon invert on contact) → hacker-flip-3d
• radial glow bloom / accent glow-halo ring settle → asr-keyword-glow (accent glow); ring expansion via center-outward-expansion
• pill/button CTA reveal → spring-pop-entrance (alt scale-swap-transition)

camera modifier: none required — camera is static for both roles. The Hook ticker push is an ELEMENT translate (the typed assembly slides leftward to keep the caret centered), not a camera move → modeled by camera-cursor-tracking rather than a true camera rule.