heygen-com--hyperframes/skills/hyperframes-animation/blueprints/grid-card-assemble.md

grid-card-assemble — Grid / Card Assemble

intent: N items (tiles / cards / logos / list-lines) self-assemble in a staggered cascade into a grid or vertical list and hold — a "look how much / who / what it does" beat that enumerates breadth at once; an optional camera zoom-OUT pulls back to reveal the assembled array sitting inside a vaster whole.

roles served

• Key_Feature (from key-feature-card-grid-assemble): a grid of labeled feature tiles/pills (icon + label) cascades one-by-one into a 2-col-brick / 3×3 grid, then holds near-static with a slow push-in — enumerate many capabilities, no live UI, no cursor.
• Key_Feature (from key-feature-glass-card-camera-reveal): open TIGHT on 2–3 glowing icons; a camera zoom-OUT unfolds a row of glassmorphism cards that grow from behind the icons (icons shrink to card headers), center card scales forward, the group floats, then sweeps out — a "pillars revealed at once" reveal variant of the same assemble shape.
• Benefits (from benefits-vertical-list): short value phrases populate a single vertical list ~1 item/sec, co-resident and accumulating; each line enters via a spring marker-pop + check-draw + pill mask-wipe, OR the whole stack snaps up one slot per beat (slot-machine) so the newest lands in the bright focal slot.
• Social_Proof (from social-proof-logo-grid-zoom-out): a wall of partner/app logos builds into a center grid (whole-enter / randomized pop-in / column slide-up), an optional headline + accent-gradient proof-number fills in above, then a continuous camera zoom-OUT shrinks the array to reveal a vast ecosystem; optional fixed HUD/viewfinder brackets; optional grid slide-up fly-out exit.

duration: 3.0–10.5s (Social_Proof 3.0–6s · Key_Feature grid 5.8–7.3s · Key_Feature glass-card 6.5s · Benefits list 6.5–10.5s, scaling ~1 item/sec with count)

shot structure (consolidated template — concrete motion verbs, [slots])

• Scene 1 (0.0–~1.0s) — open + first arrivals. On a [gradient / radial / dark background] (optional [dot-grid / drifting-watermark] texture), an empty [grid or list region] is established and items begin to ASSEMBLE in a quick staggered cascade (~0.04–0.08s gap; list pacing ~1 item/sec). Each [item: feature tile / pill / logo tile / benefit line] fades + slides/scales a short distance directly into its slot (low drama — no scatter, no big bounce; spring overshoot reserved for accent markers). Camera static. An opening [headline / hook] may fill in line-by-line above the array, with any [proof number] counting up in an [accent gradient].
• Scene 2 (~1.0s–~Xs) — array resolves + holds. Remaining items finish arriving; layout resolves into the final [2-col-brick / 3×3 grid / dense mosaic / stacked list]. The completed array HOLDS, alive but resting: a gentle continuous parallax/sine FLOAT on the tiles and/or a slow camera push-in (faint scale-up). Optional [accent-color] glow TRAVELS across/behind the tiles.
• Scene 3 (~Xs–end) — settle / reveal / exit. Everything settles and holds to the end, OR the optional camera modifier runs (see below), OR a [closing line / CTA] book-ends the array.

Variants (where roles diverge from the template):

• Variant — Key_Feature grid: items are labeled [icon + feature-label] tiles/pills assembling into a 2-col-brick / 3×3 grid; near-static hold with slow push-in + optional traveling-glow sweep; headline book-ends ([hook] → [CTA]). No camera reveal.
• Variant — Key_Feature glass-card-reveal: the assemble is CAMERA-DRIVEN, not element-stagger. Open tight on [2–3 glowing icons]; camera zoom-OUT grows [N] glass cards out from behind the icons (icons shrink ~50% to become card headers), [center card] scales ~105% and moves forward to overlap the sides (quick spring); cards hold side-by-side with continuous parallax float; exit = fast motion-blur SWEEP slides the cards off-frame.
• Variant — Benefits vertical-list: a single vertical [benefit-line] stack, ~1 item/sec, two sub-modes — (a) BUILD: each line stays fully lit; entry = [marker] spring-pop + [check/icon] draw-in + [pill] mask-wipe of the text; (b) SNAP: the whole stack steps up one slot per beat (~0.1s eased) so the newest line lands in the bright focal slot and lines leaving it dim by position. Static camera; optional perpetual [decorative orbit/disc] on the opposite side. No camera reveal.
• Variant — Social_Proof logo-wall-zoom-out: intro beat ([trusted-by headline] card OR a [product screenshot]) crossfades/cuts to a center logo grid that builds (whole-enter / randomized pop-in / column slide-up); a continuous camera zoom-OUT then shrinks the whole grid toward center to reveal a vast ecosystem and holds; optional fixed HUD/viewfinder brackets; optional exit = whole grid SLIDES UP and flies out through the top.

