Zipper Reveal Hero with a Draggable Pull, on Canvas
Overview
A leather panel for React and Next.js closed with a brass zipper. Drag the pull down and the teeth part, the two flaps open in a V with real curl and shading, and a photo and heading show underneath. Canvas 2D with no WebGL, and it runs with hardware acceleration off.
Two flaps of pebbled leather meet at a row of brass teeth. Drag the pull and the teeth part behind it, each drawn from a baked sprite along the flap's edge. The flaps open in a V, their edges roll over to show a silk lining, and the slack bunches into soft folds to the sides. Let go past halfway and the zip runs to the bottom on its own. Let go earlier and it closes again.
Details
- Category
- Hero
- Interaction
- On Load + Drag + On Scroll + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 096 / Hero
Hanging Cloth Banner Hero with Wind Physics on Canvas
On Load · Drag · Mouse Move · On Click
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
(02)FAQ
Zipper Reveal Hero with a Draggable Pull, on 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 --zip-display. The heading uses it, and so does the title pressed into the leather.
02How does scrolling work with it?
Set scrollDrive and the section becomes 220% of the screen height with a sticky stage inside, and the zip follows the scroll. Dragging the pull and the button still work. Leave it off and the section is one screen tall.
03Can I use it from a keyboard or a phone?
Yes. A real button opens and closes the zip. The link under the leather can't take focus or clicks until the zip is open. On a phone you drag the pull itself, and a swipe anywhere else scrolls the page.
04What happens with reduced motion?
It starts open as one still frame with no running loop, so the photo, heading and link are all there. The button still closes and opens it, with no animation.