An immersive scrolling experience
The Krakin brand and website design blends storytelling, animation, and creativity
The Brief
The Krakin Whisky website began life as a mock creative brief - an internal challenge to explore what's possible when creative storytelling and modern web animation collide.
Created to push the limits of web design and spark ideas for future client projects, the brief was simple: take a fictional whisky brand, Krakin, and build a visually arresting website that feels like a journey.
What made Krakin an exciting foundation was its bold colour palette and strong branding - particularly the standout contrast between burnt orange and deep navy blue - which promised to make an impact on screen and lend itself well to animation.
The Process
Collaboration was at the heart of the concept. The initial spark came from Kristina's brand design for a mock whisky brand called Krakin, which inspired J to suggest creating a fully animated, scroll-based website experience. The team began bouncing around ideas, eventually landing on the metaphor of 'the journey' - following the bottle of Krakin as it’s dropped into the sea and sinks slowly into the depths, eventually being seized by the mythical Kraken itself.
The design team took cues from Apple's iconic scroll animations, imagining key moments triggered by user scroll: the bottle floating at the surface, descending through the water, being engulfed by the Kraken, and eventually settling on the seabed - visually aged and transformed.
This vision was mapped out in Adobe XD. By wireframing each stage of the journey upfront, the animation was scoped with clarity and precision. Unlike client jobs, where content often evolves mid-build, the Krakin concept was tightly defined from the outset, allowing for laser-focused execution.
The Challenge
Animating a single asset - the Krakin bottle - through multiple states and interactions across scroll depth was the core technical challenge. How could one object perform multiple visual functions depending on where it was on the page?
Using Framer Motion (now Motion), the team explored how to trigger different animations at various scroll points. With no prior experience building this exact type of motion design, research played a key role - working out how to implement these interactions from scratch using community resources and experimentation.
Adding complexity was the need to balance this passion project around existing client work. Time was always at a premium, but the clearly defined scope in XD helped streamline production.
Another learning curve came in the collaboration of the design and digital teams to learn and understand the limits and possibilities of what could be done with code. Having worked together on numerous projects before, the previous cross-team pollination meant there was already a good grounding in what was feasible - but the design team still encountered surprises and problem-solving moments throughout the build.
The Result
The final site offers a visually rich, scroll-driven animation that seamlessly takes users on the "journey" of the Krakin bottle from surface to seabed. As the user descends with the bottle, key elements of the mock brand’s website are revealed along the way, including horizontal scrolling cocktail recipes, an online shop, client testimonials, brand story and more.
The interplay of deep orange against dark navy creates a dramatic and memorable visual language. But beyond the visuals, the project stands out as a demonstration of what's possible when web design breaks away from conventional page layouts and embraces interactivity and storytelling.
More than just a mock project, the Krakin website has become a valuable reference for clients - showcasing how websites can go beyond utility and become immersive brand experiences.
Ready to push your brand beyond the ordinary?
Let’s create something bold, immersive, and unforgettable.
Get in touch to explore how we can bring your story to life.