hyperframes/skills/hyperframes-animation/blueprints/cursor-ui-demo.md

cursor-ui-demo — Cursor-Driven UI Demo

intent: A visible custom cursor drives a real (reconstructed) app UI through clicks / hovers / drags so the screen changes state shot-to-shot, while the camera chases each interaction — the product surface is the subject and the cursor is the actor.

roles served

• ProductIntro (from product-intro-cursor-ui-demo / #14 Product_Intro_02, #15 Product_Intro_2, #17 Product_Intro_04): first look at the product surface — the cursor sweeps/hovers to _introduce the app and reveal what it is, landing on a hovered hero element or freshly-popped result. Light, exploratory; backdrop steps colors as it goes.
• KeyFeature (from key-feature-cursor-ui-demo / #23 Key_Feature_2, #24 Key_Feature_03, #27 Key_Feature_06): one specific multi-step workflow demonstrated _end-to-end (edit / configure / select across 2–4 discrete beats), each beat a real edit the UI responds to live, landing locked on the primary action button or the produced result.
• Key_Feature (from workflow-approve-press): an agency / confirmation workflow framed by a cockpit of 3D-tilted flanks — a step list ticks pending → active → complete (a snap state machine, CSS responding to [data-state]), and a flank button takes the PRESS as the payoff (its color flips to success, a checkmark stamps). The click is the climax, not a passing gesture.

duration: 4.0–9.3s (union of Key_Feature 4.0–7.3s and Product_Intro 6.1–9.3s)

shot structure (a [product UI surface] — fixed app window, dashboard/editor, parallax [content card] stack, or a [container object/icon] — centered over [bg color/gradient], shown [flat] or [3D-isometric]; a custom [brand-colored cursor with icon] is the protagonist and the camera servos to whatever it touches; UI responds live and in sync with each cursor action. Two role-tuned tempos fold in — Product_Intro sweeps to introduce, Key_Feature performs a workflow.)

• Scene 1 (0.0–~Xs) — surface establishes + first touch. The [product UI surface] arrives centered over [bg color/gradient] — either it is simply present (fixed window / dashboard / editor), a 3D-parallax stack of [content cards], or a [container object/icon] that FLIES IN with a 3D tumble and settles. The custom [cursor] enters. The cursor performs the FIRST action on [cursor target 1] and the UI responds live in the same beat. Camera holds or begins a slow push-in toward the acted-on region.

  • Variant — Product_Intro: low-commitment first touch — cursor HOVERS/sweeps a control or SWEEP-HIGHLIGHTS a field to [accent color], OR the [container] fans open. An optional label/title fades/morphs onto the surface. The point is to show the surface exists and is touchable.
  • Variant — Key_Feature: a concrete edit — cursor DRAGS a scrollbar / TYPES into a field / DRAGS a handle, and the UI responds materially ([scroll] / value climbs / region resizes). If the surface opened in [3D-isometric], it may snap perspective-FLAT here to read the workflow.

• Scene 2 (~Xs–~Ys) — camera chases to the next interaction (the engine). The camera MOVES to the next target — push-in + pan / whip-pan / pan-down to [cursor target k] — and the cursor performs action k as the UI updates live. Each beat is a discrete interaction connected by a fast camera move; the surface's inner content SWAPS per interaction.

  • Variant — Product_Intro: navigation is exploratory — a slow camera pan + depth-of-field FOCUS-PULL across a parallax [content card] stack, or the [container] fanning into [N option/content cards] that SPRING to position. As content swaps, the supporting backdrop STEPS its color ([bg step 1] → step 2 → …). Typically one or two such moves.
  • Variant — Key_Feature: repeat for [2–4 beats total], each a distinct operation the UI answers — counter COUNTS UP, [pill/swatch] SELECTS, a modal SLIDES UP and TYPES — connected by whip-pans / progressive zoom. The workflow visibly advances toward a result.

• Scene 3 (~Ys–end) — payoff state, camera settles, HOLD. The cursor lands on its final target and the screen reaches the payoff state; the camera comes to rest (static) and holds.

  • Variant — Product_Intro: the cursor HOVERS the hero element — a [content card] SCALES UP on hover, a node gets an [Available]-style pill, or a [result card] POPS/springs in — the "here's the product" payoff. Settles static, holds.
  • Variant — Key_Feature: locked close-up on the OUTCOME — cursor lands on the [primary action button: Export / Save / Reimburse] and a [hover backdrop / highlight] SPRING-pops in (the climax is the action button / produced result). Holds.

motion vocabulary: cursor-driven click / hover / sweep-highlight / drag / type; per-interaction live UI response (scroll, value climb, region resize, content swap); camera push-in + pan / whip-pan / pan-down servoing to each target; coordinate zoom onto the acted region; press-and-ripple on a clicked control; button press-compress; screen-state swap shot-to-shot; card fan-out to corners (spring); 3D container fly-in & tumble-settle; perspective-flatten (3D→2D snap); paginated/stepped backdrop color advance; depth-of-field focus-pull across a parallax card stack; counter count-up; pill/swatch select; modal slide-up + typing; label/title morph between states; UI-keyword highlight glow; terminal hover-scale or result-card pop-in; spring hover-backdrop on the final action button.

rule mapping

• viewport follows the cursor / camera servos to whatever it touches (primary) → camera-cursor-tracking
• cursor moves to a target, presses, emits a ripple (the click itself — primary interaction primitive) → cursor-click-ripple
• screen-state swap shot-to-shot (surface inner content changes between beats) → scale-swap-transition
• camera push-in + pan / whip-pan / pan-down to the next target → viewport-change (pan/zoom across the UI)
• sequencing the chase into discrete interaction beats → multi-phase-camera
• zoom onto the specific acted-on UI region → coordinate-target-zoom
• cursor icon/state changing with context (e.g. pointer↔grab over a draggable handle) → context-sensitive-cursor
• which content appears per beat / step-by-step UI state progression / per-interaction swaps → dynamic-content-sequencing
• sweep-highlight a field, highlight a UI keyword to [accent color] → asr-keyword-glow (keyword glow on the touched element)
• clicked button compresses on press, springs back on release → press-release-spring
• cursor + button compress together on a heavier press → physics-press-reaction
• panel/card morphs between two states (e.g. card → expanded card, surface state A → B) → card-morph-anchor
• terminal hover-scale, [result card] pop-in, spring hover-backdrop on the final action button → spring-pop-entrance
• card fan-out to corners / option cards springing to position → split-tilt-cards (fan/spread into tilted positions) + spring-pop-entrance (the spring settle)
• 3D-parallax content-card stack as the surface; UI shown 3D-isometric → 3d-page-scroll (UI as a tilted scrolling/parallax card)
• node gets an [Available]-style pill / tracked badge appears on an element → ai-tracking-box
• counter / value count-up as the UI responds → counting-dynamic-scale
• a result bar / number FILLS as the workflow's outcome → stat-bars-and-fills
• a live [video] screen-capture clip used as the surface → technique: video compositing
• perspective-flatten (3D-isometric → flat 2D snap) and the 3D-isometric tilt itself → technique: CSS-3D (no dedicated rule; the tilt/flatten transform is a CSS-3D primitive)
• camera settles static on the payoff and HOLDS → (settle phase of spring-pop-entrance on the payoff element; the static hold itself needs no rule)
• 3D container/object fly-in & tumble-settle → depth-scatter-assemble (free-tumbling 3D object/container entrance that flies in and tumble-settles; orbit-3d-entry only orbits a flat element into place)
• depth-of-field focus-pull across the parallax card stack → depth-of-field-blur (rack-focus / DoF blur transition between near and far cards; 3d-page-scroll supplies the tilted parallax stack and viewport-change the pan)
• paginated/stepped backdrop color advance synced to interactions ([bg step 1]→step 2→…) → discrete-text-sequence (discrete state stepping, here applied to a background-color state rather than text)
• modal slide-up + in-modal typing as one combined beat → card-morph-anchor / scale-swap-transition (the panel slide-in) + discrete-text-sequence (the in-modal typed text)

camera modifier: The defining motion is the camera CHASE — the viewport follows the cursor from target to target via camera-cursor-tracking (primary), realized as concrete push-in + pan / whip-pan / pan-down moves under viewport-change, sequenced into discrete interaction beats by multi-phase-camera, with each beat's destination targeted via coordinate-target-zoom (zoom to the acted-on region). Product_Intro biases toward a slow, exploratory pan + focus-pull that sweeps the surface; Key_Feature biases toward snappier whip-pans / progressive zoom that march through the workflow and lock static on the action button. This camera-servo-to-cursor is what separates the blueprint from hands-off camera scrolls (dataviz-scroll-reveal) and static device/window tours.