AURA — Sparkling Botanicals

About this project

Drinks brands sell on texture and colour, but the usual way to put a product in 3D on the web is to ship a model file, a set of label textures and an HDRI for lighting — easily six megabytes before the page has said anything. That cost is what forces the "click to enter" gate onto so many 3D sites: a gate exists to hide a download. So I removed the download. The can's geometry, all six of its printed labels, the glass it pours into and the studio lighting are generated in JavaScript when the page opens. A drinks can is a body of revolution — a 2D profile spun about an axis — which makes it one of the few real products you can build this way instead of modelling. The label artwork is drawn to a canvas at runtime and wrapped once around the body; the studio is a softbox rig painted straight into a half-float buffer and pre-filtered into a real image-based environment. The result is that there is no loading screen to sit through. The page opens and you are in the shop, in under a tenth of a second. The centrepiece is a scroll-driven sequence: the tab lifts, the lid panel hinges into the can, the can tips and pours a stream into a glass that fills with rising bubbles, then rights itself. The lid is a genuinely pierced surface rather than a dark shape painted on top, so you can see into the can and watch the liquid level drop as it empties. The whole sequence is written as a pure function of one scroll value, which means it runs backwards, survives a reload halfway down the page, and never strands itself half-open. Underneath the 3D it is a working storefront: six flavours, three case sizes with per-can pricing, mixed cases, a cart that survives a reload, and a checkout. Selecting a flavour turns the can and cross-fades the entire page's accent colour in step with it. All prices derive from a single number per product, so there is no second place for them to go stale. Verified in headless Chrome at desktop and phone sizes: no console errors, nine draw calls and 3,733 triangles at rest, no horizontal overflow at 390px, and every tap target at or above 44px. Quality drops itself automatically on weaker hardware, and the render loop stops entirely — not just hides — the moment the canvas is covered by the product grid, which is the difference between a phone that stays cool through the catalogue and one that does not.