Websites · 2026
VESNA
A perfume house told as one unbroken macro shot — 601 frames, decoded live as you scroll.
VESNA is our proof that a website can be cinema. One continuous camera move — from inside a dew drop to the bottle on black marble — scrubbed by scroll at film quality, on an engine we wrote ourselves.
Client
Fictional perfume house · real engineering
Status
Complete
Role
Concept & art direction · AI footage direction · Film engine · Full site build
The numbers.
Every figure here lives in a repository.
- 601
- frames at 24 fps — one continuous shot, five chapters
- 4
- renditions: AV1 & H.264 × 1080p/720p, GOP 12, per-packet byte index
- ≥ 0.88
- SSIM gate on every clip junction — each clip starts from the last frame of the previous
- 321
- JPEG fallback frames for browsers without WebCodecs
- 1.5
- DPR cap + perf-lite mode for software rendering
The brief.
Perfume marketing sells a feeling; most perfume websites sell a grid. We wanted the feeling: a whole meadow compressed into a single drop, and a visitor who falls through it.
No off-the-shelf player scrubs 1080p film by scroll without jank — so the engine decodes video packets in a worker, renders on an OffscreenCanvas, and the main thread only reports where you are.
What we built.
Shown as it really renders — no mockups.
Five chapters, one move
The Drop → The Passage → The Rain → The Essence → The Bottle. Each AI-generated clip begins on the literal last frame of the previous one, verified by SSIM before assembly.
A brand below the film
Collection of four fragrances (Dawn, Bloom, Dusk, Night — one meadow, four times of day), manifesto, ingredients marquee — the film hands off into a page that can sell.
A film engine, not a video tag
WebCodecs VideoDecoder in a dedicated worker slices exact packets from a progressively fetched buffer, decodes whole GOPs — or keyframes only during fast flings — and keeps an LRU of decoded frames.
Verified smoothness
A puppeteer harness scrubs and flings the page and fails the build if frame times spike — smoothness is tested, not hoped for.
More of the work.
Finale — the bottle on black marble as a golden thread of essence pours in
Role
- Concept & art direction
- AI footage direction
- Film engine
- Full site build
Stack
- Next.js 16 · React 19
- WebCodecs in a worker
- OffscreenCanvas
- AV1 + H.264 ladder
- Lenis
- Tailwind CSS 4
- Higgsfield Seedance footage
Worth knowing
- Footage directed shot-by-shot in Higgsfield Seedance from our storyboard; a full art-direction bible governs palette, light and type.
- The brand is fictional by design — it exists so the engineering can be public.