A Coffee Brand Where Every Scroll Is a Cinematic Shot
VOLCANO is a single-origin volcanic-soil coffee brand — and its website is a continuous cinematic film. 601 AI-generated frames scrubbed at 60fps as you scroll, built on a custom canvas engine and deployed on Vercel.
The Challenge
Premium coffee brands compete on story, not specs. VOLCANO needed a website that didn't just describe the brand — it needed to make visitors feel the volcanic soil, the slow roast, the first pour:
- ✕Standard product pages can't convey the terroir story — volcanic soil, 1,800m altitude, slow-ripened cherries
- ✕Stock photos and video loops feel generic — the brand needed a unique visual language that no competitor could copy
- ✕The scroll experience had to feel cinematic — not like reading a brochure, but like watching a film unfold
- ✕Performance had to stay buttery-smooth despite hundreds of high-resolution frames and complex canvas rendering
- ✕The brand narrative had to flow naturally — from volcanic origin through roasting to the final cup, without feeling forced
The Solution
NextEra AI built VOLCANO as a scroll-film — the entire page is one continuous cinematic shot. Every scroll position maps to a specific frame, creating a film-like narrative that unfolds as the visitor explores:
601-Frame Scroll Film
1280×720 master, 601 frames at ~25s silent. Every scroll position maps to a specific frame — no cuts, no transitions, pure cinematic flow from crater to cup. Continuity-verified (SSIM 0.42–0.59 junction gates, median 0.65).
Zero-Dependency Canvas Engine
Self-contained HTML canvas scrubber — no frameworks, no video tag. Lerped playhead (0.14), ImageBitmap sliding window (48 ahead / 32 behind), concurrency-10 loader, DPR cap 1.0, p95 jank under 50ms.
AI Video Pipeline
6 AI keyframes (¥1.32) + 5 motion clips (¥30) generated via Seedream v5 and Seedance 2.0 — then assembled into 601 frames. Total production cost under $5.
5 Cinematic Chapters
I Origin → II Ember → III Fire → IV Bloom → V The Cup. Each chapter marks a stage of the coffee's journey — volcanic soil, roasting embers, fire, pour-over bloom, final cup.
Cinematic Design System
Basalt black (#0E0B09) page, ember orange (#E85D26) accents, Fraunces display type + Space Grotesk UI. Ambient ember particles over the first 7% of the film, grain+vignette fade into the after-film sections.
Lean Vercel Deploy
Deployed as index.html + 601 frames only — no raw clips or keyframes (100MB+). Edge-cached for instant frame delivery. Accessibility: prefers-reduced-motion skips particles.
Key Capabilities
What's Under the Hood
Experience VOLCANO — Scroll to Watch the Film
Open the site and scroll slowly — watch the coffee cherry emerge from volcanic rock, beans roast in embers, fire erupts around the cup, water blooms through the grounds, and finally the perfect pour. Every frame is AI-generated.
Want a Website That Tells a Story?
Whether you're a coffee brand, a luxury product, or any story that deserves to be felt — let's build something that moves people before they read a single word.