Prompt Type Submit Generate

roles served

• Hook (from app-window-push-in-prompt-typing): when the opener is “watch me ask” — typed headline beat(s), ONE eased push-in lands tight on the product’s input, the prompt types and the clip ends at / just after submission (sub-shape A).
• Hook (from typed-command-output-scroll): when the demo loop ITSELF is the hook — command in, output builds and scrolls, and a second command / retype starts before the cut, ending mid-action (sub-shapes B/C with the restart ending).
• Product_Intro (from prompt-typing-composer): when the first look at the product IS its composer — a brand beat opens onto the input surface, a long prompt types with hovers / attachments / dropdown picks, and the camera steers gently toward the input or the confirming control (sub-shape A, occasionally running through to an agent-log payoff).
• Product_Intro (from search-query-walkthrough): when the product is introduced through its search affordance — a short [query] types with a blinking caret, autocomplete / results populate LIVE, and a confirm click settles the result state (sub-shape C, search skin).
• Key_Feature (from prompt-type-submit-generate): when the capability is demoed as ONE prompt→response round trip — submit into thinking/status states, then a streaming answer, action-log rows with brand icons, green diff cards, a chart drawing itself, or an instant generated-app reveal (sub-shapes A/B/C — the family’s widest role).
• CTA (from install-command-end-card): the install-command end card — the closing [headline] DEMOTES (shrinks, grays, lifts) to make room for a [terminal pill] that springs in and stretches wide, the [install command] types out with a blinking cursor, flanking metadata and a [tool-icon row] pop in, and the finished card holds long. No submit, no response — the typed command IS the ask (sub-shape A, terminal skin).

duration: 5.2–12s (A prompt-as-hook 5.2–12s, incl. the ~7.4s CTA end card; B full generate loop 5.45–11.9s; C instant-result surface 5.7–11.9s — a long-form family: most members run 7–12s because the response needs room to arrive)

shot structure (a [product input] on/inside a [product surface — app window, web page, terminal, browser chrome, sidebar] over [bg color]; the input is the gravitational center — the camera makes at most one or two purposeful moves toward or away from it and is otherwise LOCKED; typing is character-by-character behind a visible caret, and response content arrives progressively, never dumped; three folded sub-shapes — (A) prompt-as-hook: the clip ends at / just after the submit (or mid-word), the ask is the show; (B) full generate loop: submit → status theater → the output builds block by block; (C) instant-result surface: the machine answers with a finished surface, often re-queried before the cut)

• Scene 0 (optional, 0.0–~2s) — lead-in beat. ONE establishing move before the input owns the shot: a [headline] types on centered and clears; a [title card] hard-cuts away; a brand beat ([logo/mascot] centered, [serif title] building in word groups, logo shrinking-and-rising to dock top-center); an [orb / mark] forms with a glowing rim; the [app window] flies in with motion blur and settles; or a full-frame [thumbnail grid] parts at its vertical centerline to clear the stage. Keep it ≤2s — the input is the star.

  • Variant — Hook: typed headline beats carry the intro — “[Introducing X]” types on, holds, is replaced by the [tagline] typing in the identical style; the typing register is established before the product ever appears.
  • Variant — Key_Feature: the capability claim types as a bare title (“[Run a task across multiple models.]”) then hard-cuts to the surface — or skip Scene 0 entirely and open on the live surface mid-workflow.
  • Variant — CTA: the [closing line] types on in two steps (“[Designed.] [Not generated.]”) and holds — it will demote in Scene 2.

