Gravity Drop Landing
A hero whose scattered thumbnails are Matter.js bodies held static until you press the toggle. Gravity is zero and every body is static at rest, so the layout is exactly the CSS positions until the moment it is released; then each body is un-fixed and given a small random angular velocity so the pile lands untidily rather than in formation. Raising them is not a physics rewind: the bodies go static again and are lerped back to their measured start positions on an ease-out-quad, which is what makes the return read as deliberate. The same toggle re-clips the backdrop, doubles the wordmark, and staggers the link columns in the opposite direction on the way back.
npx shadcn@latest add https://ui.aryank.space/r/gravity-drop-landing.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 |
|---|---|---|---|
| images / positions | string[] / [number, number][] | 12 BLANK thumbnails | Resting composition as top and left percentages. Positions are read back at mount to seed the bodies, so editing them moves both the layout and the physics. |
| columns | GravityDropColumn[] | 4 BLANK columns | Heading plus links per column, revealed line by line once the pile has dropped. |
| toggleLabel | string | [ Drop / Raise ] | The only control; it blends against the backdrop with mix-blend-mode. |
wordmarktextLetters that scale up behind the pile.
overlayColorcolorBackdrop the clip-path reveals.
gsapmatter-js










