Blueprints Index

A blueprint is a product-agnostic, time-coded shot template — Scene N (a–b s): … with [slots] and one named signature move — reverse-engineered from 178 golden product-launch clips across two mining rounds (plus 13 legacy blueprints reverse-translated to the same brief format). It encodes a whole shot across its full duration — reveals paced to the spoken line, not dumped at t=0 — so instantiating one structurally keeps content arriving instead of freezing. The full template lives in blueprints/<id>.md. Step 4 (visual design) instantiates one blueprint per frame (or composes from the motion vocabulary when none fits).

The 22 blueprints

Role → blueprint menu

A SOFT menu: story truth comes first. Story-design reaches in when the product’s own beat calls for that shape — it suggests a proven shape, it never dictates which beats exist. Each role has 4–11 options; if none fits the beat, compose freely (the menu is not a checklist). Each line is the trigger that should make you reach for that blueprint.

Roles here map 1:1 to the storyboard frame type enum: Hook=hook · Problem=pain_point · Product_Intro=product_intro · Key_Feature=feature_showcase · Benefits=benefit_highlight · Social_Proof=social_proof · CTA=cta · Brand_Outro=branding.

Hook

• kinetic-type-beats — a punchy rhetorical line / “you keep doing X” callout where the in-place word-swap is the joke, an escalating multi-beat statement landing a spring-pop payoff, word beats resolving into a logo reveal, or a centered beat triptych (a beat may be a non-text element).
• typewriter-reveal — type a relatable line, collapse it, pop the brand (logo or product-UI) — “here’s the everyday pain, now here’s us.”
• spatial-pan-stations — a timeline of milestones panned to the present (“evolution leading up to us”).
• constellation-hub — a constellation of tools/nodes + a camera push-in (“it connects everything”).
• cta-morph-press — a lone widget on a flat field morphs in place (pill→menu, chip→prompt card), performs, then vanishes to a typed title (“one widget doing one thing” opener).
• ticker-takeover — a cycling accent word (“could be X, or Y…”) violently replaced by a hero crashing in from off-screen.
• fixed-anchor-cycle — a static lead line holds while an accent line carousels through an audience/option roll-call beneath it, then clears into statement beats landing the brand line.
• prompt-type-submit-generate — “watch me ask”: a typed headline → one push-in onto the product’s input → the prompt types and the clip ends at the submit; or the whole demo loop runs and a second command starts before the cut.
• cursor-ui-demo — an ambient multi-cursor workshop: labeled teammate cursors work a design canvas live (grab-drag-drop, recolor on drop) while a headline builds over the demo — the live workshop itself is the hook.
• dataviz-countup — a cold-open counter burst: icons puncture in clustered at center, one dramatic statistic explodes upward in size as the icons fling outward to their marks, closed by a slow lean-in.
• zoom-out-workspace-reveal — a full-bleed graphic mystery (blob / blossom / macro) resolved by one unbroken decelerating pull-back through nesting levels into the design-tool workspace that made it; canvas keeps animating after the lock.

Problem

• kinetic-type-beats — 3–5 short pain statements each landing alone on a bare canvas, or a question/hook phrase relay scale-popping through center (optionally resolving on a product surface as an element move).
• spatial-pan-stations — pan a connected web of pain “stations” ending in a tangled knot.
• dataviz-countup — a count-up ring / chart / stat grid pushed-through to dramatize a worsening or large problem.
• overwhelm-surround — recognizable tools that morph into the viewer, then task bubbles close in from all sides (“you’re buried”).

Product_Intro