• Scene 1 (~1–3s) — the input takes focus. The [product input] arrives or is primed: a [pill bar] EXPANDS sideways from the mark/chip; a [prompt palette / card] SPRINGS in at center with a soft shadow; ONE smooth eased/accelerating push-in crops tight onto the composer inside the [app window] (headline chrome slides out of frame); a [⌘K search modal] springs to center while the page blurs behind it; a cursor clicks a [menu row / Assistant button] and the prompt block appears; or a [✕ clear button] empties the previous query back to [placeholder]. Optional composer ritual (pick 1–2, before or during typing): an [attachment] drags in and settles in a tray below the input; a [model / option dropdown] opens beneath the selector, rows hover-highlight, a checkmark lands and the toolbar label updates.

  • Variant — Product_Intro: the ritual is the introduction — a [chip grid] fades in and the cursor arcs across 2–3 hover highlights before clicking the one that opens the composer; the affordances are the tour.
  • Variant — Key_Feature: the surface already carries an old [query] and its previous [result panel] — clearing it says “this is a working tool, not a mockup”.

• Scene 2 (~2–6s) — the prompt types (the engine). The [prompt text] types rapidly character-by-character behind a blinking caret; the input card GROWS downward / wraps as text fills, pushing footer controls and attachments down; a typed [token] may convert into an inline [brand pill] mid-typing ([@browser] → a colored [Browser] chip, typing continues around it); the camera may run ONE slow continuous push-in toward the input, decelerating to a near-hold on the typed ask. Sub-shape (A) may END here — cut mid-word with the caret blinking, or held on the finished prompt.

  • Variant — Hook (A): the typed ask is the cliffhanger — end on the completed prompt, or on the submit click as the interface DIMS at the cut.
  • Variant — Product_Intro (A): the camera dives toward the bottom input while [option pills] cascade in above it; the prompt is still mid-word at the cut — the product is introduced as something you talk to.
  • Variant — CTA (A, install end card): the Scene-0 headline DEMOTES — scales ~50%, desaturates to gray, lifts upward — as a small [$ chip] spring-pops below and STRETCHES horizontally into a wide [terminal pill]; the [install command] types out inside it; a faint [repo link] and a “[Works with]” label fade in quietly; a row of [tool icons] pops in one after another with soft spring scale; the finished composition holds long, only the caret blinking.

• Scene 3 (~4–7s) — submit + machine theater. The [submit control] is clicked (cursor glide + press dip; the button may have MORPHED state on first keystroke — waveform → up-arrow — and may flip to a [stop] control while streaming) or the retype implies enter. The surface answers instantly with a working state: prior content VANISHES (chip grid gone, panel collapses to its slim header, whole layout swaps); then the theater — [status phrases] cross-dissolve with a left-to-right shimmer sweep (“[Thinking]” → “[Modeling…]” → “[Planning…]”), a [spinner] rotates over a loading strip, a row of [loading cards] lines up, or a [checklist] populates and its items flip one by one to green checks with strikethrough while a [status heading] flips tense (“[Using X]” → “[Used X]”).

  • Variant — (A) status-flare exit: end the clip ON the theater — “[Generating…]” / the rotating spinner — the flare is the button; the answer is left to the imagination.

• Scene 4 (rest) — the answer arrives. Choose by sub-shape:

  • Sub-shape B (full generate loop): the output BUILDS progressively, each block pushing content down — [answer text] streams paragraph by paragraph; [action-log rows] pop in sequentially, each with a [brand icon]; [diff cards] expand with green-highlight added lines; [chart lines] draw staggered left-to-right from a shared origin; an [ASCII / summary table] draws in; live counters tick; the surface auto-scrolls vertically to follow the newest line (page, terminal, or in-card scroll) — often under ONE slow continuous push-in on the result window.
  • Sub-shape C (instant-result surface): the machine answers with a finished surface — the matching [result / article] renders in place; [autocomplete chips] stagger-pop below the bar WHILE the query types (the machine answers every keystroke), then a hover fills the [Search button] solid and a click confirms; the [generated page] rises as a rounded card and SCROLLS continuously beneath the pinned prompt; a blur-whip resolves onto the [artifact window] and a tab click FLIPS code → preview; or a zoom-out reveals the prompt pill was inside a full [workspace] where the [content] rewrites itself live.

