Terroir

Terroir is a front-end study I built for a fictional Highland single malt whisky. The page moves through preloader, hero, philosophy, origin, process, expression, and footer as one continuous editorial sequence. I wanted to treat a product page the way a long-form magazine feature treats its subject: with pacing, structure, and deliberate changes of rhythm.

The motion architecture is straightforward in principle and careful in execution. Lenis owns the smooth scrolling loop. I feed every tick from Lenis to ScrollTrigger through the GSAP ticker, keeping the scroll position and animation timelines synchronized without fighting over frame timing. GSAP then drives text reveals, image transitions, divider animations, and the horizontal process sequence where a progress indicator and image movement are both tied directly to scroll position.

Angular's afterNextRender hook is the boundary between server and animation. Each component starts its ScrollTrigger only after it has been rendered to the browser DOM, which prevents SSR from attempting to measure elements that do not yet exist and keeps each section's entrance independent while the page reads as one continuous flow.

The useful constraint was restraint. Terroir has many moving parts: a full-screen preloader that introduces the wordmark, a hero sequence, four or five content sections with their own entrance choreography, an assembled expression section at the end that brings together the bottle, age statement, tasting notes, and product details. With that many animated elements, the temptation is to make each one expressive. I pushed in the opposite direction: make each one serve a specific narrative beat and nothing more. Introducing a heading. Shifting attention to an image. Explaining a step in the process. Each animation has a job. It does the job and stops.

What I ended up with is a study in what editorial pacing looks like when motion is the medium.