Realistic Perfume Bottle Hero Animation with GSAP and Canvas
Overview
A product hero for React and Next.js, built from your own bottle images and animated on a 2D canvas with GSAP. A strip of light crosses the bottle in the dark, liquid pours in and fills it, the cap drops into place, and a studio light follows the cursor. It runs with hardware acceleration off.
Real-time glass rarely looks real, so this doesn't try. The bottle in the demo was rendered ahead of time with a path tracer, which gives it true refraction, thick glass and liquid that gets darker the further light travels through it. The component then brings those images to life on a plain 2D canvas: the liquid's surface is a line of springs that masks a full bottle over an empty one, so the level can rise, slosh and stay flat while the bottle tilts. No GPU is needed, because a canvas only has to copy pixels.
Details
- Category
- Product
- Interaction
- On Load + Mouse Move + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
No. 115 / Cards
Peel-Off Sticker Card with a Draggable Curl, on Canvas
On Load · Drag · Mouse Move · On Click
No. 097 / Gallery
Hanging Cards on a Wire, Clothesline Gallery with Canvas Physics
On Load · Drag · Mouse Move · On Click
(02)FAQ
Realistic Perfume Bottle Hero Animation with GSAP and Canvas — FAQ
01What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. It doesn't use Three.js or WebGL. Pass your display font as the CSS variable --perfume-display.
02Which images do I need?
One image of your bottle empty and one filled for each note, in exactly the same framing, with a transparent background. Renders work best, and two matched studio photos work too. The moving light images are optional, and without them the rest still plays. The geometry prop says where the cap line, liquid and base sit in your images, as fractions of the height. The demo's images are placeholders for trying it out, with an invented name on the label.
03Does it work with hardware acceleration turned off?
Yes, that is how it was built and tested, in Brave with "Use graphics acceleration when available" off. There is no WebGL at all. The canvas stays at the page's own resolution when no GPU is found, and it reduces the smoke and light layers if frames take too long.
04How heavy are the images?
The demo loads about 2 MB of WebP in total. The empty bottle and the first note load first, and the entrance waits about a second at most for the moving light images. The other notes load quietly afterwards so that changing note is instant. Keeping your own images under 900 pixels wide is plenty.
05What happens with reduced motion?
With reduced motion the bottle is drawn once, filled and lit, with all the text showing and no running loop. The note buttons still work and change at once. If the images can't load, the text still appears on the dark background.