Shadcn.io is not affiliated with official shadcn/ui
Falling Text
Physics-based falling text with Matter.js for React applications.
Falling Text preview
Physics-based falling text that tumbles and bounces with realistic motion. Words break apart and fall under gravity, colliding with boundaries and each other. Drag words around with mouse interaction for playful engagement. Built with Matter.js physics engine, supporting multiple trigger modes (auto, scroll, click, hover) and configurable gravity. Perfect for destructive reveals, playful interactions, or chaotic hero sections.
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 falling-text text effect into my projectRelated Components
Text Trail
Character trails that follow cursor movement
Scrambled Text
Proximity-based character scrambling with GSAP
Glitch Text
Digital glitch effects with RGB channel separation
Splitting Text
Character, word, or line splitting with timing
Blur Text
Text animation from blur to focus
Decrypted Text
Matrix-style decryption with character cycling
FAQ
Was this page helpful?
Sign in to leave feedback.
Erase Text
Cursor-driven text eraser that fades each glyph toward transparency as the pointer sweeps over it and slowly restores the letter once the cursor has left, built with React, Next.js, motion, and TypeScript for production interactive typography.
Flickering Text
Failing-fluorescent flicker effect with random per-character brightness drops and the occasional rapid blink for React applications.