Orven: Tikveš Valley Estate
Brand and website for an invented single-estate winery in North Macedonia's Tikveš Valley. One idea drives everything: patience. The signature moment is a scroll story where grapes melt into wine, pour into a bottle and receive their label, drawn entirely in code.
- Role
- Brand, design & development
- Scope
- Identity, labels, website, motion
- Stack
- HTML, CSS, SVG, GSAP, Lenis
- Imagery
- 100% code-drawn, zero photos
The signature moment
From vine to glass, in one scroll.
- I
The Vine
A hand-placed cluster of shaded grapes ripens into view.
- II
The Harvest
The cluster falls and an SVG goo filter melts every grape into one body of wine.
- III
The Cellar
The bottle draws itself in gold; wine pours down the neck and rises with a living surface.
- IV
The Bottle
Foil drops, the numbered label lands, and the light turns gold.
Four frames of a single scroll-scrubbed timeline. Scroll down, it pours; scroll up, it un-pours.
The brief
Patience, bottled.
Luxury wine is sold on time: years in the vineyard, months in oak, generations of knowing when to wait. Most winery websites hide that behind a hero photo and a shop grid.
Orven needed a site that makes you feel the waiting. Slow, dark, golden, and built around one unforgettable moment that tells the whole story of the wine without a single paragraph.
Goals
- Tell the vine-to-bottle story visually
- Feel ultra-premium, not e-commerce
- Make the cellar door bookable in seconds
- Stay fast: no video, no heavy imagery
Live This is the real website, running right here. Scroll inside the frame to pour the wine yourself.
Engineering the pour
No video. Just SVG and a timeline.
The journey is a single pinned GSAP timeline scrubbed by scroll. Twenty-four grapes are real SVG circles; when the harvest begins, a gooey filter (a blur followed by a sharp alpha threshold) makes neighbouring grapes merge like liquid as they converge and shift from grape violet to wine red.
The bottle outline draws itself, a stream grows down the neck, and the wine level rises inside a clip-path with a wave surface that keeps moving even when you stop. Because it's vector, it's razor-sharp on every screen and weighs a few kilobytes.
Under the hood
- Pinned, scrubbed GSAP timeline
- SVG goo filter for liquid
- Clip-path wine level + live wave
- Fully reversible on scroll-up
- Reduced-motion fallback
- Lenis for weighted scrolling
The full site: hero, the journey, the collection, the estate, the cellar door and the Cellar Letter.
Identity
A ring, a seed, a name.
ORVEN
Tikveš Valley · Estate Wines
The mark is a wine stain on linen and a vine's growth rings, with a grape seed at its heart. One label family, three wines.
Color
Ink, oxblood & old gold
Typography
A label serif, a quiet sans
Patience, bottled.
Aa Bb Cc Dd Ee Ff Gg 0123456789
Single-estate wines from the Tikveš Valley.
Aa Bb Cc Dd Ee Ff Gg 0123456789
Even the legally required age gate is a first impression: the ring draws itself before the question appears.
The collection glows in each wine's color on hover; the cellar door books a tasting in three taps.
The estate, illustrated in layered parallax: no stock photo could feel this specific.
On phones the journey re-composes: the bottle takes the stage and each chapter rises beneath it.
