Three.js doesn't own the layout — CSS does. Opted-in [data-layout] elements are batched-read (init + resize) and mapped to world space. Children are inferred from parent boxes when possible. That same pass pulls computed styles and detects line breaks, so WebGL text wraps exactly the same. SDF keeps smaller... text sharp at any scale. Headlines go further: opentype.js extracts glyphs — each letter becomes its own extruded mesh with independent depth. WebGL syncs to native scroll. DOM vs WebGL ↓show more

We recently shipped Shopify Design. 

 Here's a technical breakdown of how I built it. 🧵

Ortho to perspective in 16 floats. 

 In flat mode the camera uses orthographic projection — mirrors the DOM.
 On press-and-hold, all 16 matrix values lerp toward perspective with a cubic ease. Content lifts, FOV widens. One lerp gives a webpage depth.

Each photo is downsampled and split into 3–6 mesh planes by brightness — darks, mids, highlights.
 As you dive, they separate in depth. Block-noise “data moshing” displaces UVs per slice, while each color channel is sampled at slight offsets — creating the chromatic tearing through the image.

The dive is layered with shader-driven effects: RGB channel splitting tears through images, barrel warp bends the viewport, Voronoi cell noise pulses through the wireframe grid, and a particle field fills the space between.

The dive effect is driven by a post-process shader: edge detection + a noise-warped radial sweep + oscillating glow. Noise octaves control the crackle (scaled per GPU tier).
 Additional passes layer in radial zoom blur, barrel distortion, and vignette — all synced to the transition.

The reveal mask reuses the electric edge's shape to cut the canvas — transparent outside, WebGL inside. It's the final pass that pulls everything together, hiding any misalignment between DOM and 3D geometry right where the crackling edge sits.
 The effect isn't just aesthetic, it's structural.

 Final result slowed down ↓

See it live and don't forget to take the 💊 →

Cute

Inspiring and mind blowing - well done

is flash back?

how do you opt in the data layout elements? i feel like u imply that the opt-in is hardcoded. if i wanted to generalise this idea as a library what do you think would be the optimal strategy to intelligently do the opt-in. im thinking heuristics

This is absolutely insane!!

I’d love some sort of code demo on what this part specifically looks like. Sounds incredibly powerful to be able to create a layout normally and have it render inside three js