Loading ...

Responses by WAKA.

Background: La Revoltosa is a historic Spanish soda brand started in 1953, deeply rooted in local bar culture and family heritage. Following its acquisition by soft drink brand manager and manufacturer Refrescos del Atlántico, the brief was to bring this beloved, dormant brand back into contemporary relevance without losing its original soul. Instead of acting like a traditional static corporate brochure, the site functions as an interactive scrollytelling experience, written entirely in the first person. The target audience encompasses modern consumers looking for authentic heritage brands, as well as hospitality venues and distributors seeking a beverage with a distinct, rebellious personality.

Larger picture: The website serves as the central digital hub for our comprehensive rebranding effort, which included reviving the brand’s 1970s historic logo, a full packaging redesign, custom illustrations, copywriting, and a promotional video production featuring our agency team and friends. While physical touchpoints establish presence on tavern shelves and street-level cultural events, the website showcases the story behind La Revoltosa, where the brand immerses users and presents its full product family.

Design core: The site rejects standard product grids in favor of an immersive first-person narrative. Core design elements include custom old-school illustrations by tattoo artist GL6RIA, a recovered 1970s logo mark and rich typography. A highlight feature is the Mis Bebidas product showcase, where each flavor operates as its own distinct dynamic universe; as you scroll, the 3-D bottle render, background illustration, color palette and copy shift simultaneously across synchronized layers to express each flavor’s unique personality.

Challenges: Achieving optimal WebGL rendering performance and DOM synchronization across desktop and mobile devices was our toughest battle. The 3-D bottle relies on two separate materials with complex refraction indices, requiring us to render the hero typography directly inside the three.js scene as individual 3-D letter geometries so it could refract realistically through the glass. Combining this heavy render load with synchronized SVG scaling over background videos, dynamic phone elements and smooth-scroll transitions forced us to implement aggressive polygon reduction, texture sharing and progressive loading techniques to guarantee fluid frame rates.

Technology: The back end uses a custom monolith WordPress architecture built on the BEMIT methodology and bundled with webpack, allowing the client to manage content without code dependencies. The interactive 3D graphics were built using three.js, marking our studio’s very first WebGL project. Complex scroll progressions, UI timelines and smooth scrolling are orchestrated through GSAP and Lenis, tied together using a custom event-driven JavaScript architecture with an event emitter.

larevoltosa.es

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In