hyperframes/skills/hyperframes-animation/blueprints/dataviz-countup.md

dataviz-countup — Data-Viz / Count-Up

intent: Make numbers and charts the hero — a count-up ring/number, a trend chart, a tilted stat/card grid — and traverse the data instruments with a camera that pushes THROUGH them (or scrolls across them) to land on one hero metric, so the data itself carries the argument.

roles served

• Problem (from problem-dataviz-pushthrough / #9 Problem_1): quantifies the pain with real-looking instruments — a count-up ring → a trend chart → a stat grid — the camera pushing THROUGH each object into the next to dramatize a worsening / large-scale problem ("X% of people struggle with…").
• Product_Intro (from product-intro-dataviz-scroll-reveal / #19 Product_Intro_06): a confident "look at the result / the data" open — hard-cut from a hook word into a perspective-tilted grid of data-viz cards, then a hands-off camera scroll lands one glowing hero metric while a kinetic tagline assembles word-by-word.
• Hook (from hook-counter-burst): a cold-open hook on ONE dramatic statistic — the frame opens dark and empty, 3–5 thematic icons puncture in clustered at center, then the headline number EXPLODES upward in size as the icons fling outward to their marks (the count-up and the spread are one beat), closed by a slow camera lean-in. Kinetic from frame 1.

duration: ~4–12s (Hook ~4s · Product_Intro ~6s · Problem ~11–12s)

shot structure Data-viz field on [bg color] (dark or light, soft corner glows); [gradient A→B] brand stroke on charts/rings; clean sans-serif white/dark text; a continuous camera move runs underneath that traverses 2–3 data instruments and resolves on a hero metric. One instrument per beat; the camera carries the cut.

• Scene 1 (0.0–Xs): the first data instrument establishes centered — a [stat] reads as the hero. A bold center number COUNTS UP [start]→[end] while its transform scale grows to the static final type size, with [stat label] below; its paired graphic (a circular progress RING sweeping to [pct] with a [gradient] stroke, or a bar/fill) animates in on the SAME ease so number + graphic land as one beat. Supporting [avatar/object] elements pop in with spring overshoot into a scattered glowing orbit; a [headline] fades up. A very slow continuous camera zoom-in runs throughout.

• Scene 2 (Xs–Ys): the camera traverses to the next instrument and that instrument animates — a [gradient] trend line / area chart DRAWS left→right on grid lines (Problem), or off-center cards SCROLL away as the layout glides (Product_Intro). The arriving [stat-2] number counts up / the chart resolves.

• Scene 3 / Scene N (…–end): the camera lands the [hero metric card] (big number + label + delta + rising chart) in dead-center; a soft [accent] glow blooms behind it; the move reaches its peak then eases to a settled, slightly wider composition with the hero centered and supporting cards flanking it. HOLD on the final frame.

• Variant — Problem (push-THROUGH, count-up → trend → grid): Scene 1 is a centered circular progress ring + count-up center number with scattered glowing [avatar/object] orbit. Scene 2 is a fast camera PUSH-IN straight through the center of the ring (ring, number, orbiting elements scale up and fly out of frame) into a rounded [card] holding [stat-2 header] over a [gradient] line chart with grid lines + translucent area fill that draws left→right; camera pushes through then settles. Scene 3: camera PANS to a second [card] whose number counts up, holding a grid of the [avatar/object] elements — a subset dim/blur while the rest receive [accent] circular checkmark badges that SPRING-POP; camera settles to the end. The traversal is z-depth push-through between instruments.

• Variant — Product_Intro (scroll-to-hero + word-by-word tagline): a brief opener — Scene 0 (~0.0–0.85s): a full-frame [hero-color orb] with a bold white [hook phrase] over it; static shimmer, then HARD CUT. Scene 1 cuts to a slightly perspective-TILTED grid of [data-viz / product cards] (charts, heatmaps, stat cards with deltas + source footers) with [tagline word 1] centered; the grid begins SCROLLING (e.g. toward upper-left) with its tilt held. Scene 2: the grid keeps scrolling so the [hero metric card] glides into dead-center as off-center cards slide away; [tagline word 1] translates out and [word 2] rises in from a frame edge. Scene 3: hero card settles centered, [accent] glow blooms behind it, camera PUSHES IN slightly; [word 2] holds near it. Scene 4: [word 2] slides out, the final [tagline word] drops in from the opposite edge above the still-glowing hero, push-in peaks. Scene 5: overlay type clears, camera eases BACK OUT to a settled wider tilted composition — hero centered with glow, supporting cards flanking. The traversal is a hands-off camera SCROLL across a tilted card plane (no cursor, no clicks) + a one-word-at-a-time kinetic headline + push-in-then-out bookend.

motion vocabulary count-up number with transform-scale growth on the value; circular progress-ring sweep; growth bar / progress fill; gradient trend-line + area-fill left→right draw; spring-overshoot pop-in of scattered glowing avatar/object elements; perspective-tilted card grid; directional grid scroll (cards glide in/out of center); hero-card centering; soft accent glow bloom behind the hero; slow continuous zoom-in; fast camera push-IN / push-THROUGH the center of an instrument; lateral/vertical camera pan between cards; gentle push-in that peaks then eases back out to a wider settle; selective dim/blur of a subset + spring-pop checkmark badges; full-frame hook orb → hard cut; kinetic tagline assembled word-by-word (each word drops/rises from a frame edge, prior word slides out).

rule mapping (motion verb → rules/<id>.md)

• count-up number whose transform scale grows with the value → counting-dynamic-scale (primary text rule)
• circular progress-ring sweep (the ring fill) → stat-bars-and-fills (ring form) — its draw mechanics delegate to → svg-path-draw
• growth bars / progress fill paired beside a number → stat-bars-and-fills (primary data rule)
• gradient trend-line / area-chart left→right draw → svg-path-draw (a path/line draws itself)
• spring-overshoot pop-in of the avatar/object elements → spring-pop-entrance (elastic overshoot); the scattered-ring layout of glowing avatars/objects → avatar-cloud-network; if they keep drifting/orbiting → orbit-3d-entry
• spring-pop [accent] checkmark badges → spring-pop-entrance
• perspective-tilted card grid (tilt held static while content moves) → 3d-page-scroll
• directional scroll across the tilted card plane (cards glide in/out of center) → 3d-page-scroll (scroll) + viewport-change (lateral/vertical pan form)
• hero metric card centering (scroll/pan lands the target dead-center) → coordinate-target-zoom (target lands at viewport center) / viewport-change
• hard-cut from the hook orb into the grid → scale-swap-transition
• kinetic tagline assembled word-by-word → kinetic-beat-slam (one onset grid, distinct per-word entrances)
• slow continuous zoom-in + push-THROUGH the instruments + lateral/vertical pan between cards + push-in-then-out bookend → multi-phase-camera (see camera modifier)
• soft accent glow BLOOM behind the hero card → ambient-glow-bloom (un-triggered soft glow/bloom behind the static hero element — distinct from press-release-spring's press-triggered glow and asr-keyword-glow's word-timed envelope)
• selective dim/blur of a SUBSET of grid items (focus-falloff on the non-highlighted cards) → depth-of-field-blur (selective per-element blur/dim to spotlight the highlighted cards — the same focus-falloff rule used in constellation-hub)

camera modifier: The camera is the through-line that traverses the data instruments — one camera wrapper sequenced by multi-phase-camera, with each stop targeted via coordinate-target-zoom onto the focal instrument/card.

• Problem — push-THROUGH: a slow continuous zoom-in (drift overlay) plus a fast PUSH-IN straight through the center of one instrument into the next (multi-phase-camera, Steady-push pattern), then a lateral/vertical PAN to the final card. Z-depth push-through is the signature (distinguishes it from a flat pan-tour).
• Product_Intro — scroll-to-hero + bookend push: a hands-off directional SCROLL across the tilted card plane (3d-page-scroll scroll / viewport-change pan) that lands the hero card center, then a gentle push-in that PEAKS and eases BACK OUT to a wider settle (multi-phase-camera, Bookend-pull pattern). No cursor, no clicks — the camera does the navigating.