Pull Cord Light Switch Hero Animation with Canvas
Overview
A dark room hero for React and Next.js with a pull cord you can actually pull. It stretches, snaps back, and the pendant lamps click on with a real filament flicker, lighting up the text and a framed photo.
The page opens on a dark room: moonlight through a window slants across a blue wall, and the words are there, only faint. The pull cord falls open from the ceiling, a ghost hand gives it a tug, and about a second in the lights strike. Each pendant runs its own switch-on sequence, flicking on and off and then rising slowly as the filament warms, and the wall and the text follow the same flicker.
Details
- Category
- Hero
- Interaction
- On Load + Drag + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 094 / Hero
Bead Curtain Reveal Hero Animation with Canvas Physics
On Load · Mouse Move · Drag · On Click
No. 103 / Hero
Hanging Letters Hero with Physics Strings on Canvas
On Load · Mouse Move · Drag
No. 118 / Hero
Zipper Reveal Hero with a Draggable Pull, on Canvas
On Load · Drag · On Scroll · On Click
(02)FAQ
Pull Cord Light Switch Hero Animation with Canvas — FAQ
01Does the room start dark or lit?
It starts dark, and the ghost hand turns the lights on once after load. After that it stays as the visitor leaves it. With reduced motion it starts lit.
02How do keyboard users work the switch?
There is a real button with aria-pressed. It pulls the cord for them, so they see the same animation, and its label changes between on and off.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The serif comes from a CSS variable, --lights-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 lights on, all the text at full strength, and no running loop. The button still switches the room between light and dark, instantly.