Dental clinic · Light

Enamel

A single 3D clinical object, porcelain-white and chrome, follows the entire page over an almost empty ice-colored background: it comes apart into pieces, changes shape with each treatment and ends as the logo in the dark footer.

Palette

--bg#FDFEFE
main background of the content sections
--bg-hero#DFE4EB
top of the hero, ice-blue gradient that lightens to white
--surface#F2F4F8
form panel, chips, team cards
--text#121317
headlines and main text
--text-2#6B7079
paragraphs, captions, statistic labels
--accent#4F67D0
blue keyword in headlines, implant ring, step numbers
--line#E3E6EB
1px thin dividers and input borders
--ink#0F1014
dark footer and black pill buttons

Typography

Display: neo geometric grotesque in a thin weight (300), uppercase for the hero and for the giant manifesto word; slightly negative tracking (-0.02em); hero at clamp(56px, 8vw, 120px), manifesto up to 14vw, cropped by the edge — suggestions: Manrope 300 / General Sans Light (Fontshare)
Body: same family at 400, 15–17px, line-height 1.55, medium gray; section titles at 400 in normal case, clamp(28px, 3.2vw, 44px), two short lines, last word in blue — suggestions: Manrope / Inter
Support/labels: small blue numerals (11px, "01", "02") above each title; 10–11px gray microcopy under the large numbers
Treatments: first hero word in black and the second in light gray; statistics as huge thin numbers (64–80px, weight 200) with a tiny label beside them; giant manifesto word cropped at the top with a phrase in brackets below; final logo where one letter is replaced by the 3D object

Sections

Nav — small logo on the left with a line icon, 4 center links at 12px, black pill button with a white circle and arrow on the right; transparent background over the gradient.
Hero — centered title on 2 lines of thin uppercase; the 3D object rises behind/in front of the second line, taking up ~45% of the height; short phrase in the bottom-left corner.
Anatomy (pin) — text column on the left (title with a blue word + paragraph), object on the right; the object separates into 3 pieces in an exploded view, each piece gets a numbered label with a title and description.
Treatments — pinned sequence: the object morphs into other shapes (thin blade, transparent glass plate), text on the right with a blue label, title, paragraph and a large key number with a caption.
Process — numbered steps alternating sides; the object turns into a blue point cloud at the scanning step and gets a blue ring/halo at the final step.
Manifesto — giant uppercase word cropped at the top, phrase in wide brackets, whole object centered in front; faded paragraph and ghost CTA in the corners.
Team — card with a cut-out photo in rounded corners, name, specialty and license number; row of avatar chips to switch practitioner; pill CTA.
Numbers + testimonials — 3 giant thin numbers in a 3-column grid with dividers; below, a row of stars, a quote and an avatar with initials.
Contact — on the left short text and a 2×2 grid of info (hours, address, WhatsApp, insurance plans); on the right a rounded light-gray panel with pill inputs, groups of selectable chips and a black button.
Footer — near-black background, giant white logo with the 3D object in place of a letter, 3 link columns and legal info at 11px.

Motion and interaction

Persistent object: scroll scrub → a single fixed canvas (position: fixed) with the 3D model that changes position, scale and rotation in each section; Three.js/R3F + GSAP ScrollTrigger, Lenis for smoothing.
Exploded view: scroll scrub with pin (~200% of the viewport) → crown, abutment and screw move apart along the Y axis (±0.6 units) and rotate 15–25°; labels enter with opacity/y.
Treatment morph: scroll scrub → the piece swaps geometry with an opacity and scale crossfade (0.9→1), material goes from porcelain to glass (transmission) in the transparent treatment.
Point cloud: scroll scrub → the crown is replaced by blue particles sampled from the mesh with a horizontal "scanner" line sweeping from top to bottom.
Halo: scroll → a thin blue ring (torus) descends onto the crown and pulses.
Idle rotation + cursor: continuous → slow spin on Y (0.15 rad/s) with a tilt of up to 8° following the mouse, lerp 0.08.
Text: scroll → titles rise 24px with a fade, 700ms, power3.out; the manifesto reveals via clip-path from bottom to top.

Components

Black pill button: 36px height, white 12px text, 22px white circle with an arrow on the right.
Step label: 11px blue number above a 28px title at weight 400.
Metric block: 40–80px number at weight 200 + 10px gray caption on the same baseline.
Avatar chip: white pill with a 24px circular photo and an 11px name; active one gets a soft shadow.
Pill input: white background, 1px --line border, 999px radius, 44px height.
Choice chip group: 28px pills, active one black with white text.
Practitioner card: photo with 16px radius, 18px name, 12px gray title, thin divider.