Vegan Valley — Rooted in Motion

01Overview

A bottle can do more than sit in a product photograph. For Vegan Valley, it becomes the thread through the experience: turning as the visitor scrolls, changing flavour on demand, and connecting a playful first impression to the ingredients inside.

02The problem

The design challenge was to give a plant-based food brand a distinctive digital presence while keeping its products easy to understand. The experience needed to communicate flavour, ingredients and character, then let people browse juices, explore bowls and discover meal plans without getting lost in the animation.

03Approach

1. 01

   Build a recognisable visual world

   Sage green, botanical illustrations and handwritten notes establish a natural, tactile setting. Tall condensed headlines sit beside expressive italic type, while individual product colours carry through the flavour selector and catalogue. The bottle stays the visual focus rather than competing with a separate decorative scene.

2. 02

   Put the actual product in motion

   The bottle is built in Three.js with shaped geometry, a curved label, a ridged cap and studio-style lighting. Scrolling drives a continuous turn. Choosing another featured flavour animates the rotation while updating the juice colour and label, keeping the object and the surrounding copy in sync.

3. 03

   Give the scroll a purpose

   The opening composition transitions into an ingredient view using GSAP ScrollTrigger. Lenis and the scroll timeline share a clock, while the bottle eases toward the scroll position. Movement reveals information: the visitor sees the product from another angle as the ingredient list comes into view.

4. 04

   Make discovery useful

   Six juices can be filtered by greens, roots and citrus. Product details reveal ingredients, bowl tabs switch the food photography and description, and the meal-plan flow gathers preferences before preparing an editable WhatsApp enquiry. These interactions turn the visual introduction into a usable brand website.

5. 05

   Extend the story beyond the homepage

   A four-chapter farm-to-bottle experience follows the farm, harvest, cold press and finished bottle. Chapter links, directional controls and keyboard navigation let visitors choose their own pace. A separate 3D journey explores the same story as a spatial scene.

6. 06

   Keep the experience resilient

   A product photograph remains available until the first 3D frame is ready and returns if WebGL becomes unavailable. Rendering pauses when the bottle is off-screen or the tab is hidden, the drawing buffer is capped, and reduced-motion preferences simplify the animation. Responsive layouts keep the content usable on smaller screens.

04Screens

05Results

• A working 3D product hero with three selectable featured flavours and a continuous scroll-driven bottle turn.

• Six filterable juices, three bowl selections and a meal-plan discovery flow within one consistent visual system.

• A four-chapter brand story with direct chapter navigation, plus an additional real-time 3D journey.

• Static-image and reduced-motion fallbacks keep the experience useful when animation is unavailable or unwanted.

NoteVegan Valley is live at veganvalley.in. The meal-plan flow prepares an enquiry; it does not place an order. Commercial performance and conversion results have not been measured.

06Built with