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 @compronents/physics-tag-footerInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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