• kinetic-type-beats — “Introducing…” hard-cut name-drop resolving on the brand name/logo; also a fixed headline with one swapping word-slot, a word-by-word run with per-hero-word effect payoffs, or an anchored wordmark that transforms out.
• logo-assemble-lockup — a wordless premium brand sting (elements pulse/orbit and assemble around the mark).
• cursor-ui-demo — first look at the product surface; a cursor sweeps in to introduce the app.
• dataviz-countup — hard-cut into a data-viz card grid, camera scrolls to a glowing hero metric + a kinetic tagline.
• video-text-pivot — a product video that slides aside to hand its weight to a hero stat, then yields the center to kinetic impact text.
• spatial-pan-stations — a two-shot strip bridged by ONE lateral pan: a static phrase’s accent word 3D-flap-decodes (the concept lands), then the camera pans with parallax into a live cursor-typing demo.
• prompt-type-submit-generate — the first look at the product is its composer or search bar — a long prompt (or short query) types with attachments / dropdown picks / live autocomplete, steering to the confirming control.
• device-surface-showcase — a cursorless end-to-end flow (setup/auth → action → success) completed inside the held surface, bookended by title cards.
• titlecard-reveal — a three-beat dark title prelude (logo pop → name+version append → tagline card) chained by blur-snap handoffs before any product UI.

Key_Feature

• grid-card-assemble — a labeled feature tile/pill grid that self-assembles (or glass cards revealed by a camera zoom-out; or a live-populating data board — skeleton fills, tethered cards, post-assembly status flips).
• cursor-ui-demo — a specific multi-step workflow demonstrated end-to-end, landing on the action button/result.
• device-surface-showcase — a device/window hero whose screens cycle (static tour · floating-window push-scroll · 3D-hand demo).
• comparison-split — two paired capabilities side-by-side with mirrored book-open tilts (an A/B / “X + Y together”).
• video-text-pivot — a feature clip that slides aside to a frame-filling metric, then a typographic impact line.
• dataviz-countup — dark-scrub-montage: kinetic headline beats cut-stitched with self-drawing charts and a cursor-scrubbed dashboard (chart-scrub-readout).
• prompt-type-submit-generate — the capability as one prompt→response round trip: submit into thinking states, then a streaming answer, action log, diff cards, chart, or instant generated artifact.
• agent-progress-theater — the feature is the agent WORKING (plan / scan / fix / automation): loader + status theater resolving into a checklist that checks off, or a thread that builds to a confirmation payoff.
• panel-edit-live-sync — an inspector/editor panel edit-syncs a bound target live (scrub → it rotates, retype → it resizes, pick → it converts); for features whose value prop is the live coupling itself.
• camera-journey — a cursorless cinematic 3D flight over the product surface — motion blur, depth-of-field, tilt-to-flatten — landing violently on the CTA / hero card (sub-shape B).
• transcript-scroll-artifact-reveal — a long transcript/feed/document traversed vertically as evidence of generated work, then one interaction pivots into the artifact (“it did all this → here’s the deliverable”).

Benefits

• kinetic-type-beats — a rapid-fire staccato montage of 8–12 short value phrases, or a slow 2–4-statement relay each held ~1.5s+.
• grid-card-assemble — a vertical benefit list that accumulates, steps, or streams past a focal slot, optionally clearing to a payoff line.
• titlecard-reveal — a calm two-line value title card (a breather/stillness beat).
• camera-journey — a small action in one panel pays off in another region, and a real camera swoop physically connects cause to effect (sub-shape A).
• zoom-out-workspace-reveal — micro-actions in extreme close-up on one small UI region, then one fast decelerating zoom-out reveals the huge multi-pane agent workspace; the wide holds while the deliverable payoff completes.
• fixed-anchor-cycle — one product surface pinned dead-center while its whole theme re-skins per beat (“the same prompt, in every tool”).
• cursor-ui-demo — the demo|text|demo sandwich: two static-stage demo beats bridged through a full-screen kinetic/title interlude and back.

Social_Proof

• constellation-hub — product mark as the hub, partner logos orbiting it (“works with your stack”).
• grid-card-assemble — a logo wall that builds then pulls back to reveal a vast ecosystem.
• titlecard-reveal — wipe a busy open away to a clean brand lockup + a “loved by N+ teams” stat.
• constellation-hub — scatter-drift end card: ~20 app icons pop in frame-wide around a serif headline and drift outward under a static frame (“connects to thousands of apps”).
• dataviz-countup — one radial-gauge count-up instrument embedded as a single beat inside a kinetic-type relay.

