heygen-com--hyperframes/skills/hyperframes-animation/blueprints/logo-assemble-lockup.md

logo-assemble-lockup — Logo Assemble → Lockup

intent: A brand mark / wordmark builds itself from parts (elements assemble or orbit in, letters cascade, an outline draws on, or a camera pushes through negative space) and resolves into a centered logo lockup — optionally extended into a final URL / CTA.

roles served

• Product_Intro (from product-intro-logo-system-assemble): A wordless, premium brand STING — an abstract system of elements pulses / grows / orbits and assembles around a FIXED central logo, carried by one cinematic camera tilt; no copy, no UI.
• CTA (from cta-camera-push-lockup): The logo build is a LEAD-IN to the final ask — a 3D mark assembles + wordmark cascades, then a fast camera PUSH-THROUGH the mark's negative space streaks giant CTA letters past the lens and resolves on a [url] / [CTA verb] lockup.
• CTA (from cta-button-wordmark-build): The "draws-its-own-outline → wordmark-builds-letter-by-letter" sub-shape — a [CTA button] pill strokes its own glowing border, a diagonal-band WIPE flips the frame, and the [wordmark] types in beside a slash to land the lockup. Camera static.
• Brand_Outro (from brand-outro-assemble-logo-lockup): The closing mark — a formation of [feature pills / UI elements] CLEARS the stage off all four edges, then on the empty frame the [logo mark] draws itself on stroke-by-stroke and the [wordmark] reveals to complete the lockup, then fades out.
• Product_Intro (from brand-reveal-assemble-zoom): a context-then-focus reveal — a companion tagline TYPES out to set context, the hero mark pops in beside it, then the companion exits as the layout recenters and the camera pushes IN to a held close-up on the mark (wide composition narrowing to a tight focus).

duration: ~4.6–11.0s (Brand_Outro ~4.6s · brand-reveal ~5s · Product_Intro ~7s · CTA 5.4–11.0s)

shot structure (one consolidated time-coded template; [slots] are product-agnostic)

• Scene 1 — clear / ignite (0.0–~1.0s): the stage is prepared for the mark to build into.

  • Variant — Product_Intro: opens on a clean [light bg] with faint concentric guide rings under a flat top-down view; rings PULSE and expand from center; mid-beat the bg crossfades [light]→[dark gradient: hero→secondary], tiny seed dots appear along the rings, and the central [logo mark]'s glow IGNITES (mark is present from t=0, fixed, front-facing).
  • Variant — CTA push: on a [bg gradient], the [logo mark] is settling in object space (a 3D mark with thin wireframe edge-guides + a faint bracket motif behind center); a very slow continuous camera push-in may already be creeping.
  • Variant — CTA button-build: on a [dark grid bg], a rounded [CTA button "label"] pill rises / scales into center (a prior headline clearing off the top); its thin border DRAWS ON as an animated glowing outline STROKE, with a small [accent] comet / spark icon at its left edge.
  • Variant — Brand_Outro: a PRE-ARRANGED formation of [feature pills / element grid] (each [icon]+[label]) DISPERSES — elements slide outward from their laid-out positions and fly off all four frame edges (edge-clearing drift, NOT a center-origin burst), emptying the frame onto a clean [bg].

• Scene 2 — assemble the mark (~1.0–~Ys): the mark builds itself from parts.

  • Variant — Product_Intro: seed dots SCALE UP into flat [accent] shapes arranged on the rings; concentric bands ripple outward (tunneling feel) and the shapes begin to ORBIT / drift around the still-fixed center.
  • Variant — CTA push: the [wordmark] CASCADES out from behind the mark (letters left→right with overshoot) into the full [brand lockup]; the 3D mark may assemble in beats (a terminal detaches + pops as a spring dot, a part hinges-open-and-snaps-shut elastic). Optional beat: a [cursor] arcs in and "clicks" the wordmark, OR a frosted-glass pill holding an intermediate [CTA line] springs in while layered mark shells fan to the edges.
  • Variant — CTA button-build: a graphic WIPE flips the frame to [contrast bg] — a thin [accent] diagonal line sweeps in, swells into a full-frame diagonal BAND, then collapses to a small [accent] slash.
  • Variant — Brand_Outro: on the now-clear frame, the [logo mark] DRAWS ON via stroke (built arc-by-arc / segment-by-segment).

