Lumen Dental: a concept clinic site that books visits

This is a concept project. Lumen Dental is a fictional brand, and every figure, review and address on the site is illustrative. I built it as a product a real clinic could buy, not as a case study of work already delivered.

Most clinic websites are a phone number and a contact form. The visit still gets booked by a person answering a call. I wanted to see how far a small practice site could go before anyone picks up the phone.

A visitor picks a treatment, a clinic, a day and a time, and leaves with a booking reference, an SMS and email confirmation and a calendar file. Five steps, no back and forth. For anyone who would rather talk, an assistant panel sits in the corner, built to run a live browser call through Vapi with the same booking behind it.

The hero tooth turns with the pointer, and in the explainer section it comes apart layer by layer as you scroll: the veneer lifts away, the enamel rises, the dentine opens, the roots drop. It looks like WebGL, but there is no 3D engine on the page.

Each of those is an AI-generated video cut into webp frames and drawn on a canvas. Seeking a frame is instant, while setting currentTime on a video element stutters in most browsers. A code-built version of the same tooth looked synthetic next to it, which is why this approach won.

The before-and-after photos work the same way: move the pointer across the image and the result follows it, with no slider handle to drag.

Every clinic-specific thing lives in one config.json: brand, colours, treatments, prices, clinics, opening hours, reviews, FAQ. The HTML holds structure only. Adding ?city=nyc loads a second config, and the same site becomes a Manhattan and Brooklyn practice with dollars, US phone numbers and an insurance question instead of a state-cover one.

Booking and voice are adapters rather than hard-wired integrations: demo mode out of the box, Cal.com or a webhook (an n8n workflow writing to Google Calendar) for real bookings, and Vapi for a real assistant. It works with no accounts, and connects to real ones without touching the markup.

Fonts are self-hosted and cut down to the weight ranges actually in use. The script setup waits for the first paint so the hero image is not held up by animation code. Sequences load their key frames first and pause off screen. Reduced-motion visitors get the tooth still, the anatomy already separated and the result shown rather than scrubbed. The booking modal traps focus, closes on Escape and labels every field. There is a cookie banner, because this is the EU, and analytics stay off until someone agrees to them.

Static files, no build step.