Johnny Slack
@johnnycartelle • 4,365 subscribers
Design Engineer @shopify Product Design Studio. Co-founded @cartelle. Prev CTO / Developer @hellomondaycom
Videos
We recently shipped Shopify Design. Here's a technical breakdown of how I built it. 🧵
Johnny Slack343,233 views • 1 month ago
![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 ↓](https://image.24vids.com/tw-2044880987293622457/amplify_video_thumb/2044880927495479296/img/4XGrd5xw1GZETy04.jpg)
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 ↓
Johnny Slack105,442 views • 1 month ago
No more content to load