Pinned Notes Board Physics Animation with Canvas
Overview
A wall of paper notes and photos for React and Next.js, each held by one brass pin. They swing around their pins when you drag them, flutter when you pass, and if you pull hard enough the pin pops and the note falls.
Each note rotates like a pendulum around its pin. Drag one and it follows your hand and stretches a little. Let go and it swings back, slowing as it goes. A fast drag makes the notes around it flutter. Pull far enough and the pin pops off and bounces away, the note falls, tumbling and drifting side to side, and a moment later it flies back in and gets pinned again.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 104 / Cards
Hanging Price Tags Physics Animation with Canvas
On Load · Mouse Move · Drag
No. 117 / Cards
Tear Strip Envelope Reveal with a Draggable Tab, on Canvas
On Load · Drag · On Click
No. 098 / Cards
Crumpled Paper Card You Can Crush and Throw, on Canvas
On Load · On Click · Drag
(02)FAQ
Pinned Notes Board Physics Animation with Canvas — FAQ
01How do I add my own notes and photos?
Pass notes as an array. Title and body make a paper note. Title and src make a photo print with a caption. Add href to make either one a link. Eight fit on a desktop and six on a phone, and any extras are left out.
02Do the links still work if the notes can be dragged?
Yes. A press with no movement follows the link, and a drag cancels the click. The links can be focused with the keyboard, and focusing one sets its note swinging.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The serif comes from a CSS variable, --board-serif, and falls back to Georgia. It uses no WebGL and no other dependencies.
04What happens with reduced motion?
The notes are drawn once at slightly different angles, some with a folded corner, with no running loop. All the text shows and the links still work.