Subchapter 18.78

Depth Scatter Assemble

rules/depth-scatter-assemble.mdMarkdown7 KBView on GitHub

N elements (glyphs, cards, logo fragments) fly in from a rotating 3D depth-cloud and lock into a flat layout — or the reverse. Each element has its OWN index-derived point in the cloud (translateZ depth + rotateX/Y tumble + x/y scatter). Distinct from orbit-3d-entry (flip-in then continuous orbit) and center-outward-expansion (flat burst from one shared center): here the resolve is a flat assembled layout.

How It Works

Depth Scatter Assemble · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

const GOLDEN = Math.PI * (3 - Math.sqrt(5)); // ~2.39943 rad — even spread, no clumping
const a = i * GOLDEN;
const scatterX = Math.cos(a) * RADIUS;
const scatterY = Math.sin(a) * RADIUS;
const scatterZ = Z_NEAR - (i / (n - 1)) * (Z_NEAR - Z_FAR); // stepped depth
const rotX = Math.sin(a) * TUMBLE;
const rotY = Math.cos(a) * TUMBLE;

<!-- inside a standard scene clip (hyperframes-core) -->
<div class="cloud-stage">
  <div class="frag" data-target-x="-260" data-target-y="0">{glyph1}</div>
  <div class="frag" data-target-x="-130" data-target-y="0">{glyph2}</div>
  <!-- … one .frag per glyph / fragment … -->
</div>

.scene-root {
  display: grid;
  place-items: center;
  perspective: 1400px; /* REQUIRED */
}
.cloud-stage {
  position: relative;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.frag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden; /* hides the mirrored face mid-tumble */
  will-change: transform, opacity;
}

const frags = Array.from(document.querySelectorAll(".frag"));
const n = frags.length;
const GOLDEN = Math.PI * (3 - Math.sqrt(5));

// 1) Park every fragment in the cloud BEFORE any tween fires
const scatter = frags.map((el, i) => {
  const a = i * GOLDEN;
  const depthT = n > 1 ? i / (n - 1) : 0;
  return {
    x: Math.cos(a) * RADIUS,
    y: Math.sin(a) * RADIUS,
    z: Z_NEAR - depthT * (Z_NEAR - Z_FAR),
    rotationX: Math.sin(a) * TUMBLE,
    rotationY: Math.cos(a) * TUMBLE,
  };
});
frags.forEach((el, i) => gsap.set(el, { xPercent: -50, yPercent: -50, ...scatter[i], opacity: 0 }));

// 2) The cloud rotates so the scatter has life during assembly
tl.to(
  ".cloud-stage",
  { rotationY: CLOUD_SPIN_DEG, duration: CLOUD_SPIN_DUR, ease: "power1.out" },
  0,
);

// 3) ASSEMBLE — cloud point → flat target, index stagger = cloud collapsing inward
frags.forEach((el, i) => {
  tl.to(
    el,
    {
      x: Number(el.dataset.targetX),
      y: Number(el.dataset.targetY),
      z: 0,
      rotationX: 0,
      rotationY: 0,
      opacity: 1,
      duration: ASSEMBLE_DUR,
      ease: ASSEMBLE_EASE,
    },
    i * STAGGER,
  );
});

token	range	notes
n	4–14 (fragments 4–9)	above ~14 individual paths stop reading
RADIUS	250–700px	keep the farthest scatter in frame or fragments pop in with no travel
Z_NEAR / Z_FAR	+150…+450 / −150…−500	large `\|z\|` needs a wider `perspective` or fragments smear
TUMBLE	40–110°	past 90° glyphs show blank mid-tween (intended); cap ~80° for one-faced cards
ASSEMBLE_DUR	0.7–1.4s
ASSEMBLE_EASE	`power3.out` default	`expo.out` snaps, `back.out(1.4)` seats with overshoot; never `in`
STAGGER	0.03–0.09s	`n × STAGGER < ASSEMBLE_DUR` — one collapsing motion, not a queue
CLOUD_SPIN_DEG / _DUR	15–60° over ≥ dur	gentle life; too fast competes with the assembly
SWAP_DUR	0.5–1.0s	on the beat boundary; shorter = hard cross

Depth Scatter Assemble

How It Works

Depth Scatter Assemble

How It Works

Recipe

Variations

Values

Critical Constraints

See also