• Scene 3 — resolve to lockup (~Ys–end): the lockup completes and holds (Product_Intro / Brand_Outro) or is flown into / extended to a CTA (CTA variants).

  • Variant — Product_Intro (the ONE camera move): the whole system smoothly TILTS from flat top-down into an angled isometric perspective (ease-in-out) with a slight zoom-out — flat shapes become luminous 3D forms, bands become glowing orbit lines, while the central [logo mark] does NOT tilt (stays 2D, front-facing, fixed). Camera eases to a stop; elements keep continuous orbit/drift (inner faster than outer); the mark holds its steady glow. Final settled frame.
  • Variant — CTA push (the signature): a single fast CAMERA PUSH-THROUGH the mark's negative space / through the glass pill — heavy horizontal motion-blur, giant [CTA] letters streaking past the lens (cursor drops out). Resolves to the final lockup on a saturated [bg]: a [url badge] / [CTA line] revealed by a left→right WIPE carrying an [accent] leading edge (or a clean fade), with solid mark-shapes parallax-sliding in behind. Settles to a dead-static hold (slow zoom-out / settle).
  • Variant — CTA button-build: the [wordmark] BUILDS letter-by-letter to the right of the slash, landing on the final "[slash] [WORDMARK]" lockup centered on the new bg. Slow settle to static.
  • Variant — Brand_Outro: the [wordmark] reveals beside the drawn mark (slide / fade) to complete the [lockup]; the lockup holds, then fades to [black / bg].

motion vocabulary: ring pulse / expand; background crossfade (light→dark); glow ignite; seed-dot scale-up; continuous orbit / drift (inner faster than outer); single 3D perspective tilt (flat→isometric) + slight zoom-out around a fixed 2D anchor; 3D logo assemble (part detach + spring dot, clapperboard hinge / snap, shell fan-out); wordmark cascade with overshoot (letters left→right); button pill rise / scale-in; animated stroke-outline DRAW + glow (button border AND logo mark); comet / spark accent; diagonal-band wipe (sweep → swell → collapse-to-slash); letter-by-letter wordmark build; pre-formed grid DISPERSE off all four edges; logo-mark stroke-draw (sequential arcs / segments); fast CAMERA PUSH-THROUGH with motion-blur (CTA spine); continuous slow push-in / push-out; cursor arc-in + click; parallax shape slide-in; left→right URL/badge wipe with glowing leading edge; static / fade-out end-lockup hold; optional idle breathe on the held mark.

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

