Web 2026
Boost Drink
A concept site for an energy drink, where one real-time 3D can travels down the page.
The brief
A concept site for Boost, a Moringa energy drink. Ubaid designed it and Shameer built it around one real-time 3D can: it drops into the hero, stands in a ring of live lightning, leans behind frosted glass and lands on a pedestal where visitors pick a flavour.
The design showed a different can render in every section. The site had to turn those stills into one object that moves with the page, stay smooth while scrolling, and still work on phones and with reduced motion.
What we built
The can
- Built in code: a lathe-turned can with generated labels for four flavours, condensation and a neon light rig.
- Invisible anchors in each section place it. It glides between them in page coordinates, so it never trails the scroll.
- It drops into the hero with a fizz burst, leans with scroll speed and spins when dragged.
The page
- A 3D flavour lineup driven by arrows, arrow keys, swipe or a click on a can. Each flavour recolours the page.
- Live lightning, rising fizz, split headlines and scroll parallax.
- Still renders take over with reduced motion, without WebGL or when the graphics context is lost.
The build
- Next.js with React Three Fiber and GSAP, the renderer on the same clock as the smooth scroll.
- Unit and end-to-end tests for the scroll maths, flavours, form, fallbacks and resizing.
The result
A one-page site where the can follows the scroll without trailing the page, four flavours recolour the whole site, and phones and reduced-motion visitors get the design's renders instead.
