Hanging Price Tags Physics Animation with Canvas
Overview
A row of kraft and ivory luggage tags for React and Next.js, hanging on strings from a brass rail. They drop in and swing, knock into each other, and you can grab one and throw it.
Each tag is a rigid card on a string, simulated with verlet physics in typed arrays. They drop onto their strings one after another, bounce, and swing hard. After that a breeze keeps them moving, and every few seconds an invisible hand sweeps through the row until a real cursor arrives. Tags knock into each other, twist around their strings, and throw soft shadows on the wall that move with them.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 103 / Hero
Hanging Letters Hero with Physics Strings on Canvas
On Load · Mouse Move · Drag
No. 108 / Cards
Pinned Notes Board Physics Animation with Canvas
On Load · Drag · Mouse Move
No. 109 / Hero
Pluck the Strings Hero Animation with Canvas
On Load · Mouse Move · Drag · On Click
(02)FAQ
Hanging Price Tags Physics Animation with Canvas — FAQ
01How do I set my own tags?
Pass tags as an array of label, price, href and an optional note. Four to seven fit a desktop screen. On a phone the tags hang in two tiers.
02Can a tag still be clicked if it can also be dragged?
Yes. A press with no movement follows the link. Once the pointer moves more than a few pixels it counts as a drag and the click is cancelled.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The serif comes from a CSS variable, --tags-serif, and falls back to Georgia. It uses no WebGL and no other dependencies.
04What happens with reduced motion?
The tags are drawn once, hanging at slightly different angles, with no running loop. All the text shows and the links still work.