Skill 18 · Hyperframes Animation
Subchapter 18.21
blueprints/agent-progress-theater.mdMarkdown16 KBView on GitHub
intent: Agent work performed as WORKING-STATE theater — a short trigger beat hands the frame to the machine, which then visibly works: loaders spin, status phrases swap, dots pulse, counters tick — before the receipt arrives as a card whose rows cascade in and CHANGE STATE (badges flip to checks, labels strike through, severity pills read out), or as a conversation thread building message-by-message onto a camera push-in payoff. The subject is the machine performing labor over time. It is NOT a typed prompt awaiting output (no prompt/input is ever typed — the trigger is a click, a menu choice, or an already-running scan); NOT (at most ONE igniting click here, then the cursor exits and the UI performs itself); NOT (rows there assemble into a static enumeration and hold — rows here are alive: they arrive as agent output and then MUTATE, checking off one by one while the viewer watches).
cursor-ui-demogrid-card-assembleroles served
agent-progress-theater): when the feature is the agent doing multi-step work (build a plan / scan a repo / fix a vulnerability / handle infra for you) and the proof is status theater — a loader lockup with a typed label, status couplets swapping under an [accent] spinner, then a checklist/findings card that populates and checks off in front of the viewer.message-thread-payoff): when the agent’s work lives inside a conversation or automation thread — user/agent bubbles and tool-call/reply cards popping in sequence, the working state carried by pulsing loading dots or rapidly ticking diff counters, resolved by ONE camera push-in tight on the confirmation line ([reaction pill], “Sent using [@Bot]“, a thank-you bubble).duration: 4.2–11.6s (short members are a single card-and-check-off or thread beat at ~4–5s; long members chain trigger → interstitial → status swaps → receipt card at ~9–12s; thread payoff spans 4.2–9.1s)
shot structure (a warm flat canvas — [off-white / warm beige / near-white bg], optional [faint grid / dot-grid / wavy-line] texture; white rounded cards with soft drop shadows; ONE [working accent] color reserved for the machine (spinner, status words, active step) and one [done color] for completion (checks, “Completed”); camera static or ONE slow move — motion is overwhelmingly element-level springs, staggers, and state flips. Two folded sub-shapes — (A) checklist/findings theater and (B) message-thread payoff.)
Scene 1 (0.0–~1.5s) — the trigger. Something asks the machine to work, in ONE beat:
[the question]; it SPRINGS open downward into a rounded menu — [3–4 option rows] fade/slide in staggered, each with a number badge. A cursor enters, hover-dances between rows (a pale [hover fill] highlight follows it), and CLICKS the chosen row (~press-down spring); the whole menu scales down toward its center and fades out. This is the only cursor appearance in the shot.[Dismiss] / [action button]; a hand cursor clicks the action (quick press-down spring); the modal fades away. Optionally followed by a serif [interstitial line] on the bare canvas — words land staggered, hold, fade out word-staggered as the bg swaps.[Scan in progress]-style state — a thin [accent] arc spinner rotating over a heading + body copy + a [Starting…] pill (cursor resting on it, motionless); only the spinner moves. The whole scene then rapidly scales up and fades — a push-through exit.[workspace: builder / editor / terminal] — panels scale past the viewport edges and clear away to the bare canvas.[user bubble] spring-pops in (“[the ask]“), OR a stats card pops in whose green/red [diff counters] rapidly tick and settle — the automation’s opening receipt.Scene 2 (~1–4s) — the working state (the machine performs). The frame belongs to the machine; nothing is clickable. Pick 1–3 working motifs and CHAIN them:
[accent asterisk / arc] beside a [working label] typed on rapidly (“Buildi → Building plan…“), a left→right shimmer sweep passing through the letters; the spinner may momentarily morph asterisk↔dot and back.[action line] over an [accent status word] (“Thinking…”, “Noodling…”) with its spinner — swapping via quick fades/slides at a steady cadence.[scan/tool label] types/expands rightward to its full string, then SHRINKS and DOCKS to the top-left as a fixed corner header (the canvas now belongs to what it produces).[Tool]“ → “Used [Tool]“), with a gently pulsing “Thinking” and gray meta-lines (“Exploring [N] files…”) fading in below.[agent reply] fades/slides up, then a monospace [tool_call] line appears beneath it — small icon + [tool name] + three pulsing loading dots; OR an instruction bubble scrolls into view (internal window scroll, frame static) followed by a [brand logo] pop-in beside a “Sending message…” row. The pulse dies the instant the result lands — dots vanish as the payload arrives.Scene 3 (~2–4s) — the receipt cascades in (the payoff engine). The work materializes as a card that BUILDS:
[Progress / summary] pill or card SPRING-pops in with a bounce, then springs open downward (or the summary card glides UP as a taller [findings] panel expands beneath it). Rows cascade in one by one — slide-up + fade, staggered — each with [number badge / severity pill] + [label] + optional gray [meta line]. Then the STATE MUTATION runs: badges flip one by one from numbered outline to a solid [done color] circle + white checkmark (slight scale bounce), the checked label simultaneously strikes through and dims; pending items keep partially-drawn arc outlines animating. End the run mid-list — some items checked, some still numbered — the work is visibly ongoing.[tool_call] line as a white payload card expands downward from it — 2–4 light monospace [key: value] lines fading in. Then the [resolution message] expands into place below (inline [code chips] and [link] coloring), OR a dark [thread card] scales up from a status row to DOMINATE the frame while the background darkens, its [reply] expanding into place under a “1 reply” divider.Scene 4 (final ~1–2.5s) — resolve. Two endings:
[a second heading + numbered list], ending mid-list. A slow continuous zoom into the card may run underneath (the header drifts off the top of frame).Sent using [@Bot]“ / the confirmation + [thank-you bubble] spring-in — then a [reaction button] springs into an active pill with bouncy overshoot and a count. The push eases into a gentle near-imperceptible drift and the clip ends on the close-up. No end card.motion vocabulary: pill springs open downward into a menu/checklist · option rows fade/slide in staggered · cursor hover-dance (pale highlight fill follows the cursor between rows) · single igniting click with press-down spring · menu scale-down fade exit · modal fade-away · thin [accent] arc spinner rotation · spinning asterisk loader · asterisk↔dot morph · typed-on loader label with caret · left→right text shimmer sweep · serif interstitial with word-staggered fade in/out · status couplets swapping via quick fades/slides under an [accent] spinner · pulsing “Thinking” label · status heading tense flip (Using→Used) · label types/expands rightward then shrinks and docks as a corner header · scene scale-up/fade push-through exit · rapid camera push-in through a multi-panel workspace · slow continuous zoom into a card (header drifts off frame) · summary card spring pop with bounce · card glides up as a panel expands beneath it · anchored downward panel/payload expansion · rows stagger in (slide-up + fade) · badge flip from numbered outline to solid circle + white checkmark with scale bounce · strikethrough + dim on completion · partially-drawn arc outlines animating on pending items · severity-pill readouts (Critical / High) · viewport scroll down the final card · chat bubble spring scale-up pop-in · reply fade/slide-up · monospace tool-call line with three pulsing loading dots (dots die the instant the result lands) · payload card expands downward from the line · green/red diff counters rapid tick-and-settle · internal window scroll (frame static) · brand logo pop-in beside a status row · card scales up from a row to dominate the frame while the background darkens · reply message expands into place · inline code chips / link coloring · reaction button springs into an active pill with bouncy overshoot + count · camera push-in + pan-down centering the payoff · slight pull-back · gentle end drift · static hold.
rule mapping
anchored-layout-expand (edge-anchored container growth: height-masked wrapper + inner counter-translate, container drawn at final size); spring flavor from spring-pop-entrancespring-pop-entrance (staggered-group form, ≤500ms cap) or gsap-effects (plain fade+translate stagger) — NOT waterfall-entry (its binary no-fade arrival law contradicts this dialect’s soft fade/slide cascade)cursor-click-ripple (move + press) + press-release-spring (the button’s press-down spring)gsap-effects (a background fill translated row-to-row; no dedicated rule needed)scale-swap-transitionsvg-icon-enrichment (rotating internal SVG parts via setAttribute('transform','rotate(deg cx cy)'); timeline-driven, finite)scale-swap-transition (two elements morphing at the same center)discrete-text-sequence (+ context-sensitive-cursor for the caret)ambient-glow-bloom (single-pass traveling sheen) or css-marker-patterns (highlight sweep) — pick sheen for light-on-text, marker for a drawn banddynamic-content-sequencing (phrase windows) + discrete-text-sequence (the whole-state swaps); per-word stagger via gsap-effectssine-wave-loop (finite repeats; kill the tween at the resolve beat — see doctrine note)discrete-text-sequencegsap-effects (plain scale + translate tween; no dedicated rule needed)viewport-change (the push) + multi-phase-camera (phasing) + optional motion-blur-streak (velocity blur as panels clear the frame)multi-phase-camera (steady-push phase) or viewport-changespring-pop-entrancegsap-effects (the glide) + anchored-layout-expand (the panel)scale-swap-transition (outline↔solid swap at same center) + svg-path-draw (checkmark draw-in) + spring-pop-entrance (the bounce); the pending→active→complete progression itself → dynamic-content-sequencing (a snap state machine, per cursor-ui-demo’s workflow-approve-press precedent)css-marker-patterns (strike-through draw) + gsap-effects (opacity dim)svg-path-draw (partial dashoffset, held mid-draw)gsap-effects (transform-only content translate inside a masked window) — use viewport-change only if the FRAME movescounting-dynamic-scale (numeric proxy count-up; suppress the scale-growth component — these tick at fixed size)card-morph-anchor (row → full-frame morph + handoff) with the background darkening as a gsap-effects overlay fadespring-pop-entrance (soft overshoot) or anchored-layout-expand for a true downward growthspring-pop-entrance (the pop) + press-release-spring (activation flavor) + counting-dynamic-scale (the count, if it ticks)coordinate-target-zoom (non-centered target: scale + counter-translate) or viewport-changemulti-phase-camera (pull-back phase + continuous micro-drift; keep the drift near-imperceptible)camera modifier (default is a STATIC frame — the theater is element-level; at most ONE real move per shot, chosen from):
viewport-change + multi-phase-camera, optional motion-blur-streak.multi-phase-camera (steady push).coordinate-target-zoom / viewport-change + multi-phase-camera (drift).doctrine note (idle-motion ban): the working-state motifs (spinner rotation, pulsing dots, pulsing “Thinking”) brush against motion-doctrine’s idle-motion ban — here they are DIEGETIC: the pulse performs “the machine is working” and is the narrative content of Scene 2, not decorative breathing. Keep every loop finite, timeline-driven, and seek-safe (sine-wave-loop finite repeats, svg-icon-enrichment rotation), and kill it at the exact frame the state resolves — the corpus does this explicitly (the loading dots vanish the instant the payload card expands; the spinner swaps out with the loader lockup).