Most beverage websites hand you a hero image and a checkout button. MANA Yerba Mate hands you an animated universe built on Three.js, then hides a platformer game in the footer. The site runs WebGL inside a Shopify storefront, treating each flavor as its own graphical world with distinct palettes, illustrated characters, and scroll-driven 3D scenes. Stars drift. Fruit floats. Bubbly transitions dissolve one world into the next. It feels like someone poured an energy drink directly into a canvas element.

The stack is Three.js for 3D rendering, GSAP for scroll orchestration, and Lottie for 2D animation, all wired together inside Shopify. That last part matters. Most developers treat Shopify as a constraint that rules out ambitious graphics work. Front-end developer Michaël Garcia turned scroll position into a conductor for layered parallax, WebGL-rendered product scenes, and tightly sequenced Lottie compositions that feel closer to a motion reel than a product page. Design is by Louis Paquet, a Montreal creative director with 50+ Awwwards Sites of the Day. Back-end and Shopify architecture is by Pam, a France-based developer specializing in headless JAMStack builds. Together they coined what they called a "funtional" site: four clicks to checkout, zero compromise on visual chaos.

Scroll slowly. Each section rewards patience with timing details you'll miss at speed. The footer game alone is worth the visit. If you build e-commerce sites and think Shopify constrains your WebGL ambitions, this is your counter-argument. Pop open devtools and inspect how the Three.js canvas layers sit alongside the DOM.