ABOUT

Challenge
YAAS is an American sugar-free energy drink brand. They needed a promo site that conveys the brand’s character and doesn’t feel like flipping through a catalog. Along the way, we tested what AI can really do in development.

Solution
The hero of the site is a 3D can. It spins on the first screen, switches between five flavors, and the background changes color along with it. Further down, usage scenarios fan out as an arc of cards, while the advantages and “About” blocks assemble as you scroll.

We planned the structure ourselves. Claude Code wrote both the frontend and the backend. At first we tried to describe the animation in words and references, but the result was hard to refine. We drew a layout in Figma and handed it to the AI, and the code became more accurate.

We also paid special attention to performance, because 3D can easily make a site heavy:

we optimized the can model without losing image quality;
fonts and key images are preloaded;
on low-end devices, static frames are shown instead of WebGL;
a preloader with a counter and a scrolling ribbon of cans keeps visitors engaged while everything loads.

We also added SEO for every page, FAQ markup, and a cookie banner that enables analytics only after consent.

Result
The site is live, covering the full cycle from research and content to code and release. It took 70-80 hours, not including the text prototype.

Takeaway: vibe coding doesn’t speed up the work by itself, but it lets you build complex animation without a separate team of developers. You need a baseline of coding knowledge to set tasks well and to spot when the AI suggests nonsense.