heygen-com--hyperframes/skills/hyperframes-animation/blueprints/overwhelm-surround.md

overwhelm-surround — Overwhelm / Close-In

intent: Convey overwhelm by accumulation. Recognizable subjects assemble, density markers scatter in to amplify "look how much," then the central subject morphs into the viewer's own avatar and elements close in from ALL sides — the frame feels surrounded, not zoomed-into. The emotional arc is recognition → claustrophobia.

roles served

• Problem (from problem-mockup-overwhelm): when the problem beat must first show "too many tools / too much surface area" and then put the viewer inside it — a literal swap of subject (product → person) followed by a closing-in that feels invasive. Reach for it when the pain is "you're buried," not "this metric is bad" (that's dataviz-countup).

duration: 6–9s

shot structure (a [bg] canvas; recognizable surfaces first, the viewer's avatar revealed underneath, then a radial crowd)

• Scene 1 (0.0–~1.6s) — recognizable assembly. Three [product mockups / surfaces] assemble into something the viewer knows — staggered scale-in, the center one full-size, the two flanks smaller (~0.86). Each rides a low-amplitude float so they feel like live context, not a static collage. Camera static.
• Scene 2 (~1.6–3.0s) — density amplifies. [platform icons / logos] scatter in around the mockups (staggered), used purely as density markers — "look how much surface area," not animated dials.
• Scene 3 (~3.0–4.6s) — the morph (signature move). The CENTER mockup MORPHS: its content fades out, the container reshapes, and the viewer's [avatar] is revealed underneath — a literal swap of subject, product → person.
• Scene 4 (~4.6–end) — close-in. [task bubbles / demands] close in from ALL sides toward the avatar (radial staggered entry). The avatar stays put while the bubbles invade — the claustrophobia comes from being surrounded, never from a camera push. Holds on the crowded state.

motion vocabulary: staggered scale-in assembly; resting-scale-preserving low float; density-marker icon scatter; content-fade → container-reshape → reveal-anchor-beneath morph; radial close-in entry from all compass points; held crowded end-state.

rule mapping

• staggered mockup + icon entries (smooth settle onto their resting scale) → spring-pop-entrance (smooth-settle register) backed by gsap-effects
• platform icons as density markers (positions pre-baked, scale/opacity only — NOT internal-parts animation) → svg-icon-enrichment (its DOM contract only)
• center mockup → avatar morph (HF forbids width/height tweens → drive the reshape on scaleX/scaleY, anchor = the avatar layer rendered beneath) → card-morph-anchor
• radial bubble close-in (positions baked once via cos/sin, staggered entry) → gsap-effects (radial layout) + spring-pop-entrance (per-bubble arrival)
• low-amplitude float on background mockups/icons → sine-wave-loop (low-amplitude register — subtle jitter that composes onto each element's resting scale, never a fromTo yoyo that re-tweens to its start)

camera modifier: camera-static — the close-in must read as the world crowding the subject, so the frame holds; a push-in would convert "surrounded" into "zoomed-into" and kill the claustrophobia.