A product website with a live 3D scene

Self-initiated demo - not a client project. Candlewren is an invented company, and Lantern One is its invented product.

A product website people remember: a live 3D object, motion tied to scrolling, careful details - and still a page that is fast, clear and good on a phone. This is how Apple and strong tech start-ups present hardware.

One idea carries the whole page: a box with light inside. On the first screen it glows next to the headline and turns slightly after the cursor, or after the tilt of the phone. When you scroll, it moves down into the "Inside" section and opens into four layers that come forward one by one, each with its own caption, with a progress bar underneath. After that the scene fades out under ordinary text, and the visitor's computer stops spending effort on it. Everything else is calm: one typeface, one accent colour, a lot of space.

Numbers count up once when they come into view. The booking form checks its fields and explains mistakes in words; its confirmation is honest: "This is a demo, so nothing was sent". Light and dark themes follow the system or a switch, and the 3D lighting changes with the theme.

Careful modes: with "reduce motion" switched on, nothing pins or moves and all layers are shown as pictures. Without WebGL, or if the 3D library cannot load, the page shows pictures instead of 3D and works as a normal site.

How it is built: three.js draws the scene and GSAP ScrollTrigger drives the scrolling. The object is built in code, with no model files. Picture quality adapts to the device and drops by itself if frames slow down, and drawing stops when the scene is out of view.

Measured on 2026-09-24: 60 frames per second in Chrome on a Mac (Apple M1) at desktop and phone sizes - measured in phone mode on the Mac, not on a real phone. Lighthouse: 100/100/100/100 on desktop; on the mobile profile, performance 92-95 in four runs in a row and 100 for accessibility, best practices and SEO. 34 automated tests cover the unfolding logic and the whole page in a real Chrome, from a 390 px phone to a 2560 px screen.

In a real project: a model of your own product (from CAD or a 3D file), your texts and brand, and a content editor if you need one. Monthly support from 250 USD: text and number updates, new sections, checks in new browsers and phones, speed monitoring and small improvements.

Try the live demo: https://flowlab-dev.github.io/demo/3d-site/