heygen-com--hyperframes/skills/hyperframes-animation/blueprints/constellation-hub.md

constellation-hub — Constellation / Hub + Satellites

intent: Labeled/iconned nodes spring into a ring/cluster around a center, then the shot resolves on the core — either by pushing the camera INTO the center (depth-of-field collapsing onto it) or by holding a hub mark while the satellites ORBIT it; the "everything connects to / sits around one center" beat.

roles served

• Hook (from hook-cluster-push-in): a constellation of tool/app nodes springs into a wide ring, then a sustained camera push-in with depth-of-field resolves on the inner core — "it connects everything / one hub for all your tools."
• Social_Proof (from social-proof-orbit-ecosystem): the product brand mark lands as the center hub and partner logos spring onto a ring and revolve around it — "plugs into / sits at the center of your stack."
• CTA (from cta-orbit-collapse): the ring resolves by COLLAPSE rather than a push-in — category icons drift around an empty central CTA, a cursor click implodes the orbit toward the click point, and the product demo springs OUT of that collapse as the answer (scope → choice → consequence → product).
• Social_Proof (from proof-logo-chain): a persistent center logo accrues proofs — its wordmark decodes, a claim ticker swaps, the logo glides to center, then avatars cascade into orbit with drawn connectors while partner logos scroll the bottom strip; four claims read as one statement.

duration: 5–8s (Hook 5–6s · Social_Proof 5–8s · CTA orbit-collapse ~6s)

shot structure

Consolidated template — nodes ring a center, then one of two finishers resolves on the core.

• Scene 1 (0.0–~1.5s): [bg] (dark/space field, optionally slow-drifting diffused gradient blobs). [primary nodes] (circles carrying [icon] + label) SPRING-POP in (scale 0→1, ~1.15 elastic overshoot, staggered) arranged in a wide ring/cluster around an empty or marked center [hub].

• Scene 2 (~0.7–2.5s, overlapping): smaller [secondary nodes] (platform / partner-logo chips) pop in staggered with the same elastic spring, filling the gaps; optional thin [accent] connector lines / orbit ring draw from hub→nodes. Camera holds.

• Scene 3 (~2.5–Xs, the resolve): see finisher variant below; lands and HOLDS on the magnified / orbited center to the end.

• Variant — Hook (push-in finisher): from Scene 3, a continuous smooth CAMERA PUSH-IN toward the center inner cluster — inner nodes scale up and stay sharp while outer nodes are pushed toward the edges and progressively BLUR (depth-of-field), background scales up smoothly; holds magnified on the core.

• Variant — Social_Proof (orbit finisher): the center [brand mark] snaps in via a quick 3D rotate that decelerates and settles; a thin [accent] orbit ring draws around it; [N partner badges] spring onto the ring (staggered overshoot) and revolve CLOCKWISE while staying upright, under a continuous slow camera ZOOM-OUT (ecosystem reveal).

• Variant — Social_Proof (optional type-push-through opener, prepended before Scene 1): centered [headline] types/slides in with a huge transparent-fill OUTLINE copy of the same words behind it; the outline text scales up exponentially toward camera (high-speed dolly / push-through), breaches the frame, then HARD-CUTS to the hub bg of Scene 1.

motion vocabulary: staggered elastic spring-pop node entrances (~1.15 overshoot); slow gradient-blob drift; connector-line / orbit-ring draw-on; 3D snap-rotate-settle on the hub mark; continuous camera push-in (inner sharp, outer depth-of-field blur, bg scale-up); clockwise orbital revolve of upright badges; continuous slow camera zoom-out (ecosystem reveal); optional outline-text push-through dolly entry.

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

• staggered spring-pop node entrances → spring-pop-entrance (elastic overshoot) + gsap-effects (stagger recipe); 3D-flip-in flavor → orbit-3d-entry
• ring / cluster layout of nodes around a center → avatar-cloud-network (nodes on an elliptical ring + SVG lines to a center)
• icons on the nodes → svg-icon-enrichment
• connector lines hub→node → svg-path-draw
• orbit-ring draw-on → svg-path-draw
• slow gradient-blob drift → sine-wave-loop (idle looped drift)
• 3D snap-rotate-settle on hub mark → orbit-3d-entry (3D-flip entry); technique CSS-3D
• clockwise orbital revolve of upright badges → orbit-3d-entry (continuous elliptical orbit); technique MotionPath
• camera push-in toward center → multi-phase-camera (PUSH-in) + coordinate-target-zoom (target the core)
• background scale-up during push-in → multi-phase-camera
• continuous slow zoom-out (ecosystem reveal) → multi-phase-camera (pull-back) / coordinate-target-zoom
• outline-text push-through dolly opener (Social_Proof) → 3d-text-depth-layers (outline copy behind) + multi-phase-camera (push-through)
• depth-of-field blur on outer nodes during push-in → depth-of-field-blur (progressive DOF/focus-falloff blur on the off-center outer nodes while the inner core stays sharp)

camera modifier: push-in-with-DOF (Hook) — multi-phase-camera PUSH-in targeted via coordinate-target-zoom onto the core; the focus-falloff blur half of it is backed by depth-of-field-blur. Orbit finisher (Social_Proof) — slow continuous zoom-out via multi-phase-camera (pull-back) while satellites revolve.