PRO

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.

Component

BLANK

About Us

Our Team

Our Mission

Careers

Contact

Services

Web Development

Mobile Apps

UI/UX Design

SEO Optimization

Projects

E-commerce

Portfolio

Blog

Landing Pages

Resources

Tutorials

Documentation

Community

Support

Install
npx shadcn@latest add https://ui.aryank.space/r/gravity-drop-landing.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
images / positionsstring[] / [number, number][]12 BLANK thumbnailsResting 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.
columnsGravityDropColumn[]4 BLANK columnsHeading plus links per column, revealed line by line once the pile has dropped.
toggleLabelstring[ Drop / Raise ]The only control; it blends against the backdrop with mix-blend-mode.
Customize
wordmarktext

Letters that scale up behind the pile.

overlayColorcolor

Backdrop the clip-path reveals.

Dependencies
gsapmatter-js