Optician · Dark

Focus

The entire page is out of focus, and only what passes behind the lenses of a pair of 3D glasses turns sharp — the optician sells by letting you see.

Palette

Display: geometric grotesque, weight 700, mixed case, tracking -0.04em, line-height 0.85; word behind the glasses at clamp(6rem,17vw,16rem) — suggestions: Satoshi (Fontshare) / Inter Tight.
Body: same family 500, 13–15px; product titles 22px 500.
Support/labels: grotesque 11px with tabular numbers for the "01/04" counter, frame measurement in the "00□00" style and price.
Treatments: giant blurred word (blur 14px) that only turns sharp inside the lenses; huge number in outline only (stroke 1px) cropped at the bottom-right edge; text inside the lens on 2–3 centered lines.

Nav — two-circle icon + name on the left; 3 links on the right; below, circular previous/next arrows.
Hero — 3D glasses in the center over the giant blurred headline; inside the lenses, the same headline sharp and smaller; short phrase at the bottom left; pill button + long line to a giant outline number in the bottom-right corner; vertical dot indicator on the right.
Frames (carousel) — 4 models; each with its giant name behind it (blurred outside the lens); block at the bottom left with counter, name, description and price; frame measurement on the right.
Lenses (zoom) — the glasses advance until the lens fills the screen; inside, sharp photos (near/far), outside, the same scene blurred and darkened; label + title centered in the lens; lens counter at the bottom.
Sun — blurred, light beach background; polarized green lenses show the scene sharp and darkened; text at the bottom left.
Process — cream background; timeline of "days" with photos scattered asymmetrically; transparent glasses pass through and the lens reveals each photo sharply.
Closing — blurred headline with sharp lenses; the 3D case enters, closes and the page darkens into the footer.

Focus through the lens: continuous → refraction shader (raymarching or two layers: blurred DOM + sharp render masked to the lenses); the lens magnifies 1.08× and distorts the edges.
Glasses follow the cursor: cursor → rotateY ±18°, rotateX ±10°, position ±4vw with damping 0.06.
Carousel: click/scroll → current model rotates 90° and exits, next one enters; giant word swaps with blur.
Lens zoom: scroll scrub → camera advances until the lens fills the viewport.
Process: scroll scrub → glasses slide horizontally; photos have blur 10px outside the lens.
Case: scroll scrub → lid closes (rotateX), page darkens.
Tech: Three.js/R3F + GLSL shader, GSAP ScrollTrigger, Lenis.

32px circular button with an arrow, 1px --linha border (inactive at 40% opacity).
White outline pill CTA 11px with a 1px horizontal line that extends to the outline number.
Vertical dot indicator: 4 dots of 5px, active one becomes a 9px ring.
Product block: "01/04" counter (01 white, /04 gray), 22px name, 11px description, 12px price.
Process photo card: rectangle with no radius, "Day N" label 14px + 10px phrase below.
Lens window: circular/rounded mask with sharp content and centered text.