• Scene 5 (final beat) — resolve. Diverges by role and sub-shape:

  • Variant — Key_Feature (hold): HOLD on the completed output — chart finished, diff cards + [action buttons] fully rendered; no fade-out, no blank end frame.
  • Variant — Product_Intro (confirm): the cursor lands the confirming click ([Create PR] / [Generate] / [Search]) as the clip ends, or extras fade and a final push-in leaves the clean end state; one member hard-cuts to a minimal [end card] — the submit button alone at dead center with a settle pop.
  • Variant — Hook (restart — the signature): a SECOND [prompt / command] starts typing at a fresh prompt line, or the query BACKSPACES-AND-RETYPES and the output swaps wholesale to [result 2] — the clip ends MID-ACTION, mid-scroll or mid-word: the loop is endless, and that is the point.
  • Variant — CTA: the end card from Scene 2 simply holds to the last frame; the blinking cursor is the only motion.

motion vocabulary: character-by-character typing with blinking caret / block cursor; typed-headline beats replacing each other; input pill grows / wraps downward into a multi-line box; prompt palette / card springs in; pill bar expands sideways from a mark or chip; orb formation with glowing rim; typed token → inline brand-pill morph mid-typing; placeholder clear; ✕-click query clear; backspace-and-retype query swap; attachment drag-in and tray settle; dropdown open + row hover-highlight + checkmark select + toolbar label update; chip-grid hover dance; cursor glide / arc with hover highlight fills; click press dip; submit-button state morph (waveform→up-arrow, submit→stop); hover fill-state swap on a Search button; content vanish / panel collapse / layout swap on submit; status-phrase cross-dissolves with left-to-right shimmer sweep; pulsing “Thinking”; spinner rotation; loading strip; animated trailing dots; loading model-card row; status-heading tense flip (Using→Used); checklist squares flipping to green checks with strikethrough; action-log rows popping in sequentially with brand icons; streaming text blocks pushing content down; green-highlight diff cards expanding; staggered left-to-right chart line-draws; ASCII / summary table draw-in; count-up ticker; vertical output scroll (page / terminal / in-card) following the newest line; generated page rising as a rounded card and scrolling beneath a pinned prompt; autocomplete chips rapid stagger-pop; code↔preview instant flip on tab click; blur-whip transition; prompt jumps to a heading on submit; zoom-out reveal from prompt pill to full UI window; single eased / accelerating push-in landing on the input; slow continuous push-in on the result window; window fly-in with motion blur; zoom + pan cropping browser chrome; ⌘K modal spring-in with background blur; full-frame grid parting at the vertical centerline; headline demotion (scale-down + desaturate + lift); chip horizontal-stretch into a wide terminal pill; quiet low-contrast metadata fade-ins; sequential spring pop-ins of an icon row; second prompt typing at the cut; interface dim / fade at the cut; long static end hold with blinking cursor.

rule mapping

