A page built to feel like the finish it's selling

1 · One pointer variable driving two surfaces

A single CSS custom property, --mx, holds the pointer's horizontal position across the hero as a 0–100 number. Everything about the sweep — the light band on the photo and the gradient inside the headline text — reads from that one value, so both surfaces move in lockstep with a few lines of JS.

/* the moving specular band across the photo */
.gloss-sweep{
  position: absolute; left: calc(var(--mx, 32) * 1% - 22%);
  background: linear-gradient(100deg, transparent 30%, rgba(217,205,184,.42) 48%,
    rgba(255,255,255,.5) 52%, rgba(217,205,184,.42) 56%, transparent 78%);
  transform: skewX(-14deg);
  mix-blend-mode: overlay;
}

2 · Headline as brushed metal

The <h1> has no fill color of its own — it's transparent, with a champagne-to-white-to-champagne gradient clipped to the letterforms via background-clip: text. The gradient's position is also driven by --mx, so the same light band that crosses the photo appears to pass through the type a beat later, like an emboss catching the sun.

.hero h1{
  background: linear-gradient(100deg, var(--champagne) 0%, #fff 12%, …);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

3 · Three motion states, one signature

A pointer-capable device tracks the mouse in real time via pointermove, throttled through requestAnimationFrame so it never fights the browser's paint cycle. A touch device — which has no cursor to track — instead runs a slow, sine-based ambient loop so the sweep still breathes, just on its own schedule. Under prefers-reduced-motion, the whole thing resolves to one fixed, pleasant position: a static sheen, no motion at all.

// touch: gentle ambient sweep, no pointer required
var wave = (Math.sin(t * Math.PI * 2 - Math.PI / 2) + 1) / 2;
setMx(15 + wave * 70);

4 · Guarding the flourish

The sweep lives entirely behind the call-to-action layer — it never displaces the phone button, the quote CTA, or the trust strip, all of which sit at fixed positions in front of it with z-index stacking that keeps interaction targets untouched no matter where the light currently sits.

5 · Art-directed photography

The hero photo carries a two-layer scrim — a diagonal near-black gradient for headline contrast, with a thin violet undertone bleeding in from the right so the palette's one accent color shows up even in the photo treatment, not just the UI. The ceramic-coating macro shot is lazy-loaded and framed with a simple caption, so it reads as evidence, not decoration.