- Client: Studio concept
- Sector: Haute horlogerie (fictional)
- Year: 2026
- Services: 3D website, art direction
- Format: One scroll, five chapters
Lumière Éclat
Lumière is a watchmaker that does not exist. Éclat is its one watch. We built the site as a studio piece: a scroll-driven story of light and steel, with the watch itself rendered in three dimensions and turning under the reader’s scroll.
It exists to answer the question every prospective client asks about 3D websites (what does it actually feel like?) with a site they can scroll rather than a sentence they have to believe.
Overview
Every conversation about a 3D website ends at the same place: the client wants to see one. Not a showreel, not someone else’s site, but a page they can scroll on their own laptop and feel the thing move. We did not have one to show, so we built one.
Lumière Éclat is a luxury watch that we invented so the site could be about a single object. One product, one story, five chapters, and the object present in every one of them: turning, catching light, changing scale as the reader moves.
What it is
A single-page, scroll-driven 3D product story for a fictional Geneva watchmaker.
Why it exists
To let a prospective client scroll an immersive site instead of imagining one.
What it proves
That a 3D object can carry a whole page and still load fast, read well and scroll smoothly.
The problem
The business problem was ours. Immersive sites are the work we most want to do and the hardest to sell, because the value is in the feel and the feel cannot be described. A deck of screenshots undersells it. A video of someone else’s site raises the wrong question. The only proof that works is a site of our own.
The design problem underneath it is the one every 3D site has: the object has to be the reason for the page without becoming a toy. It has to move because the story moves, not because it can.
Design concept
The concept is the tagline: time, held, in a single point of light. The page is dark. The watch is the only lit thing on it. Type is set thin and small and stays out of the object’s way; the copy is written like a maison’s, in French and English, and part of it is deliberately rendered as a stream of digits, the way a movement ticks.
Five chapters. The measure of light. Weight, and the absence of it. The collection, where the story turns and the scroll runs east for a while. The atelier. Then the end, or the beginning again. Each chapter changes the watch’s angle, its scale and its light, and the reader drives all of it.
One lit object
The page is dark and the watch is the light source. Nothing else on the page is allowed to glow.
The scroll is the story
Every turn, every change of scale is tied to the reader’s scroll. Nothing plays on its own.
A turn east
The collection chapter runs horizontally (same grid, same rules, a different direction) so the page has a second act.
Development
Next.js with a WebGL scene for the watch, every chapter’s copy rendered on the server, and one scroll driver that owns the whole page: the object’s pose, the light, the chapter transitions and the horizontal run are all functions of one scroll position.
The object
The watch is a real-time model with a physically based material, lit by an environment that the scroll rotates. The bracelet’s eleven rows are geometry, not a texture, so they catch the light as they turn.
One scroll, everything
A single scroll position drives the camera, the object’s rotation, the light rig and the chapter copy. There are no independent animations to fall out of sync.
The horizontal act
The collection chapter pins the viewport and translates the story sideways off the same scroll, then hands back to the vertical page without a seam.
Kept fast
The scene is capped to what the device can draw, the model is compressed, and the page is readable before the scene is ready. Reduced motion gets the chapters as stills.
Key decisions
The hardest call was restraint. A 3D scene invites a hundred things: particles, reflections, a cursor that moves the object. Every one of them was tried and cut. The watch turns on the scroll and nothing else, because a product story is about the product and the moment the page performs for its own sake the object stops being the point.
The second decision was to write the copy as a real brand would, in two languages, with a maison’s voice. A demonstration with lorem ipsum demonstrates nothing. The words had to be the kind of words a client would actually need to set on a page like this.
Scroll only
No cursor tricks, no autoplay. The object answers the scroll and nothing else.
Real copy
Written as a maison would write it, in French and English, so the demonstration is honest.
Stills for the rest
A device that cannot draw the scene, or a reader who asks for reduced motion, gets the chapters as stills. The story survives.
Performance
An immersive site earns its place only if it is not slow, so the budget was set before the scene was built. The copy is in the HTML and paints first; the scene loads behind it and takes over when it is ready. On a phone the scene draws at a lower resolution and fewer frames, and on a device without WebGL it does not draw at all and the page still reads.
- Copy server-rendered, readable before the scene
- Compressed model, one material, one light rig
- Resolution and frame cap per device
- Chapters as stills for reduced motion and no WebGL
- One scroll driver, transform-only
- The horizontal act on the same scroll
What was delivered
A complete, deployable 3D product site, and the template we now start from when a client asks for one.
- The five-chapter scroll story
- The 3D watch, its material and light rig
- Bilingual copy, French and English
- The horizontal collection chapter
- Still fallbacks for every chapter
- The scroll driver, reusable
Result
There is no client and there are no sales numbers, and this page will not pretend otherwise. Lumière Éclat is a studio piece. Its result is the conversation it starts: it is the page we send when someone asks what a 3D website feels like, and it is the reason the 3D websites service page can point at something real.