• character-by-character typing, placeholder clear, backspace-and-retype, second prompt at the cut, typed-headline beats → discrete-text-sequence (typing / typos / holds / backspace) backed by gsap-effects (typewriter recipe)
• blinking caret / block cursor (persisting through holds) → context-sensitive-cursor
• prompt / status / output phrase windows, script-driven beat durations → dynamic-content-sequencing
• input card grows downward / wraps as text fills → anchored-layout-expand (top-anchored downward growth, stepped at wrap boundaries)
• typed token → inline brand-pill morph mid-typing → composition: scale-swap-transition (token→chip swap at the conversion threshold) + card-morph-anchor (the reflow around the chip)
• prompt palette / modal / dropdown springs in; loading cards, log rows, diff cards, autocomplete chips, icon rows arriving staggered → spring-pop-entrance (single hero or staggered group)
• pill bar expands sideways from a mark; chip stretches into a wide terminal pill → card-morph-anchor (container morph)
• cursor glide to a control, press, ripple → cursor-click-ripple; the press dip + recovery → press-release-spring (or physics-press-reaction for cursor+button compressed together)
• hover highlight fills, Search-button instant solid fill, UI keyword accents → asr-keyword-glow (static-timeline glow variant) or press-release-spring (color-transition variation)
• attachment drag-in with cursor → context-sensitive-cursor (pointer↔grab) + spring-pop-entrance (tray settle)
• content vanish / layout swap / panel collapse on submit; code↔preview instant flip → scale-swap-transition (paired same-center swap) or a hard tl.set state swap via discrete-text-sequence semantics
• prompt jumps to a heading on submit → FLIP reposition — see hyperframes-keyframes (FLIP); the travel itself via nudge-curve (slow-fast-slow group slide)
• status-phrase cross-dissolves with shimmer sweep → discrete-text-sequence (phrase swaps) + ambient-glow-bloom (Shimmer sweep variation — single-pass traveling sheen, clipped to the text)
• spinner rotation, animated trailing dots, pulsing loader glyphs → svg-icon-enrichment (rotating / pulsing internal SVG elements); the bounded “Thinking” pulse → sine-wave-loop (finite repeats — this pulse PERFORMS status, it is not idle wobble)
• checklist state flips, status-heading tense flip, status-pill swaps → discrete-text-sequence (discrete state stepping); the checkmark stamp → svg-path-draw or spring-pop-entrance
• streaming text blocks / log rows pushing content down → dynamic-content-sequencing (per-block windows) + spring-pop-entrance (per-row arrival)
• vertical output scroll following the newest line (page / terminal / in-card) → composition: content translateY keyed to the same timeline as the content windows + a matched viewport-change counter-pan when the frame itself travels
• generated page as a rounded card whose internal content scrolls → 3d-page-scroll (flat variant — internal scroll of a page card)
• staggered chart line-draws → svg-path-draw (stroke-dashoffset, staggered starts)
• count-up ticker / live counters → counting-dynamic-scale; result bars / fills → stat-bars-and-fills
• single eased push-in landing on the input; slow continuous push-in on the result → multi-phase-camera (push phase) with the destination framed via coordinate-target-zoom
• zoom-out reveal from prompt pill to full workspace; zoom + pan cropping chrome → viewport-change (composite pan+scale on the .world wrapper)
• window fly-in with motion blur; blur-whip transition → motion-blur-streak
• ⌘K modal with background blur → depth-of-field-blur (blur the page plane, keep the modal sharp) + spring-pop-entrance
• full-frame grid parting at the vertical centerline → center-outward-expansion (halves glide outward in lockstep)
• orb formation with glowing rim → ambient-glow-bloom + spring-pop-entrance
• headline demotion (scale-down + desaturate + lift) → gsap-effects (plain composite tween; no dedicated rule needed)
• interface dim at the cut, hard cut to a minimal end card, end mid-word / mid-scroll → exit conventions, no rule needed
• long static end hold with only the caret blinking → context-sensitive-cursor (the blink is the sanctioned residual motion)

camera modifier (the camera always serves the ask or the answer; many members are fully camera-static — typing, submit theater, and streaming carry the shot)

• ONE smooth eased / accelerating push-in that lands tight on the input and LOCKS (Hook, Product_Intro) → multi-phase-camera (push) + coordinate-target-zoom (target the input) — the defining move of the “watch me ask” opener.
• ONE slow continuous push-in running under the typing or under the output build, decelerating to a near-hold (Product_Intro, Key_Feature) → multi-phase-camera — gives the response weight without stealing from it.
• ONE zoom-out reveal — the prompt pill turns out to live inside a full workspace (Key_Feature, sub-shape C) → viewport-change (pull-back) — the inverse move; the ask was closer to the product than you thought.
• Entry-only flourishes: window fly-in with motion blur (motion-blur-streak), zoom + pan cropping browser chrome (viewport-change) — both settle before typing starts.
• Never more than two real viewport moves per shot; the frame is LOCKED during submit theater and streaming (the content scrolls, the camera does not).