Live 3D, when the visitor changes something
A finish, a size, an arrangement, a part that comes apart. If the visitor's choice changes what they see, it should be rendered live in three.js.
3D product websites
3D product websites, built to run on a phone.
We build product websites with real-time 3D: viewers and configurators in three.js, and scroll films rendered in Blender. Most of the work is deciding which parts must be live and which should be film, so the page shows the product clearly and stays fast on an ordinary phone.
When live 3D is worth it
Film, when you control the shot
A hero reveal, a construction sequence, lighting that has to be exactly right. We render it in Blender and play it against the scroll. It looks better than live 3D and costs the phone almost nothing.
Neither, when a photograph says it
If the product does not change and the angle does not matter, a good photograph is faster and more honest. We will tell you when that is the case.
How MODULAR is built: what is film, what is live
Scroll films
Pre-rendered in Blender and played as paused video that follows the scroll position.
Construction view
A pre-rendered image sequence drawn to a canvas as you scroll, from the closed speaker to its driver and amplifier board.
Configurator
Real-time three.js. Finish, single or stereo arrangement and shelf or stand placement change a live model. A setup can be saved in the browser, downloaded or reopened from a link.
MODULAR is a concept piece, self-initiated: a speaker brand we invented, not client work. Read about MODULAR or open the site. For a 3D product site with the sales system behind it, open Fernlight Audio (concept demo, opens in a new tab), one of our concept demos.
Keeping 3D fast on phones
3D loads when it is needed
The three.js code and the models load only as the viewer comes into view, so the first screen arrives as quickly as a normal page.
A still image under every model
A rendered still sits beneath each live view. If WebGL is not available or the phone drops it, the still stays and the page says so, with links to carry on.
Reduced motion is a real version
With reduced motion turned on, scroll-driven films become views you choose with a button, and nothing moves on its own.
Measured, not promised
On the live MODULAR site: Lighthouse mobile performance 96, LCP 2.7 s, total blocking time 1 ms, CLS 0, 0.41 MB on first load (Lighthouse 12.5.1, median of 3 runs, 18 October 2026).
What we need from you
The design
Desktop and mobile frames, including the states the 3D sits in: loading, chosen, saved.
The product
3D models if they exist (glTF, or the Blender or CAD source), plus photographs and finish references. If there are no models yet, tell us what exists and we will say what is missing.
The options
Every finish, size and combination the configurator must offer, and which ones cannot go together.
Agencies: what a 3D or WebGL build costs, and how we work under your name, is on For agencies.
Questions about 3D product websites
When is real-time 3D worth it on a product website?
When the visitor changes something and needs to see the result: a finish, a size, a configuration, the inside of the product. For a fixed hero shot, a pre-rendered scroll film looks better and is lighter.
Does it work on older phones?
Yes. The 3D loads only when it is about to be seen, and a rendered still sits under every live model. If the phone cannot run WebGL, the still stays in place and the rest of the page works as normal.
Can visitors save or share a configuration?
Yes. In MODULAR, a setup can be saved in the browser, downloaded, or reopened from a link that holds the chosen options.
Which tools do you use?
three.js and React Three Fiber for the live 3D, GSAP ScrollTrigger for scroll-driven motion, Blender for the films and stills, and Next.js for the site around them.