Bethel Dental Surgery
A calm, trustworthy site for a neighbourhood dental clinic, built on Next.js with an original license-clean canvas hero that scrubs as you scroll.
- Role
- Design + build
- Services
- UI/UX design · Frontend engineering · Content / data modelling · SEO foundations
- Year
- 2026
- Status
- Concept build
Overview
The brief
Healthcare has to earn trust in seconds and say only what is true. Every clinic fact had to be verifiable, the tone had to stay reassuring, and the hero had to feel modern without resorting to stock dentistry imagery.
An independent, unofficial concept. Business facts were researched from public sources; all photography is licensed placeholder imagery. Not the official site.
Approach
How I built it
Wrote a clinic data layer where every fact carries provenance and an owner-confirmation flag, so nothing unverified can reach the page.
Generated an original rotating enamel-arch frame sequence and scrubbed it on a canvas as the page scrolls - the supplied skill-pack videos were rejected for showing copyrighted footage.
Disabled the dental-team section by default until names and registrations can be confirmed against the Singapore Dental Council register.
Set an Enamel and Light identity (Fraunces with Hanken Grotesk, white and burgundy) and shipped JSON-LD for a local dental business.
Key features
What makes it work
- Original, license-clean canvas scroll hero
- Data layer with provenance and confirmation flags
- Team section gated until verified
- Dentist / LocalBusiness structured data
Gallery
A closer look
Build
Under the hood
- Lighthouse desktop 100 / 100 / 100 / 100; mobile 95 / 100 / 100 / 100 (recorded)
- Performance raised from 76 to 95 on mobile; 0 accessibility failures
- Verified across 360 to 1440
Reflection
Looking back
The strongest argument in this set that careful engineering and honesty are a feature, not a constraint. The data-with-provenance pattern is something I now reach for on any business-critical site.