motion vocabulary: item stagger-assemble (fade + short slide/scale into slot) · brick/grid/list layout resolve · randomized pop-in · column slide-up · vertical-list step (slot-machine snap-and-hold) · spring-overshoot marker pop · check/icon draw-in · pill/label mask-wipe reveal · dim-by-position de-emphasis · line-by-line headline fill · accent-gradient number count-up · near-static hold · gentle parallax/sine float on hold · slow camera push-in · camera zoom-OUT reveal (continuous OR phased pull-back) · cards-grow-from-behind-icons · icon-shrink-to-header · center-card scale-up + forward overlap (spring) · traveling-glow sweep · fixed HUD/viewfinder brackets · motion-blur slide-out sweep (exit) · grid slide-up fly-out (exit) · book-end headline fade · perpetual decorative orbit/loop.

rule mapping (motion verb → rule-id)

• item stagger-assemble into slot → center-outward-expansion (per-item stagger + short-path slide variant; for a wall too dense for a true center burst, use it in its "starting partially-spread"/direct-into-slot form — see merge tension)
• brick/grid/list layout resolve → center-outward-expansion (target positions = final layout slots)
• randomized pop-in stagger → gsap-effects (stagger recipe; randomized from/order)
• column slide-up into grid → gsap-effects (per-column staggered slide-up)
• vertical-list step / slot-machine snap-and-hold → vertical-spring-ticker (STEPS = number of line advances)
• spring-overshoot marker pop → spring-pop-entrance (back.out spring) — also gsap-effects for the staggered pop chain
• check / icon draw-in inside marker → svg-path-draw
• live line-art icon in a tile (internal parts) → svg-icon-enrichment
• pill / label mask-wipe text reveal → techniques.md (clip-path reveal)
• dim-by-position de-emphasis → gsap-effects (per-line opacity by slot position; no dedicated rule)
• line-by-line headline fill → discrete-text-sequence
• accent-gradient proof number count-up → counting-dynamic-scale
• gentle parallax / sine float on hold → sine-wave-loop (apply the concurrent-elements amplitude /√N rule for a held grid)
• slow camera push-in → multi-phase-camera (steady-push phase pattern)
• center-card scale-up + forward overlap → spring-pop-entrance (the quick spring) + techniques.md CSS-3D (z-depth overlap)
• cards-grow-from-behind-icons / icon-shrink-to-header → driven by the camera reveal (multi-phase-camera) — the grow/shrink are scale tweens chorded to the pull-back phase; no separate rule
• fixed HUD / viewfinder brackets → ai-tracking-box (static-bracket variant — overlay frame, not tracking)
• book-end headline fade → discrete-text-sequence (or gsap-effects fade)
• perpetual decorative orbit / disc / loop → sine-wave-loop (or orbit-3d-entry if it's an orbiting badge ring)
• traveling-glow sweep across/behind tiles → ambient-glow-bloom (one-pass traveling glow sweep across the tiles)
• motion-blur slide-out sweep (glass-card exit) → motion-blur-streak (directional velocity blur on the fast sweep that carries the cards off-frame)
• grid slide-up fly-out exit → gsap-effects (plain staggered translate-off-frame; no dedicated rule needed — a basic exit tween, not a missing capability)

camera modifier — zoom-OUT reveal (optional; the role-defining move for the glass-card and logo-wall variants): a camera wrapper around the whole array scales DOWN over the hold, revealing the assembled grid/cards sitting inside a larger environment (ecosystem scale, or a row of cards unfolding from tight icons).

• Continuous single-pass zoom-out (Social_Proof ecosystem pull-back) → viewport-change (one wrapper, cam.scale ↓ via onUpdate — single source of truth)
• Phased pull-back → focus → settle, with built-in drift (Key_Feature tight-icons → cards-unfold) → multi-phase-camera (use the "Dramatic reveal: push → neutral → pull" / pull-back phase pattern; grow/shrink of cards chords to the pull-back phase)

---

BLUEPRINT: grid-card-assemble — serves Key_Feature, Benefits, Social_Proof (folded 4 drafts)
RULE GAPS: none — traveling-glow sweep → ambient-glow-bloom; motion-blur slide-out sweep (exit) → motion-blur-streak; grid slide-up fly-out (exit) → gsap-effects (plain translate)

Merge tension: center-outward-expansion (the natural backing for stagger-assemble) caps cleanly at 3–8 items and explicitly warns 8+ causes mid-flight overlap chaos — but a Social_Proof logo wall is deliberately dense (12+ tiles), so for that variant the items must NOT burst from a shared center; they slide a short distance directly into their own slot (the rule's "starting partially-spread"/short-path form, or a gsap-effects per-item stagger), which the consolidated Scene-1 verb already specifies as "short distance directly into its slot."