hyperframes/skills/hyperframes-animation/blueprints/zoom-out-workspace-reveal.md

zoom-out-workspace-reveal — Zoom-Out Workspace Reveal

intent: Open TIGHT on one full-bleed detail — a graphic macro or a small UI region — let micro-action play in close-up, then ONE continuous decelerating zoom-out reveals that everything seen so far lives inside a containing whole (a design-tool workspace / a multi-pane agent workspace); the frame locks at the wide and element-level payoff carries on. The zoom-out IS the narrative engine and the reveal-of-nesting is the payoff — distinct from grid-card-assemble, where a zoom-OUT is an optional camera modifier garnishing an element-stagger assemble; here nothing assembles, the world was whole all along, and the single outward move is what re-scopes its meaning. The structural inverse of every existing push-in shape (constellation-hub's push-in, device-surface-showcase's continuous push, dataviz-countup's push-through).

roles served

• Hook (from continuous-zoomout-nesting-reveal): when the open should be a full-bleed graphic mystery — a blob morphing, a macro blossom blooming — resolved by one unbroken exponentially-decelerating zoom-out that passes THROUGH an intermediate composition (oversized headline / card artwork / web page) before revealing the whole thing is an artboard inside a design tool (panels, layers, inspector, timeline); the frame locks and the canvas keeps animating, ending mid-action.
• Benefits (from close-up-open-single-zoom-out-reveal): when the payoff is scale/breadth — micro-actions play in extreme close-up on one small UI region (file rows popping in, a highlight stepping, a guided glide down a list), then ONE fast smoothly-decelerating zoom-out (~0.5–1s) reveals the region was a corner of a huge multi-pane agent workspace (chat + artifact preview + sidebar); the wide holds static to the end while element-level payoff completes the story ("look how much the agent did — and here's the deliverable").

duration: 6.8–11s (Hook continuous-pull both 6.8s; Benefits dwell-then-snap 10.7–11s — the dwell and the post-lock payoff stretch, the reveal itself does not)

HARD RULE — no zoom-in anywhere; camera static outside the single reveal. Carried verbatim from both Benefits goldens and structurally true of both Hook goldens: the camera's only scale motion is OUTWARD. One zoom-out per shot. Before the reveal the camera either holds, glides/pans along the close-up surface, or is already running the (only) pull-back; after the reveal decelerates to a full stop the frame is LOCKED — every later change (pane swap, pane expansion, cursor travel, playhead scrub, canvas animation) is element/layout motion, never camera. No push-in, no punch, no re-zoom, no second reveal. Violating this collapses the shape back into a generic camera tour.

shot structure (one oversized static world — the full [whole: workspace] authored at final layout from frame 0 — with the camera starting scaled far in on the [detail]; the reveal is one scale animation on the world; two folded sub-shapes — (A) continuous nesting pull (Hook) and (B) close-up dwell → snap reveal (Benefits))

• Scene 1 (0.0–~2.5s) — full-bleed detail + micro-action. Extreme close-up: the [detail: graphic macro — blob / blossom stem / small UI region — file list / browser corner] fills the frame edge-to-edge with NO containing chrome, canvas, or neighboring panes visible. The detail PERFORMS in close-up — this beat is never a static hold:

  • Variant — Hook (A): the graphic itself moves/morphs/blooms — an organic [accent] blob flows across and morphs into an undulating wavy line, or blurred macro forms sharpen as circular petals pop and expand outward into a flat vector [motif] — while the pull-back is ALREADY running underneath (the camera never waits).
  • Variant — Benefits (B): camera holds (or glides) while UI micro-action plays — [rows: filenames / list items] pop in top-to-bottom, a soft [highlight] steps down row-by-row, or the camera rides down a list while gently pulling back. Optional blur-to-sharp resolve on the opening frame.

• Scene 2 (~2.5s–reveal start) — the middle beat. Diverges by sub-shape:

  • Variant — Hook (A) — intermediate nesting level: the continuing zoom-out resolves a mid-level composition, still full-bleed, still no chrome — oversized [headline] glyphs descend into frame as partial letterforms and settle centered (the "descent" is pure world-scale: the letters are static in world space, the camera pull produces the motion), or the [motif] is revealed living inside a [card] in a row of cards on a [web page]. The viewer re-scopes once — and still doesn't know the real container.
  • Variant — Benefits (B) — close-up beat advances: the close-up story develops at the same tightness — the view shifts to an adjacent [panel], a new [row] fades/slides in and grows its panel, a [cursor] enters and hovers it with a soft highlight. This is the pre-reveal dwell; tension is "we're deep inside something."

• Scene 3 (the reveal) — ONE decelerating zoom-out completes; frame LOCKS. The signature move. The camera pulls back to scale 1 and eases to a full stop, revealing the containing [whole]:

  • Variant — Hook (A): the pull is the tail of the SAME continuous zoom running since frame 0 (total travel ~4.3–4.5s of a 6.8s shot), with strong exponential deceleration — the [intermediate composition] turns out to be [an artboard / a phone-screen mock] on a [design-tool canvas]: light chrome, left pages/layers panel, right properties inspector, blue selection box, bottom animation timeline with keyframe bars.
  • Variant — Benefits (B): the pull is a discrete rapid burst (~0.5–1s) from the held close-up — smooth, heavily decelerating — landing the full [multi-pane agent workspace]: left [chat pane] with the prompt + status + response, center/right [artifact pane: spreadsheet / deck preview], optional [sidebar: progress checklist + artifacts + context].
  • Both: the zoom-out ends BEFORE the shot does — always leave a post-lock act. The deceleration-to-stop is what makes the lock legible.

• Scene 4 (lock–end) — element-level payoff on the locked wide. The reveal is not the ending; the close-up's world keeps living inside the wide. All motion is element/layout:

  • Variant — Hook (A): a [cursor] enters from off-frame and glides to hover/click the selected element, or a [playhead] scrubs left-to-right across the bottom timeline while the canvas artwork animates in sync (petals rotate about their hub, a starburst spins in place, a motif sweeps/shifts). Ends MID-ACTION — the tool is alive.
  • Variant — Benefits (B): a [file-attachment card] fades in → the cursor clicks [Open] → the artifact pane swaps content via a quick white-out → the viewer pane expands full-width over its neighbor (LAYOUT motion, not camera) landing on the [deliverable: full slide / dashboard]; or the frame simply holds long and static while the cursor drifts to rest near the [payoff stat]. Struck-through checklist items in the sidebar read as completed work. Long hold to the end.

motion vocabulary: one continuous scale-driven zoom-out with exponential/eased deceleration (no cuts) · single fast decelerating zoom-out burst (~0.5–1s) · workspace-lock at zoom end · full-bleed no-chrome opening · blur-to-sharp macro focus resolve · organic blob flow + morph into undulating wavy line · squiggle-underline settle with residual undulation · circular petals popping/expanding outward (bloom) · oversized letters descending into frame as partial glyphs (world-scale, not element motion) · text scaling down through the frame to a centered settle · rows pop in top-to-bottom · selection highlight steps down row-by-row · camera rides/pans down a list while pulling back · new row fades/slides in and grows its panel · cursor hover with soft row highlight · cursor entering from off-frame and gliding to hover/click · timeline playhead scrub left-to-right · in-canvas rotation about a hub / spin-in-place · motif shift/sweep-in · file-attachment card fade-in · cursor click · pane content swap via quick white-out · pane expands full-width over neighbor (layout motion) · checklist items shown struck-through · long static hold · cursor drift to rest · ends mid-action (Hook).

rule mapping (motion verb → rule-id)

• the single decelerating zoom-out on the whole world → viewport-change (one .world wrapper; cam object as single source of truth via onUpdate; start cam.scale at the reveal ratio with T = -offset × S centering the detail, tween scale → 1 and translate → 0 with ONE shared ease — the detail drifts from frame-center to its home slot as the wide takes over, exactly the golden read)
• off-center detail framed at open, zoom-out to wide → coordinate-target-zoom ("Zoom out (target → wide view)" variation — nested wrappers, reverse phases: start zoomed on the measured target, tween outer scale → 1 + inner translate → 0 with shared duration/ease; measure the detail's center after fonts.ready, never hand-derive)
• pre-reveal glide/ride down a list while gently pulling back (Benefits B) → viewport-change (pan + scale composed on the one cam object) — sequencing the slow-glide → hold → fast-pull profile → multi-phase-camera (phase machinery; this shape runs the same scale-agnostic math at 4–12× outward — see viewport-change's scale-guide range note)
• exponential deceleration-to-stop → ease selection (expo.out / power4.out on the reveal tween) — parameter guidance, no rule needed; after the stop, NO camera tweens exist on the timeline (hard rule above)
• blur-to-sharp macro resolve chorded to the early pull → depth-of-field-blur (refocus/settle variation: --dof ramps to 0 as the zoom recedes, same timeline position as the pull)
• oversized partial glyphs descending / text scaling down through the frame → no element tween — authored static in world space; viewport-change's pull produces the motion (author trap: animating the letters separately double-moves them)
• organic blob flow + morph into wavy line → SVG path morph — see hyperframes-keyframes (morph); flagged special, like device-surface-showcase's WebGL specials — substitute a non-morph accent when the capability isn't loaded
• squiggle-underline residual undulation → sine-wave-loop (finite bounded undulation)
• circular petals pop/expand outward (bloom) → spring-pop-entrance (staggered pops) + center-outward-expansion (petals expand from the hub to final positions)
• rows pop in top-to-bottom → spring-pop-entrance (staggered group, ≤500ms stagger cap) or gsap-effects (low-drama fade + short slide stagger)
• selection highlight steps down row-by-row → gsap-effects (stepped tl.set repositions at time thresholds — instant steps, no glide; trivial, no dedicated rule needed)
• new row fades/slides in → spring-pop-entrance (soft variant); its panel growing to fit → anchored-layout-expand (one-axis layout expansion)
• cursor enters off-frame → glides → hovers → clicks → cursor-click-ripple (move-to-target, co-depress, ripple); soft hover row-highlight → gsap-effects (background-color/opacity tween)
• timeline playhead scrub left-to-right → gsap-effects (linear ease:"none" translateX); in-sync canvas animation = place the artwork tweens at the same timeline position as the scrub (sync is free on one paused timeline)
• in-canvas rotation about a hub / spin-in-place (petal flower, starburst) → svg-icon-enrichment (SVG setAttribute('transform','rotate(deg cx cy)') for explicit centers)
• motif shift/sweep-in on a card → gsap-effects (masked translate) or techniques.md clip-path reveal
• file-attachment card fade-in → spring-pop-entrance (soft) / gsap-effects fade
• pane content swap via quick white-out → discrete-text-sequence (whole-state swap at a threshold) + gsap-effects (white flash overlay with attack-decay opacity envelope)
• pane expands full-width over neighbor (layout motion) → anchored-layout-expand (one-axis layout hand-off; width/height tweens stay forbidden)
• checklist items struck-through / status states → static content, or discrete-text-sequence if they check off on screen
• long static hold + cursor drift to rest → hold needs no rule; the drift is a single slow gsap-effects translate that ARRIVES somewhere meaningful (rests near the payoff stat) — it performs, it is not idle wobble
• ends mid-action (Hook) → the playhead/canvas tweens simply run to the composition edge — no exit move, no rule

camera law — staging the one move (the camera is the engine here, not a modifier)

• Build the ENTIRE [whole] workspace at final layout inside one .world wrapper; there is no second set. The open is cam.scale = S0 (typically 4–12× — whatever makes the [detail] full-bleed) with counter-translate centering the detail; the reveal tweens to scale 1, translate 0. overflow: hidden on the scene; background on the scene, never the world.
• Crispness constraint: everything visible at open must survive S0 magnification — author the detail as DOM/vector (text, SVG, CSS shapes); any raster inside the close-up needs sourceResolution ≥ rendered × S0.
• Sub-shape A: the reveal tween spans ~0–4.5s with expo.out-class deceleration — one tween, no phases, no cuts; element beats (morph, bloom, glyph settle) are positioned along it.
• Sub-shape B: optional gentle pre-reveal pan/pull (viewport-change pan, or a slow scale ease-out ≤ ~15% travel) during the dwell, then the reveal burst (~0.5–1s, heavy decel) as its own tween; camera fully static after.
• Never: a zoom-in, a second zoom-out, camera motion after the lock, or replacing the reveal with a cut. One outward move is the whole grammar.

boundary vs grid-card-assemble: it already carries an optional zoom-OUT reveal modifier (glass-card / logo-wall variants), so the two shapes border each other. The test: if elements ASSEMBLE and the pull-back merely shows the assembled array in context, it's grid-card-assemble; if the world is whole from frame 0 and the single decelerating pull-back is itself the story — close-up mystery → nesting reveal → locked-frame payoff — it's this blueprint. Related evidence: a mined profile-page golden runs the same single UI zoom-out/scroll-up reveal at small scale inside a kinetic-type shot, corroborating the move's currency without sharing the shape.