hyperframes/skills/hyperframes-animation/blueprints-index.md

Blueprints (the proven shapes)

Entry point to the blueprint layer. Read this to find the shape for a frame; read blueprints/<id>.md to instantiate it. The Step-4 method (Reproduce / Adapt / Compose, what to write per frame) lives in visual-design.md — this file is the menu + the picker.

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 50 golden product-launch clips (plus 13 hyperframes-animation 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 15 blueprints

Flat, centered, bold-type shot where the **motion IS the words changing** — a fixed line swaps tokens in place by hard cut, or a statement builds across full-screen beats (each its own move) onto a spring-pop payoff. The workhorse (6 roles). Reach for it whenever the words carry the shot and there's no set, surface, or click. A live text caret **types (and edits) a line as a human would**, then collapses it and pops a brand payoff, or holds it under a persistent mark while a sub-line types into the final CTA. Reach for it when "someone is typing this" should be the engine — a relatable typed pain → brand, or a standing logo + a typed CTA rail. Pre-placed labeled **stations on one oversized canvas, traversed by a single virtual camera** — repeated lateral/diagonal pans centering each station and revealing a callout, landing held on the last. Reach for it for a milestone timeline panned to "us," or a connected web of pain stations ending in a tangled knot. Iconned **nodes spring into a ring around a center**, then resolve on the core — a camera push-IN (depth-of-field collapsing onto it) or a held hub mark with satellites orbiting it. Reach for it for "it connects everything / one hub" or "sits at the center of your stack." N items (tiles / cards / logos / list-lines) **self-assemble in a staggered cascade** into a grid or vertical list and hold; an optional camera zoom-OUT reveals the array inside a vaster whole. Reach for it to enumerate breadth at once — a feature grid, an accumulating benefit list, or a logo wall. A brand mark / wordmark **builds itself from parts** (elements assemble/orbit, letters cascade, an outline draws on, or a camera pushes through negative space) and resolves into a centered lockup, optionally extended to a URL/CTA. Reach for it for a wordless premium brand sting, or a logo build leading into the final ask. A visible custom **cursor drives a reconstructed app UI** through clicks/hovers/drags so the screen changes state shot-to-shot, while the camera chases each interaction. Reach for it for a first cursor-led look at the surface (Product_Intro) or one workflow demonstrated end-to-end onto the action button (Key_Feature). A **device mockup or floating window held as hero** while its screens cycle through a real flow, presented by a camera ranging from a static hold to a continuous 3D push. Role-narrow (Key_Feature only) but mechanic-rich (static tour · floating-window push-scroll · 3D-hand demo). Reach for it to show a feature experienced *inside its real interface*. Numbers and charts are the hero — a **count-up ring/number, trend chart, tilted stat grid** — traversed by a camera that pushes THROUGH (or scrolls across) them to land on one hero metric. Reach for it when the data carries the argument: quantify a worsening problem, or open confidently on "look at the result." The calm **breather/landing beat** — one clean title or single brand/proof card revealed with exactly ONE restrained move (slide-up crossfade, or wipe-away-to-reveal), then a still hold. Low motion is the payload, not a deficiency. Reach for it for a two-line value title, or a busy open wiped to a clean lockup + a "loved by N+ teams" stat. Two paired items of equal weight enter from opposite wings with **mirrored 3D "book-open" tilts** and hold side-by-side, then an inner-edge pill badge spring-pops on each to punctuate. Reach for it for an A/B or "X + Y together" — two complementary capabilities weighed at once (not >2 items, not sequential steps). Overwhelm by accumulation — recognizable surfaces assemble, density-marker icons scatter in, the center one **morphs into the viewer's own avatar**, then elements close in from all sides (surrounded, not zoomed-into). Reach for it when the pain is "you're buried in tools," ending on a claustrophobic crowd. A typed lead-in + an accent word cycling through options, then a hero **crashes in from off-screen and physically shoves the text aside** — a collision, not a fade — settling alone. Reach for it when a "could be many things" build should be violently replaced by "this is it." A product video holds center and breathes, then **slides aside to hand its weight to a hero stat**, then both clear and kinetic text types into the vacated center, sealed by a gradient pill. Reach for it for "see the feature → see the impact" where the video must stay visible (slides, never cuts). A resting brand mark **condenses at the same center into a brighter CTA**, then a cursor arrives and lands a human-aimed click with feedback. Reach for it for a focused "click here" sign-off that walks the eye from identity to action — no spatial set, no multi-step UI.

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 2–4 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, OR an escalating multi-beat statement landing a spring-pop payoff.
• 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").
• ticker-takeover — a cycling accent word ("could be X, or Y…") violently replaced by a hero crashing in from off-screen.

Problem

• kinetic-type-beats — 3–5 short pain statements, each landing alone on a bare canvas, no product yet.
• 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.
• 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.

Key_Feature

• grid-card-assemble — a labeled feature tile/pill grid that self-assembles (or glass cards revealed by a camera zoom-out).
• 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.

Benefits

• kinetic-type-beats — a rapid-fire staccato montage of 8–12 short value phrases.
• grid-card-assemble — a vertical benefit list that accumulates or steps.
• titlecard-reveal — a calm two-line value title card (a breather/stillness beat).

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.

CTA

• kinetic-type-beats — a punchy closing line (or short value stack) snapping beat-by-beat onto the logo/URL.
• 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.

Brand_Outro

• kinetic-type-beats — a rapid verb barrage resolving on the brand's one defining word.
• 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.

Coverage: every role has ≥2 options; every blueprint serves ≥1 role. kinetic-type-beats is the workhorse (6 roles); device-surface-showcase is role-narrow (Key_Feature only) but mechanic-rich. Five shapes — comparison-split, overwhelm-surround, ticker-takeover, video-text-pivot, cta-morph-press — were added from the hyperframes-animation blueprints.

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.

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.