Letters of a giant headline fly apart in 3D, drift through space, then snap back into formation. Per-letter translate3d / rotate3d driven by scroll.
Take a hero headline, split it into individual letter spans, give each letter a random "scatter" vector in 3D space (x, y, z offset + rotation), then interpolate between the scattered state and the assembled state on scroll. The letters look like they explode outward, hover for a moment, then reassemble — as if reality is reforming around the word. Used by music album sites, fashion brands, AI launch reveals, conference openers.
(1) Split the headline into letter spans (you can do this manually or with SplitType.js). (2) For each letter, set 6 random CSS custom properties: --tx, --ty, --tz, --rotx, --roty, --rotz — the per-letter scatter targets. (3) Every letter shares the same transform formula: translate3d(calc((1 - --p) × --tx × 1px), ...) — when --p:1 the letter sits at its natural position; when --p:0 it's blown out to its scatter target. (4) Add a per-letter blur that's stronger when scattered, to sell the "out of focus" feel. (5) Scroll listener computes --p with peak-at-middle easing so the word forms in the middle of the scroll and shatters at both ends.
Scroll inside. The headline scatters into 3D space, holds, reassembles — twice.
Each letter has its own scatter vector
Build a 3D scroll-driven type-shatter animation. Sticky pin (top:0 height:100vh perspective:900px) inside a 2400px-tall section. Inside the pin, a stage element with font-size clamp(64,12vw,152px), font-weight 800, transform-style:preserve-3d. JavaScript: take a headline string (like "Out of <em>chaos</em>, order.") and split it into individual letter spans (.ts-letter) — preserve any inline em tags. For EACH letter, set 6 inline CSS custom properties to random values: --tx (random -300 to 300px), --ty (-200 to 200px), --tz (-400 to 400px depth), --rotx (-80 to 80deg), --roty (-80 to 80deg), --rotz (-30 to 30deg). Every .ts-letter shares the same transform formula: translate3d(calc((1 - var(--p)) * var(--tx) * 1px), calc((1 - var(--p)) * var(--ty) * 1px), calc((1 - var(--p)) * var(--tz) * 1px)) rotateX/Y/Z(calc((1 - var(--p)) * var(--rot*) * 1deg)). Also filter:blur(calc((1 - var(--p)) * 4px)) and opacity:calc(0.2 + var(--p) * 0.8). When --p:1 the word is fully assembled; when --p:0 it's scattered into 3D space. Scroll listener computes scroll progress and maps to peak-at-middle so the word forms at the middle of the scroll and shatters at both ends. Show "Assembly: NN%" + "FORMED / SHATTERING / SCATTERED" readout.