We just launched Shopify Editions Winter 2026 🎨 Here's the...
Arnaud Tanielian@Danetag
19 views
Dec 18, 2025
~3 min read
Advertisement
1
We just launched Shopify Editions Winter 2026 🎨
Here's the technical breakdown of how we built it 🧵
Here's the technical breakdown of how we built it 🧵
1:34
2
Let's talk about WebGL!
No surprises here, we’re using @threejs (and R3F) under the hood.
Each painting is a unique WebGL scene as a R3F Portal, each with custom shaders, postprocessing, animations…
No surprises here, we’re using @threejs (and R3F) under the hood.
Each painting is a unique WebGL scene as a R3F Portal, each with custom shaders, postprocessing, animations…
3
Models were created using two different methods.
Method one involved generating a depth map from the static painting and using it to displace a densely subdivided plane to create depth and preserve details.
Method one involved generating a depth map from the static painting and using it to displace a densely subdivided plane to create depth and preserve details.
0:15
4
For more dimensional paintings we leveraged @tripoai to generate a base mesh silhouette. From there we painted textures onto the mesh with Substance painter and did custom modifications to the model in Blender (including rigging and animation). We then exported the models as GLTF
0:29
5
We heavily optimized our GLTF files to fit any GPU memory.
We built a custom Electron app to reduce polycount & convert textures to GPU-friendly Basis/ETC1S. Compressed textures used ~10-100x less memory & uploaded instantly, preventing decoding lags while scrolling!
We built a custom Electron app to reduce polycount & convert textures to GPU-friendly Basis/ETC1S. Compressed textures used ~10-100x less memory & uploaded instantly, preventing decoding lags while scrolling!
0:20
6
.@theatre_js changed our animation workflow completely.
Designers get After Effects-like control over the website, able to control absolutely everything. No code changes for timing adjustments, animation iteration went from hours to minutes!
Designers get After Effects-like control over the website, able to control absolutely everything. No code changes for timing adjustments, animation iteration went from hours to minutes!
0:40
7
We tried to keep our shaders optimized: for instance, we compute most of the noises we use as DataTextures on the first frame and we add a bit of animation on top of it with simple cos/sin functions.
We also optimized our “sobel effect” by using fwidth, saving 3 texture lookups!
We also optimized our “sobel effect” by using fwidth, saving 3 texture lookups!
8
.@rive_app optimization was critical due to 20+ animations on top of a WebGL scene.
For Rive on hover, we used the first frame as a poster, then played the Rive on hover.
For linear animations, a custom Rive-to-video exporter ran them off the main thread.
For Rive on hover, we used the first frame as a poster, then played the Rive on hover.
For linear animations, a custom Rive-to-video exporter ran them off the main thread.
0:09
9
For our key easter egg, we stream the main Three.js canvas to a popup via WebRTC at 60fps, no duplicate scene rendering.
BroadcastChannel syncs position/size/scroll between windows, creating a transparent window effect with real-time event messaging for interactions.
BroadcastChannel syncs position/size/scroll between windows, creating a transparent window effect with real-time event messaging for interactions.
1:02
10
The popup has its own lightweight Three.js scene where the video feed is textured onto a cube matching the main window's dimensions, then composited with custom shaders, allowing us to do the graffiti black-light effect.
11
We created a 4-tier quality system:
- High: Full 3D, post-processing
- Medium, Low: Simplified textures & geometry
- Fallback: Static images replace 3D
- WebGL Fallback: Pure CSS
Auto-detection based on the user's GPU capacity, with real-time downgrade based on current FPS.
- High: Full 3D, post-processing
- Medium, Low: Simplified textures & geometry
- Fallback: Static images replace 3D
- WebGL Fallback: Pure CSS
Auto-detection based on the user's GPU capacity, with real-time downgrade based on current FPS.
12
The Skills Cloud component is neat: we actually get live Sidekick usage, sent via SSE!
On the app side, we optimized every React render loop, using Zustand when needed.
On the app side, we optimized every React render loop, using Zustand when needed.
0:12
13
Our intro sequence needs to load fast.
CSS + SVG transitions/animations do the lifting here, making use of the pathLength attribute to draw our DaVinci lines and transform-box to animate our title text.
CSS + SVG transitions/animations do the lifting here, making use of the pathLength attribute to draw our DaVinci lines and transform-box to animate our title text.
0:03
14
The little details that matter: you may have noticed the roman numerals in various places. A custom CSS counter means that instead of decimal lists, we can use Roman Numerals!
15
Last but not least… The whole Editions Winter 2026 experience is a real, live Shopify store!
We leveraged: metaobjects & metafields, products/collections, markets, translate & adapt, shopify CDN, and custom apps with Admin API integrations.
We leveraged: metaobjects & metafields, products/collections, markets, translate & adapt, shopify CDN, and custom apps with Admin API integrations.
16
Global storefronts? Check. Our merch drop utilized Managed Markets for seamless global shipping and Shopify Fulfillment Network to sync data with the 3PL provider.
17
A look at our final loading size breakdown:
- Mobile: 2.4MB (target: 2MB)
- Desktop: 4.5MB
Route splitting, dynamic imports, aggressive tree shaking... Every PR was scrutinized for size impact!
- Mobile: 2.4MB (target: 2MB)
- Desktop: 4.5MB
Route splitting, dynamic imports, aggressive tree shaking... Every PR was scrutinized for size impact!
18
We're so proud of this Editions, hope you enjoyed it as much as us 💚
The dev team: @mcneillie84276 @JoshSanger_eth @kylewayneluck @jh3yy @athlndr @celsostories @ArthurCloche @damienmortini @krystalcampioni
The dev team: @mcneillie84276 @JoshSanger_eth @kylewayneluck @jh3yy @athlndr @celsostories @ArthurCloche @damienmortini @krystalcampioni
