We recently shipped Shopify Design. Here's a technical breakdown of...
Johnny Slack@johnnycartelle
50 views
Apr 18, 2026
~2 min read
Advertisement
1
We recently shipped Shopify Design.
Here's a technical breakdown of how I built it. 🧵
Here's a technical breakdown of how I built it. 🧵
2
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 ↓
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 ↓
3
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.
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.
4
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.
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.
5
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.
6
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.
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.
7
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 ↓
The effect isn't just aesthetic, it's structural.
Final result slowed down ↓
8
See it live and don't forget to take the 💊 → shopify.design
