Calder Dental is a fictional family and cosmetic practice in Ancoats, Manchester, seeing NHS and private patients. The page is built to convert first and impress second: the hero says the business in two lines, Book and the phone number are the two buttons, and every price is on the page. It opens light (warm white, mint and pale-blue fields, deep ink, one cobalt brand colour) with linen, sky and a dark night on the palette knob. One motion language throughout: entrances power3.out 0.5–0.9 s, state changes and wipes expo.inOut 0.6–1.1 s, scroll-linked pieces ease: 'none' with scrub, Lenis smooth scroll (duration 1.15).
The hero headline rises out of SplitText line masks in under a second, the rating and years count up, and a Next available card offers three real-looking slots computed from today’s date and the opening hours; tapping one fills the booking form (day, time window, treatment, new patient), shows a “Time held” chip and glides down to the form. Below, the clinic-room photo sits in a rounded frame that opens to near full-bleed as you scroll (clip-path: inset() scrub) while the photo settles from 1.16× to 1×.
Treatments are a price list whose rows expand (height:auto) to show a drawn illustration, the 0%-a-month figure and a Book button that preselects that treatment; on desktop a preview card with the illustration, price and duration follows the cursor (gsap.quickTo). The signature piece is Find your shade: a procedural SVG smile (upper and lower arches, scalloped gums, per-tooth enamel gradients from a warmer cervical third to translucent blue-grey incisal edges, side shading and a soft specular highlight) and an ARIA slider along A3.5 → A3 → A2 → B1 → BL2. Each new shade wipes across the teeth left to right with a glint, and the line under it says “Your shade: A3 → B1 in 2 sessions, £295”. It starts at startShade and glides two shades lighter the first time it is seen. The finance calculator, the £59 new-patient band, a pinned four-step “Your first visit” story (booking UI, a calm-welcome chat, a drawn bitewing X-ray and a priced treatment plan, with a progress line and snap), monogram team cards, a velocity-reactive reviews marquee, the nervous-patients block, a map whose streets draw before the walking route and the pin, the FAQ and the booking form complete the page.
Images: ten real photographs (hero consultation, clinic room, whitening mirror, smile close-up, check-up, hygienist, implant, waiting room, X-ray review, lounge) are the main imagery. They are Unsplash demo images for the live preview only, not included in the template, listed with their pages in public/assets/calder-dental-clinic/LICENSE.txt and given one shared warm, soft grade. People appear only as scene photos, never on team cards or reviews. Drawn pieces are extras: the interactive smile, the X-ray inset, treatment drawings where no photo fits, the map and the UI cards. Fonts: Bricolage Grotesque + Figtree (OFL). Phone numbers use the Ofcom drama range (0161 496 0xxx); street, GDC/NMC/CQC numbers, reviews and the slots are samples.
Gotchas: upper teeth are painted one by one (base, wiped-in shade, shading, highlight) so they cover the lower teeth cleanly; the wipe is a clipPath rect animated in user units, and the glint is clipped to the union of the teeth. The map pin is animated on an inner <g> because GSAP would otherwise replace the outer translate(). The story pins only at ≥ 900 × 620 px with a fine layout; below that, and under reduced motion, it is a stacked list. In-page links go through lenis.scrollTo with the sticky header offset. Under reduced motion there is no Lenis, no SplitText, no pin, no marquee (reviews become a grid), counters show final values, the map is drawn and the shade swaps instantly.
medium 
medium 
medium 
medium