MERIDIAN – Luxury Watch 3D Product Configurator & Landing Page Template (Next.js, React Three Fiber)

MERIDIAN is an immersive 3D product page template for a fictional watch maison, built with Next.js 16, React 19, three.js and React Three Fiber. One real-time watch, the Équinoxe 41, sits in a photographic studio while the visitor scrolls through eight chapters. The camera, the light and the watch itself move between hand-tuned poses, and the page ends with a 3D product configurator and a private-viewing request. It suits watch and jewellery brands, luxury product launches, design studios and anyone who needs a premium single-product story.

Try the live demo from the button on this page, or watch the video tour and step through the desktop, tablet and phone screenshots.

Eight chapters, one watch

1. Reveal – the studio light swings round from behind and the watch settles at a three-quarter hero angle.
2. The Case – a macro sweep across the 48-flute bezel and knurled crown, with case stats.
3. The Dial – a frontal view where the hands show the visitor's real local time, with a sweeping seconds hand and the live time zone in the copy.
4. Anatomy – an exploded view: crystal, bezel, hands, dial, case, movement and caseback separate along the axis while the bracelet draws back. Labelled callouts are projected from 3D every frame (a numbered legend on phones).
5. Calibre – the watch turns over to a sapphire caseback. The balance oscillates at 4 Hz with a breathing hairspring, the escape wheel steps and the skeletonised gold rotor swings.
6. After Dark – the studio drops to about 3% and the lume on the indices and hands charges up and blooms.
7. Configure – three case metals (904L steel, 18k yellow gold, Platinum 950) and four dials (Bleu Nuit, Ardoise, Ivoire, Forêt). Colour and roughness morph smoothly on shared materials, so no shader recompiles and no frame drops.
8. Viewing – a centred outro with a "Book a private viewing" dialog that confirms locally; nothing is sent until you wire it to your own backend.

Built entirely in code

There are no model files and no image assets. The case, fluted bezel, crown, lugs, dauphine hands, gears and bracelet links are procedural geometry; the dial print, rehaut, date wheel, perlage, Côtes de Genève and caseback engraving are canvas textures drawn at load. That keeps the download small, removes any third-party model licence, and means every dimension can be changed in code.

• Physically based materials – a sunburst dial with a per-pixel anisotropy map, brush-line roughness and clearcoat; a sapphire crystal using transmission (IOR 1.77) with a faint anti-reflective tint; instanced three-piece bracelet links.
• Studio lighting – strip softboxes, rim strips and a warm bounce card baked once with PMREM into the scene environment, so highlights sweep across polished metal as the camera moves.
• Post-processing – HDR bloom (only lume and hot glints bloom), velocity-driven chromatic aberration, ACES filmic tone mapping, grain and vignette via postprocessing.
• Smooth scroll – Lenis with snap-to-chapter, keyboard paging (arrows, Page Up/Down, Space), a roman-numeral chapter rail and pointer parallax.

Performance and accessibility

• Scrolling never re-renders React: a mutable per-frame store drives the scene, and only coarse state (chapter, config) goes through React.
• All shaders are compiled up front before the loader releases, so the first scroll does not hitch. Device pixel ratio is capped at 1.75.
• prefers-reduced-motion turns off smoothing, snap glides, the camera fly-in, parallax, chromatic aberration and text animations, and slows the escapement; the time-telling hands keep running.
• Chapters are keyboard-navigable and the configurator uses radio semantics. Camera stops have separate desktop and portrait tables, so the watch frames correctly on tablets and phones.

Rebrand it

Chapter copy, stats, metals, dials and exploded-view part names live in one file, lib/watch.ts. Colours are CSS variables in app/globals.css, fonts are set with next/font in app/layout.tsx, and camera stops and poses are plain tables. See the How to use tab for details.

What's in the download

• The complete Next.js source: app/, components/ (scene and UI), lib/ (content, geometry, textures, scroll store) and config files
• scripts/shots.mjs – an optional Playwright capture script for screenshots of each chapter
• Documentation/index.html and README.md, plus START-HERE.txt

MERIDIAN, Équinoxe 41 and Calibre M.01 are fictional; no real brand marks are used. The geometry and textures are original and need no attribution.

Requirements

• Node.js 20.9 or newer and npm
• A WebGL2-capable browser; a dedicated or modern integrated GPU is recommended for the full post-processing chain
• Deploys to Vercel, any Node host, or as a static export

Read how we built MERIDIAN for the design decisions behind the configurator.