Bead Curtain Reveal Hero Animation with Canvas Physics
Overview
A hero for React and Next.js behind a curtain of hanging glass and gold beads. The strands fall in across the screen as a wave, then part from the centre to show a photo and heading, and your cursor moves through them like a hand.
Every strand is a verlet rope pinned to a brass rail, and every bead on it is a sprite baked once: glass with a bright glint and light gathering on its far side, gold with a hard highlight. On load the strands unroll from the rail in a wave from left to right and whip as they run out. Then an opening spreads from the centre, the way a body parts a curtain, and the room behind brightens as the picture and heading appear.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 118 / Hero
Zipper Reveal Hero with a Draggable Pull, on Canvas
On Load · Drag · On Scroll · On Click
No. 110 / Hero
Pull Cord Light Switch Hero Animation with Canvas
On Load · Drag · On Click
No. 103 / Hero
Hanging Letters Hero with Physics Strings on Canvas
On Load · Mouse Move · Drag
(02)FAQ
Bead Curtain Reveal Hero Animation with Canvas Physics — FAQ
01How many beads does it draw?
About 39 strands and 1900 beads at 1280 wide, fewer on a phone. If the frame rate drops, it turns off the strand shadows first, then draws every second bead.
02Is the heading readable through the beads?
Yes. The heading is real text behind the curtain, in the space it opens, and it fades in as the curtain parts. The picture is darkened low in the frame to keep contrast.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The serif comes from a CSS variable, --bead-serif, and falls back to Georgia. Pass photo with any image URL. It uses no WebGL and no other dependencies.
04What happens with reduced motion?
One finished frame with the curtain parted and all the text visible, with no running loop. The button still opens and closes the curtain, without animation.