LUMIDENT – Immersive 3D Dental Clinic Website Template (Next.js, React Three Fiber)

LUMIDENT is a scroll-driven 3D landing page template for dental clinics, built with Next.js 16, React Three Fiber and three.js. A calm, clinical-luxury page in paper white and mint tells the story of a fictional practice, LUMIDENT Dental Studio, in twelve chapters, and each chapter has its own live 3D moment. Every tooth, gum and bone block is generated in code, so there are no models, textures or image files to license or replace.

Try the live demo (button above) or watch the video tour, then step through the screenshots at desktop, tablet and phone sizes.

The scroll story

Each treatment moment starts when its chapter settles and has a Replay button. Lenis smooth scrolling snaps to the nearest chapter, and the camera flies a centripetal Catmull-Rom path through per-chapter stops, with separate tables for desktop and portrait screens.

How the 3D is made

• Procedural teeth. Molar, incisor, canine and premolar are signed-distance fields (cusps, ridges, fissures and fluted roots) meshed by a narrow-band marching-cubes mesher that bakes normals, ambient occlusion and a crown/root mask. The 17 mesh jobs run in a Web Worker pool while the loader shows real progress.
• Layered materials. Translucent physical-material enamel over a dentin core, with one shader patch for a noise dissolve with a mint edge glow, fissure staining, the gum gradient and bone pores on cut faces. Sections use clipping planes with capped faces so solids read as filled.
• Post-processing. Soft bloom, velocity-based chromatic aberration, neutral tone mapping, film grain and a light vignette.

Performance, accessibility and responsiveness

• Device pixel ratio is capped at 1.75 and the scene is one canvas behind the HTML copy, which stays in the page for search engines and screen readers.
• prefers-reduced-motion turns off smooth scrolling, snap animation, idle spin, drift, autoplay and text animation; treatment moments jump to their final state.
• Layouts and camera stops are tuned for desktop, tablet and phone.
• The booking dialog uses labelled controls, a listbox of days and pressed-state treatment chips.

Rebrand in minutes

• Clinic details: lib/clinic.ts holds the name, tagline, phone, address, time zone, opening hours, services, team, testimonials and booking rules.
• Colours: six theme tokens in the same file (paper, ink, accent, accentDeep, accentSoft, gum) are injected as CSS custom properties and read by the 3D materials, so one edit recolours the page and the scene.
• Copy: chapter kickers, titles, anatomy labels and the shade ladder live in lib/chapters.ts.
• Fonts: Instrument Serif, Manrope and Geist Mono, set in app/layout.tsx.
• Bookings: the dialog confirms locally and offers an .ics download; nothing is sent. Replace one onSubmit handler to connect your booking system.

What's in the download

• The full Next.js project source (App Router, TypeScript)
• Documentation/index.html, generated from the README, and START-HERE.txt
• No third-party models or textures: all 3D geometry is generated in code

Requirements

• Node.js 20.9 or newer and npm
• A browser with WebGL 2
• No environment variables, API keys or database

LUMIDENT Dental Studio is fictional. Every name, phone number, review and team member is placeholder content, and the treatment text is general information, not medical advice. Replace it with your own reviewed copy. Read how we built LUMIDENT for the design decisions behind the procedural anatomy.