CTA

• kinetic-type-beats — a punchy closing line (or short value stack) snapping beat-by-beat onto the logo/URL, or a 3–5-beat chain where each beat carries its own kinetic gag before the logo forms.
• logo-assemble-lockup — a logo build → camera push-through into the final URL/CTA verb.
• cta-morph-press — a brand mark that condenses into the CTA at one center, then a cursor lands a human-aimed click.
• titlecard-reveal — a monochrome end-card chain (statement → CTA line → wordmark/logo) seamed by instant hard cuts, ending on the logo held to the final frame.
• constellation-hub — orbit-collapse: category icons drift around an empty central CTA, a cursor click implodes the orbit toward the click point, and the product demo springs OUT of the collapse.
• prompt-type-submit-generate — the install-command end card: headline demotes, a terminal pill springs in, the command types and holds with a blinking cursor.

Brand_Outro

• kinetic-type-beats — a rapid verb barrage resolving on the brand’s one defining word, or a relaxed full-frame beat relay terminating in a long-held URL end card.
• typewriter-reveal — a persistent brand mark with a typed/swapping CTA rail beneath it.
• logo-assemble-lockup — feature/UI elements clear the stage and the lockup draws itself in.
• ticker-takeover — options cycle, then the brand mark crashes in and owns the frame.
• fixed-anchor-cycle — the wordmark pins while praise quotes / tagline highlights cycle beside it (optionally accelerating), resolving into the finished lockup.

Coverage: every role has ≥2 options; every blueprint serves ≥1 role. kinetic-type-beats is the workhorse (6 roles); dataviz-countup now spans 5; device-surface-showcase (once role-narrow) now also serves Product_Intro via the mined stepwise-flow variant. Five shapes — comparison-split, overwhelm-surround, ticker-takeover, video-text-pivot, cta-morph-press — were added from the hyperframes-animation blueprints; seven more — prompt-type-submit-generate, agent-progress-theater, panel-edit-live-sync, camera-journey, transcript-scroll-artifact-reveal, zoom-out-workspace-reveal, fixed-anchor-cycle — were mined from the golden-clip corpus.

Picking guidance

1. Find the frame’s role in the menu above; pick the blueprint whose shape fits this beat (story may already have named a candidate id — confirm or override). If two fit, prefer the one whose motions are closer to your plan.
2. Open blueprints/<id>.md — read its time-coded template, [slots], and named signature move.
3. Choose a posture — Reproduce (slots map cleanly), Adapt (structure fits, content/surface differs; keep the signature move), or Compose (nothing fits → build from the motion vocabulary). The how of writing each — what to keep/change, the per-frame fields — is visual-design.md‘s job; defer to it.
4. If nothing in the menu fits the beat, compose from the motion vocabulary in motion-language.md — still pace the reveals to the VO across the shot. Don’t force a wrong blueprint.

Motion coverage

Every recurring move in the golden vocabulary is backed by this skill’s local rules/ — including five added to round out the corpus: depth-of-field-blur, motion-blur-streak, depth-scatter-assemble, spring-pop-entrance (the canonical entrance pop, distinct from the click/press press-release-spring), and ambient-glow-bloom. Each blueprint’s rule mapping cites the real rule.

Variant provenance (from <shape-name>) names the mined golden shape a variant was reverse-engineered from; the case-level golden map lives with the c2v-bench mining reports (maintainers only — consuming agents need only the shape names).

One genuine out-of-scope special remains: device-surface-showcase‘s 3D-hand gesture-input + WebGL bloom/portal needs R3F/Three.js + WebGL — a heavier capability than the rule library. Use it sparingly, or pick a simpler device-surface-showcase variant.