01Client
VESPER
02Timeline
Self-initiated, shipped in slices
03Tech Stack
Next.js, React, TypeScript +3 more
04Live Site
Visit →00In Brief
What
A scroll-choreographed brand page for a fictional fragrance house: a pinned WebGL hero whose shader intensity and wordmark tracking resolve on one scrub timeline, clip-path story lines, and a greyscale-to-colour product bloom. LAB-02, the first of the Lab’s two WebGL concepts.
What was hard
Scroll cinema is where motion sites go to die on Lighthouse. The piece had to earn the plume — domain-warped fbm noise reacting to pointer and pin progress — without shipping a byte of three.js to phones, tablets, or anyone who asked the OS for reduced motion.
How
The WebGL mounts through a double gate: one matchMedia list (viewport, pointer type, reduced motion) decides poster versus canvas, then requestIdleCallback holds the chunk until the browser is idle so the SSR hero text owns first paint. The shader’s scrub progress is a shared singleton written by one ScrollTrigger pin — the same timeline that resolves the wordmark’s letter-spacing, so the whole entry reads as one gesture.
Result
Live at /lab/vesper inside the studio site: a five-beat scroll world in the studio’s Geist type with its own nocturne palette, reduced-motion complete, and honest on every surface — the product does not exist and the page says so.
01The Challenge
Prove the studio’s scroll-choreography range on a brand world that looks nothing like GoSmartR — without a fragrance client on the books, and without the dishonesty of pretending one exists. VESPER is fictional and says so on every surface. The technical bar: a live WebGL hero and a pinned scroll entry that cost phones and reduced-motion users nothing.
The Design
02The Approach
One page, five beats — pinned hero, product reveal, story lines, outro — in a scoped nocturne world: near-black ground, stone greys, and an ember highlight that lives only inside the shader. The plume is domain-warped value-noise (fbm of fbm of fbm) with no textures, eased pointer input, and a scrub uniform driven by the same GSAP timeline that resolves the wordmark tracking. The chunk is triple-gated — viewport, pointer, motion preference — then idle-deferred so the SSR-rendered display type owns the LCP. Type stays on the studio’s Geist system; the concept’s voice is scale and tracking, not a different face.
The Solution
01
One-Gesture Entry
The hero pins for a short scrub in which the shader brightens, the cool wash lifts, and the wordmark’s letter-spacing resolves from tight to monumental — one timeline, two mediums, no competing motion.
02
A Plume With a Budget
Domain-warped fbm noise in a single full-quad fragment shader — no textures, DPR capped at 1.75, antialias off, frameloop "never" off-screen. The whole scene is one draw call.
03
Poster-First Honesty
Mobile, touch, and reduced-motion visitors get a hand-tuned CSS poster of the same composition — radial indigo, ember pool, SVG grain — that ships zero WebGL and still reads as the brand.
Next case · 16 of 16
MERIDIAN
Luxury horology · 2026
