Véspera

Overview

Véspera is a fictional wine from the granite hills of Dão, built around one idea - the hour before dark - and three wines named after hours of the same day. Instead of a product page, the site is a single camera journey through nine acts: the land, the vine, the inside of a grape, the cellar, the bottle, the pour, the landscape, tasting, and the night. It's a personal project, made to push how far a web page can go as a piece of storytelling.

Objectives

1. Tell the whole story - land to grape to cellar to glass - as one continuous camera path instead of stacked sections
2. Generate every 3D object in code, with no downloaded models or textures, so the experience loads instantly
3. Keep the story fully readable without WebGL, and degrade gracefully on weaker hardware and for reduced-motion users

Process

1. Wrote the concept, storyboard, 3D system, design system and art direction as five documents before building anything, so every act had a reason to exist and a defined hero moment.
2. Built the worlds procedurally: a lathe-generated bottle with a physically based glass material and a canvas-drawn label, a shader-driven terrain, instanced vine leaves and barrels, and a custom shader for the wine pool.
3. Drove the camera along one spline tied to scroll with GSAP and Lenis, and hid each jump in scale - landscape to grape to barrel grain - behind a noisy liquid dissolve.
4. Added three quality tiers (full, optimized and a static no-WebGL version), live frame-rate monitoring, culling of off-screen worlds, and a fixed light count so shaders never recompile mid-scroll.

Results

1. A live experience at vespera-sand.vercel.app with all nine acts, plus About, Wine, Cellar, Collection and Contact pages.
2. Zero binary 3D assets: the bottle, terrain, cellar, leaves and liquid are all generated at runtime.
3. A consistent ink-drawing art direction across the 3D scenes and the editorial pages.