DEV3 Technologies · own product
Our own Next.js template for a fictional watch maison: an eight-chapter scroll story around one real-time watch built entirely in code, with live local time, an exploded view, a beating calibre, glowing lume and a metal and dial configurator.
Équinoxe 41 reveal — a real-time 3D wristwatch from the fictional MERIDIAN maison turns in warm studio light.
Luxury product pages usually rely on studio photography or pre-rendered turntables, which look good but cannot react to the visitor. Real-time 3D can, but it often arrives as a heavy model file with licensing questions, plastic-looking materials and a configurator that stutters every time a material changes. We wanted a template that holds up to a watch lover's eye at close range, tells the product's story chapter by chapter, lets the buyer change metal and dial without a frame drop, and still behaves on phones and for visitors who prefer reduced motion.
We built MERIDIAN on Next.js 16 and React Three Fiber 9, with three.js r187, postprocessing and Lenis.
lib/geometry.ts. Dial print, perlage, Côtes de Genève and the caseback engraving are canvas textures from lib/textures.ts. Nothing needs a third-party licence.morphMaterials() lerps colour and roughness on one shared set of MeshPhysicalMaterials each frame toward the chosen metal and dial.lib/journey.ts; samplePose() eases rotation, explode, lume, bracelet and studio intensity with smootherstep. React only hears about chapter and configuration changes through useSyncExternalStore.MERIDIAN ships as a complete Next.js project of about 2,700 lines of TypeScript across the scene, UI and content files, with eight chapters, three metals, four dials and a seven-part exploded view, and no binary assets beyond the favicon.
It passes tsc --noEmit and ESLint, builds as a normal Next.js app or as a static export, and the hosted live demo is that static export. Screenshots and video tours were captured from the running template at desktop, tablet and phone sizes with the included Playwright script.
MERIDIAN is available on the DEV3 marketplace.
npm install.npm run dev, then open the address it prints in your browser. The dev script uses port 3210; change -p 3210 in package.json if that port is taken.Documentation/index.html (open it in a browser) and README.md describe the architecture in more detail.
npx tsc --noEmit – type-check the projectnpm run lint – run ESLintnpm run build then npm start – a production build served by NodePush the folder to a Git repository and import it in Vercel. The defaults for a Next.js project work as-is: build command npm run build, no environment variables.
MERIDIAN has no server code, so it can be exported to plain HTML, CSS and JavaScript:
DEMO_EXPORT_BASE to the path the site will live under, for example DEMO_EXPORT_BASE=/watch npm run build. The build:demo script in package.json is an example of this.out/ folder to any static host or CDN (Netlify, Cloudflare Pages, S3, nginx).To serve the export from a domain root, edit next.config.ts and remove basePath and assetPrefix from the export branch. NEXT_PUBLIC_DEMO_DOWNLOAD_URL is only used by the hosted demo's badge; leave it unset and the badge does not render.
Download the new version from Account → Downloads on dev3.tech. Keep your edits to lib/watch.ts, app/globals.css and any components you changed, and merge them into the new files.
All content is in lib/watch.ts:
MODEL is the product name shown in the HUD and dialog.CHAPTERS holds each chapter's kicker, title, tagline and optional stats pairs. The stat values live:time and live:zone are replaced with the visitor's local time and time zone.PARTS lists the seven exploded-view callouts in assembly order (name and sub-line).CH maps chapter ids to indexes; keep it in step if you add or remove chapters.The booking dialog's boutique list and confirmation text are in components/ui/Booking.tsx. The dialog confirms locally and sends nothing: connect its submit handler to your CRM, email service or form endpoint.
METALS and DIALS in lib/watch.ts define the swatches. Each metal has a display name, a sub-line, a color, polish and brush roughness values and a swatch colour; each dial has a color, a print colour for the numerals and logo, and a swatch. Add or remove entries and update the MetalId and DialId types. The scene morphs the shared materials toward the selection every frame, so new options need no extra materials.
POSES in lib/journey.ts sets, per chapter, the watch rotation, explode (0–1), lume (0–1), open (bracelet laid flat) and env (studio light intensity).components/scene/CameraRig.tsx has one camera stop per chapter, in a DESKTOP table and a PORTRAIT table used below an aspect ratio of 0.9.CHAPTERS, POSES and both camera tables.The watch is procedural: geometry in lib/geometry.ts, textures in lib/textures.ts, assembly in components/scene/Watch.tsx and materials in components/scene/materials.ts. To show your own product, load a GLB with three.js's GLTFLoader (or drei's useGLTF if you add it) inside Watch.tsx and assign the shared materials from createMaterials() to its meshes, so the configurator keeps working. Use models you have the rights to and credit them as their licence requires.
app/globals.css: --bg, --fg, --dim, --gold (accent) and --lume (after-dark accent). The 3D background colour is set in components/scene/Experience.tsx.next/font/google in app/layout.tsx: Cormorant Garamond for display, Cormorant SC for small caps and Jost for body text. Replace them with any Google or local font and keep the --font-display, --font-caps and --font-sans variables.components/scene/Studio.tsx.components/scene/Experience.tsx. Lower the bloom intensity or remove effects for a lighter build; the device pixel ratio is capped at 1.75 there.Reduced motion is detected in components/Journey.tsx and stored as journey.reducedMotion. Keep that check in any animation you add. Chapters can be reached from the keyboard and the chapter rail, and the configurator swatches are radio buttons with labels.
DEV3 Technologies · own product · Entertainment & creative (web templates)
Our own Next.js template: an eight-chapter WebGL journey from orbit to an alien valley, built entirely from GLSL noise and instanced primitives, with day-to-night light moods, animated creatures and an interactive finale.
DEV3 Technologies · own product · Healthcare – dental clinics (Next.js template)
Our own Next.js template for dental clinics: a twelve-chapter scroll story where every tooth, gum and bone block is a signed-distance field meshed in the browser, with treatment animations, live opening hours and a booking dialog.
DEV3 Technologies · own product · Food & beverage (web template)
Our own Next.js and React Three Fiber template for a fictional energy drink: a procedural can, a shader-driven liquid wipe between flavours, cursor-following lightning and eight scroll chapters, with no 3D model or image downloads.
