Shadcn.io is not affiliated with official shadcn/ui
Gravity Button
Button where the text subtly pulls toward your cursor like gravity for React.
Gravity Button preview
Physics-based interaction. Move your cursor near this button and watch the text lean toward it, pulled by an invisible gravitational force. It's subtle but delightful—the kind of detail that makes users go "wait, did that just...?" Perfect for creative portfolios, agency sites, or anywhere you want to show attention to craft. The effect is gentle enough to not interfere with clicking. Feels alive.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the gravity-button button into my projectRelated Components
Magnetic Button
Particle attraction
Tilt Button
3D tilt on hover
Spotlight Button
Cursor-following light
Elastic Button
Rubber band stretch
Morph Button
Shape morphing
Bounce Button
Elastic click bounce
FAQ
Was this page helpful?
Sign in to leave feedback.