Shadcn.io is not affiliated with official shadcn/ui
Gravity Text
Letters that fall under simulated gravity from their resting position, bounce on the ground, and stack with click-to-replay for React applications.
Gravity Text preview
Each character starts at its natural inline position, then drops under simulated gravity until it hits the floor of its container, bounces with a configurable restitution, settles, and stacks against the letters that landed before it. The simulation runs in a single requestAnimationFrame loop with direct DOM writes — React state never sees the per-frame positions, so the animation stays at 60fps even with long strings. Trigger modes cover everything: fall on click, on hover, when scrolled into view, or immediately on mount. Tune gravity, restitution, and the ground offset to dial the physics from "real-feeling tumble" to "moonshot floaty drop." Built for playful landing pages, easter eggs, fun-tech CTAs, and any moment a static headline deserves a punchline.
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 text effect for you — no copy-paste, no CLI:
use shadcnio to install the gravity-text text effect into my projectRelated Components
Falling Text
Physics-based letters that drop and pile
Bouncing Text
Rhythmic letter bouncing on a sine
Wave Text
Letters undulating along a continuous sine wave
Ripple Text
Concentric ripple animation across letters
Wobble Text
Per-letter wobble with spring physics
Liquid Text
Letters with liquid-like fluid motion
FAQ
Was this page helpful?
Sign in to leave feedback.