• ring pulse / expand from center → center-outward-expansion (radiate from a shared center; reuse the 0→1 progress driver)
• background crossfade (light→dark gradient) → plain opacity/background tween via gsap-effects (no dedicated rule needed)
• glow ignite on the mark → asr-keyword-glow (envelope-driven glow on the brand element)
• seed-dot scale-up into shapes → spring-pop-entrance (scale-in pop; alt scale-swap-transition if dots morph into shapes)
• continuous orbit / drift around fixed center → orbit-3d-entry (flip-in then continuous elliptical orbit; center label = the fixed mark)
• single 3D perspective tilt (flat→isometric) + slight zoom-out → multi-phase-camera (scripted scale phases on a scene-wrapping camera, for the zoom-out) — see camera modifier; the FLAT→ISOMETRIC plane tilt of the whole stage is a CSS-3D perspective move (techniques.md CSS-3D, animating the stage's rotateX) — no exact camera rule for the plane-tilt, approximate via CSS-3D (closest reference is orbit-3d-entry's "Tilted orbit plane" variation animated over time)
• fixed 2D anchor logo amid moving universe → no motion rule needed (static anchor; intentional — it's the absence of motion, the universe moves around it)
• 3D logo assemble — part detach + spring dot → spring-pop-entrance (spring pop, back.out overshoot)
• 3D logo assemble — hinge open / snap (clapperboard) → hacker-flip-3d (the 3D-rotate axis) + techniques.md CSS-3D (the elastic open-and-snap-shut hinge is an adaptation of the 3D-rotate)
• 3D logo assemble — shell fan-out to edges → center-outward-expansion (run outward from the mark center)
• wordmark cascade with overshoot (letters left→right) → recipe gsap-effects (per-element staggered slide) + spring-pop-entrance (the back.out overshoot per letter)
• button pill rise / scale-in → spring-pop-entrance (scale-in; alt scale-swap-transition)
• animated stroke-outline draw + glow (button border) → svg-path-draw (stroke-dashoffset draw) + asr-keyword-glow (the glow on the drawn stroke)
• comet / spark accent on button → asr-keyword-glow (small glow accent); motion path via techniques.md GSAP MotionPathPlugin (#9)
• diagonal-band wipe (sweep → swell → collapse-to-slash) → techniques.md clip-path reveal (#12, animate a polygon(...) diagonal across the frame; the swell-then-collapse-to-slash is the same clip-path reveal driven through grow→shrink keyframes)
• letter-by-letter wordmark build → discrete-text-sequence (smooth-slice / per-state build); recipe gsap-effects (typewriter / appending words)
• pre-formed grid disperse off all four edges → not a rule gap: a formation flying off-frame is an EXIT, and the pipeline forbids mid-video exits — the harness transition IS the exit (only the final frame may exit the stage). Treat this as transition-handled / final-frame-only rather than an in-scene motion rule. (If staged in-scene as a reveal-the-mark clear, it reuses center-outward-expansion run OUTWARD — center→target machinery interpolating formation→offscreen targets, out-easing.)
• logo-mark stroke-draw (sequential arcs / segments) → svg-path-draw (the canonical multi-segment stagger draw)
• wordmark slide / fade reveal beside drawn mark → svg-path-draw (its "brand-line fades in after stroke" tail) ; slide via spring-pop-entrance
• fast camera push-through with motion-blur → multi-phase-camera (a hard push phase) — see camera modifier; the heavy motion-blur streak itself → motion-blur-streak (directional velocity blur on the fast push-through)
• continuous slow push-in / push-out → multi-phase-camera (phase scale + drift)
• cursor arc-in + click on the wordmark → cursor-click-ripple (move → click → ripple); arc path via techniques.md MotionPathPlugin (#9)
• parallax shape slide-in behind lockup → depth-scatter-assemble (parallax depth slide-in of shapes at differing depths; pair with 3d-text-depth-layers for the depth ordering)
• left→right URL / badge wipe with glowing leading edge → techniques.md clip-path reveal (#12, animate inset() left→right); the glowing leading edge → asr-keyword-glow
• static / fade-out end-lockup hold → no motion rule needed (terminal hold / opacity fade; intentional)
• idle breathe on held mark (optional) → sine-wave-loop (post-settle breathing)

camera modifier (the push / tilt)

• CTA push-through (the CTA spine): a scripted hard zoom phase on a scene-wrapping camera → multi-phase-camera ("Steady push" / "Bookend pull" pattern; push phase = the climax). When the mark is OFF-center and the camera must fly through a specific point of negative space, combine with coordinate-target-zoom (outer scales, inner counter-translates so the target negative-space point lands at viewport center as scale ramps; measure the offset at setup). The signature heavy horizontal MOTION-BLUR on the streak → motion-blur-streak (directional velocity blur on the push); realize with a CSS filter: blur() / duplicated-streak layer on the camera during the push window.
• Product_Intro tilt (the one cinematic move): the flat→isometric perspective tilt + slight zoom-out is a single scripted camera beat → multi-phase-camera (scale phase + the "Targeted zoom into off-center element" / drift machinery) for the zoom-out. multi-phase-camera is scale+translate+drift only, so the perspective-PLANE rotateX (flat top-down → angled isometric) of the whole stage is the CSS-3D move noted above — approximate via techniques.md CSS-3D, animating the stage's rotateX (closest reference is orbit-3d-entry's "Tilted orbit plane" variation animated over time).