3D landing pages
A hero object, a scroll story and a layout that still converts when the 3D is switched off.
Real-time 3D web studio · reference build
3D websites that feel real.
Modelled in Blender, lit like a product shoot, compressed to 203 KB and scroll-choreographed in the browser. This page is the working example for the 3D Landing Playbook: every technique you see is explained there.
01 · Services
One studio for the whole 3D pipeline.
Product configurators
Swap materials, colours and parts in real time, with the same lighting as the hero shot.
WebGL campaigns
Launch microsites with shaders, particles and post-processing, budgeted for phones.
Asset pipeline
Blender to glTF to gltf-transform: bevelled, PBR-correct and compressed for the web.
02 · Process
Four layers, taken apart.
-
01
Story
Storyboard the scroll before any 3D: one idea per section, one camera move per idea.
-
02
Model
Real-world scale, bevelled edges, clean quads. Export glTF, compress with meshopt.
-
03
Light & material
PBR values, a studio softbox environment, AgX tone mapping and a little bloom.
-
04
Motion & ship
GSAP scrubs the poses, Lenis smooths the scroll, performance guards keep 60 fps.
03 · References
Studied from the best on the web.
Every pattern on this page comes from a live, award-winning 3D site. The playbook breaks down how each one is built.
See all references and their stacks04 · Stack
The boring, reliable stack behind the magic.
- Blender 5.2
- glTF 2.0
- gltf-transform
- three.js r186
- postprocessing
- GSAP 3 + ScrollTrigger
- Lenis
- Vite
- Netlify
- 203 KB
- hero model, meshopt + quantised
- 0
- texture files: lighting is a generated studio
- ≤ 1.75
- device pixel ratio cap, adaptive below it
- Poster
- Cycles render when WebGL or motion is off
05 · Start
From zero to a live 3D site.
Follow the step-by-step plan: tools to install, the folder structure, the Blender script, the scroll choreography, the performance checklist and the deploy.