Physics Tag Footer
A footer that fills itself by dropping. Scroll it into view and a stack of rounded labels rains in from above, tumbles off the walls, and piles up on the floor, each one grabbable and throwable afterwards. A top wall seals the box three seconds in so nothing can be flung back out, and dragged bodies are clamped so they cannot be dragged through a wall. Matter.js bodies driving real DOM elements.
npx shadcn@latest add https://ui.aryank.space/r/physics-tag-footer.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| tags | string[] | 12 BLANK stack labels | Labels rendered as draggable pills. Each becomes one Matter.js body sized from its rendered box. |
| heroHeading / footerHeading | string | BLANK copy | Copy for the first screen and the footer screen. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
tagstextThe labels that drop in as physics bodies.
heroHeading / footerHeadingtextThe lead-in headline and the headline behind the pile.
gsaplenismatter-js