Three.js · live
Floor 03 / 05 — Case study
Private dentistry · Pontcanna, Cardiff
Opal Dental
A private dental practice on Cathedral Road in Cardiff, and a site that makes patients feel at ease before they walk in. The logo is a real 3D opal that assembles itself from gold dust, every clinician stands in front of their own living opal, and the practice edits its fees and treatments from a dashboard of its own.
Recorded from the Opal homepage1920 × 1080 · Three.js, live
(01) — Overview
Calm, clear and unmistakably Opal.
Dental anxiety is real, and most practice websites make it worse with jargon, hidden prices and stock photos. This one explains every treatment in plain language, publishes its fees, shows the real team and ends every page with the same easy next step.
The brand is the name taken literally. Oxblood, ivory and gold, an editorial serif, a gold line illustration for every treatment, and an opal that plays with colour wherever it appears: in the logo, behind the team and across the hero light.
- Treatments12, in three groups
- Google5.0 · 246 reviews
- Working Feedback98% · 718 reviews
- Logo particles4,800
- FrameworkNext.js 16
(02) — The logo, in three dimensions
A logo that arrives.
The practice's gold tooth logo was traced to vector shapes and set in raised gold into the face of a domed opal, rendered live in Three.js on every visit to the homepage.
- 0.0s
Gold gathers
4,800 particles (2,400 on phones) pull together as the stone scales and turns in.
- 2.1s
The tooth springs in
Raised gold with a back-ease, then O-P-A-L and D-E-N-T-A-L pop in letter by letter.
- 2.9s
Satellites drift
Pearl teeth, small opals and gold beads, with gold dust in the air.
- Every 9s
A gleam sweeps
A point light crosses the gold, and the whole piece leans toward your cursor.
- 01
Play of colour, in a shader
The opal's fire is a custom material: blush, lavender, pale blue and champagne flashes that shift with the angle, set in a gold bezel.
- 02
Silk light behind it
The hero glow is its own full-screen fragment shader at half resolution: folds of light on deep garnet with a gold and pearl sheen.
- 03
Never in the way
The scene loads on idle after the page has painted, turns and lifts away as you scroll, and shows a still final pose if you prefer reduced motion.
- 04
Made from the real mark
A script traces the gold master artwork to vector shapes, so the 3D logo matches the printed one exactly.
(03) — The team
Everyone gets their own opal.
Each clinician stands in front of a milky, living opal backdrop lit from behind the head. A gleam sweeps each card every nine seconds, staggered along the team; on a desktop, light gathers wherever your cursor rests.
WebGL · hover
One GPU context, every card.
Browsers limit how many WebGL contexts a page can hold, so one shared renderer draws every backdrop and copies each frame into its card's own canvas. Cards unveil from the foot up as they scroll into view.
9:41
The team page on a phone.
(04) — The whole homepage, scrubbed by your scroll
The welcome
Care that makes time for you.
A promise, a 5.0 Google rating and "Book a visit", all in view from the first second.
The practical strip
Address, status, reviews, phone.
New private patients welcome, and the NHS position stated plainly rather than buried.
The directory
Care, explained clearly.
Twelve treatments in three groups, each with its own gold illustration and a sticky detail panel on desktop.
The approach
Good dentistry begins with listening.
Told by the principal dentist, with parallax photography.
The people
The real team.
Every clinician and nurse, each in front of their own opal.
The proof
Reviews, live.
A reviews carousel fed by the practice's review provider, refreshed hourly with graceful fallbacks.
Hover
A directory that explains itself.
Hover or focus a treatment and the detail panel updates with what it's for, in the practice's own calm voice. The same list drives the menus, the treatments hub and the homepage.
9:41
The homepage on a phone.
(05) — Finding the practice
A map that flies in.
Most practice sites embed Google Maps: a grey box, a cookie banner and somebody else's styling. Opal's map is drawn from OpenStreetMap data in the practice's own palette, and it arrives the way the logo does. It starts tilted over the city like a view from the air, settles flat on Cathedral Road, draws the walk from Cardiff Castle and drops a pin on the door.
- 0.0s
Over the city
Tilted 56° and turned, it glides down over 3.4 seconds and settles flat on the practice.
- 2.9s
The walk draws
1.2 km from Cardiff Castle, over the Taff: about 15 minutes on foot.
- 3.3s
A pin drops
It lands with a bounce, and the name card rises beside it.
- 4.0s
A pulse, every 3.2s
A soft ring keeps marking the door while the map is on screen.
9:41
The same map, framed for a phone.
- 01
Drawn, not embedded
A build script turns OpenStreetMap data into one SVG in the brand's cream, sage and garnet, plus the route, labels and the practice's position in map metres.
- 02
No key, no cookie
No Google script, no API key and nothing to consent to. "Get directions" hands off to Google Maps only when a patient asks.
- 03
One variable scales the world
Everything is placed in metres and a single
--ppm(pixels per metre) fits it to the frame, so the pin stays on the door at any width. - 04
Still, if you prefer
With reduced motion, or without JavaScript, the map simply shows its final state: route drawn, pin down.
(06) — The practice's own dashboard
Change a fee without calling anyone.
Fees and treatments are structured content the practice edits itself. Every save is validated, published straight away and backed up, so a mistake is always one step from undone. Shown here signed in with a demo login.
Sign in
scrypt-hashed passwords, a signed session cookie that lasts eight hours, and a fifteen-minute lockout after five wrong attempts.
Welcome back
Two jobs: fees and treatments. Saves appear on the site straight away, and the previous version is kept every time.
Fee guide
Every fee with an optional note, a "from" switch and a homepage switch. Changing a price re-dates the fee guide to the current month.
Fees, continued
Hygiene, cosmetic, restorative and more, reorderable, with up to six picked for the homepage.
Treatment directory
The list patients see under Maintain, Enhance and Restore: reorder, show or hide, edit a line or its whole page.
Enhance & Restore
Add a new treatment and its page in one go, or link a row to an existing page.
Page editor
Title, short name, group, introduction, "at a glance" first step, and the search engine title and description.
Illustrations
Pick from the practice's own set of gold line illustrations, so new pages match the existing ones.
Page sections
Headings, paragraphs and bullet points in plain boxes, validated against a schema before anything is published.
Real dashboard · demo login · practice content
(07) — How it's put together
Content first, pages second.
Treatments, fees, the team and practice details are structured content. Next.js turns them into pages, menus and the homepage directory, and the admin writes the same content back through server actions. Hover or tap a node.
Swipe the diagram sideways to see all of it →
(08) — Behind the calm
Quiet on the surface, structured underneath.
- 01
A private build by default
Builds are noindex previews unless production is switched on explicitly, so a staging copy can never outrank the real site.
- 02
A map in the brand's colours
The location map is a custom OpenStreetMap render in the practice palette, served as a single SVG.
- 03
Seventeen illustrations
A consistent gold line style across treatments and practice pages, exported at every size the site needs.
- 04
Tested both ways
Unit tests with Vitest, end-to-end tests with Playwright, and a screenshot script for visual review at every width.
- 05
Honest booking
Phone, email and the patient portal, with opening hours beside them. The phone number and "Book a visit" follow you down every page.
- 06
Trust pages as pages
Accessibility statement, complaints procedure, privacy and cookies, all readable and linkable rather than PDFs.
Next floor · 04Going up ↑
Fate or Fortune