W-02 Case study · Clarity

Precision had to be visible, not asserted.

A clinical, laser-led aesthetics practice. The technology explains itself on the first screen.

Medical aesthetics Five primary routes Vite 6, GSAP, Lenis, OGL Live

02 The capture

Open it and check the claim.

A pale clinical grid with faint green concentric scan rings, above a row reading 1064 nm, 755 nm, 532 nm, IPL, CO2.
Live capture of clarity-laser.vercel.app, 21 September 2026
Host clarity-laser.vercel.app, resolving 21 September 2026.
Hero line “Precision is the treatment.”
Front end Fifteen JavaScript modules, roughly 77KB.
Posture Hardened response headers, checkable from outside.

Open the live site

03 Brief and build

A device page wearing a clinic.

The brief

Aesthetics marketing sells a feeling. This had to sell a calibration.

The reader is comparing devices, not just clinics. So the first screen carries the wavelengths, medical supervision, and a plain statement that individual results vary.

What we built

A galvanometer laser, drawn live in WebGL, behind the headline.

An effect, not a looped clip, named for the mirrors that steer a real beam.

04 What shipped

Fifteen modules, itemised.

15 JavaScript modules
77KB Their approximate total weight
5 Primary routes in the capture
  • HeroA WebGL galvo laser on canvas, own render loop.
  • PointerCustom cursor and magnetic buttons, every route.
  • EntryA preloader, so the first frame is finished.
  • ReadingScroll progress, with Lenis smoothing the scroll.
  • ConsentConsent gating in the module set, not a third-party banner.
  • ContactA chat surface and a validated inquiry form.
  • HeadersHardened response headers, verifiable from outside the build.
  • SpecificationWavelengths and supervision stated in the first screen.

05 At phone width

The spec row survives the crop.

The wavelength row is the first thing a responsive build drops. At 390px it is still there, wrapped to two lines, above the fold.

The headline wrapped to two lines, two stacked buttons, the wavelength row beneath them.
Live capture, 390px viewport, 21 September 2026

06 Checkable today

The host resolves, and the headers read from outside.

Open clarity-laser.vercel.app

Aerospace Climate Next case, W-03

All work Request a free quote