How this site was built

1 · The concept: the anti-clinical clinic

Dental websites default to two failure modes: sterile (blue gradients, stock teeth, fear) or childish (cartoon molars with faces). The design brief here was a third path — the anti-clinical clinic: light, warm, genuinely friendly, but adult.

Every decision follows from one question: "would this calm down a nervous patient?" That's why the palette is warm instead of hospital-blue, why the geometry is rounded instead of sharp, why the motion is soft and springy instead of snappy, and why the copy sounds like a person ("Words we didn't pay for") instead of a brochure ("Excellence in dental care").

• Warmth is structural, not decorative. The background is warm cream (#FBF6EE), not white — the whole page sits in "afternoon light" before a single image loads.
• Rounded but adult. Squircle-ish cards (28–48px radii), pill buttons, an arc motif — but a disciplined grid, tight editorial type, and real information density keep it from tipping into nursery territory.
• Anxiety is addressed head-on. The dark-green "no-anxiety" section is the emotional core of the page — it names the fear and answers it with three concrete mechanisms (comfort menu, transparent pricing, gentle tech).

2 · Palette

Warm white base, eucalyptus green as the trustworthy anchor, peach/apricot as the friendly accent, charcoal for text. The rule: mint and peach are accents only — body text is always charcoal on cream/white (passes WCAG AA at 16px; #26262C on #FBF6EE is ~13.6:1).

3 · Typography

Scale: hero clamp(42px, 5.8vw, 76px), section heads clamp(32px, 4.6vw, 52px), body 16px/1.6. Letter-spacing on display is -.015em — big friendly type still needs tightening or it drifts apart.

4 · Imagery: art direction

All photography was generated via the Higgsfield MCP — portraits on soul_2 (natural skin, editorial light), interiors/product on nano_banana_pro. Each of the seven images came from a carefully art-directed brief — lighting, lens, palette, composition and mood specified per shot, with one warm editorial grade repeated across all of them so seven separate generations feel like one photoshoot — then iterated until every frame felt calm rather than clinical. The full prompt library is proprietary to the studio and available to clients on request.

5 · Motion system

GSAP 3 + ScrollTrigger from CDN. The rule for a calm brand: nothing snaps. Everything eases with a gentle overshoot — back.out(1.4) — which reads as "springy but reassuring."

The signature: a self-drawing smile arc

The recurring motif is an SVG arc (a smile) that draws itself as you scroll past it, with a dot riding the curve. Classic dash-offset technique, scrubbed:

const len = path.getTotalLength();
path.style.strokeDasharray  = len;
path.style.strokeDashoffset = len;          // fully hidden

gsap.timeline({
  scrollTrigger: { trigger: svg, start: 'top 92%',
                   end: 'top 45%', scrub: .6 }
})
.to(path, { strokeDashoffset: 0, ease: 'none' }, 0)
// dot rides the arc:
.to(proxy, { t: 1, ease: 'none', onUpdate: () => {
    const p = path.getPointAtLength(len * proxy.t);
    dot.setAttribute('cx', p.x); dot.setAttribute('cy', p.y);
}}, 0);

The same arc appears four ways: under the word "smiling" in the hero (time-based draw on load), as two scroll-scrubbed section dividers, ghosted large behind the booking CTA, and in the logo mark. Repetition is what turns a shape into a brand.

Everything else

• Reveals: every [data-rv] element does y: 28 → 0 with back.out(1.4), triggered once at top 88%.
• Hero parallax: the two floating info cards get an idle sine-wave bob plus opposite-direction yPercent scrub; the hero photo scales to 1.06 as it leaves. Three layers moving at different rates = depth without gimmick.
• Slider physics: the before/after handle doesn't jump to the pointer — it chases it with pct += (target - pct) * .18 per frame. That tiny lag is what makes it feel like a real object. It also auto-nudges once when scrolled into view so users discover it's draggable, and supports arrow keys + role="slider" for keyboard users.
• Hovers: cards lift with the same spring ease; service icons scale & tilt -4deg; a soft radial color bloom fades in from the card's bottom edge.
• Respect: everything checks prefers-reduced-motion and falls back to static, visible content.

6 · Layout & geometry notes

• Radius scale: chips/buttons 999px (pills), small cards 22–28px, feature cards 32–36px, section shells 44–56px. Bigger element → bigger radius keeps the "superellipse" feel consistent.
• The floating pill nav is fixed, backdrop-blurred, and detached from the page edge — it reads as an object in the room, not chrome.
• Bleed safety: hero blobs and floating cards intentionally overhang; overflow-x: clip on html, body (plus overflow: clip on the hero) guarantees no horizontal scrollbar at any width.
• Responsive: 4-col services → 2 → 1; hero goes single-column under 860px with the visual capped at 520px; the nav collapses to a pill hamburger with a floating card menu.

7 · Ship it (Netlify)

It's a static folder — no build step. Two ways:

Drag & drop

1. Go to app.netlify.com/drop.
2. Drag the brightside-dental/ folder onto the page. Done — you get a live URL in seconds.

CLI

npm i -g netlify-cli
cd brightside-dental
netlify deploy --prod --dir .

Checklist before deploying: images compressed (each under ~350 KB here), <title> and meta description set, favicon inline (no extra request), fonts limited to two families with explicit weights.