Demo breakdown / Home goods brand

3D Stoneware Configurator and D2C Store Architecture in Next.js and Three.js

A concept D2C home-goods store: one parsed GLB shared by two canvases, and glaze data packed into a single WebP so the surface detail costs almost nothing.

Open the live concept demo: Mossbark Goods. The brand and every record are made up; the engineering is real.

Measured on mobile

Lighthouse performance
94
Largest Contentful Paint
3.1 s
Cumulative Layout Shift
0.000
Total Blocking Time
8 ms
Initial transfer
0.35 MB
Full scroll transfer
1.25 MB

From the demo's own site-check file, run 23 to 24 October 2026.

One GLB, two canvases

Real-time GLB in plain three.js, parsed once and shared by two canvases instead of loading the model twice.

Channel packing in the build script

The Blender build script bakes ambient occlusion and glaze thickness plus iron speckle into one data map per piece. Speckle is sharp, so it goes in luma; AO and thickness are smooth, so they go in chroma. A lossy 4:2:0 WebP then only blurs what was smooth anyway.

Light fallbacks

Each product also ships a WebP packshot (7 to 17 KB) and a 4 s turntable MP4 (15 to 101 KB) for places a live canvas should not run.

All twelve concept demos · Engineering notes