Falling Text

Interactive typography that falls, bounces and responds to your pointer.

About this tool

A paragraph becomes a playground: hover to drop individual words, drag them around, then replay. Customize the text, highlights, type size, spacing, gravity and drag stiffness. Includes click, auto and scroll triggers, keyboard replay and a readable reduced-motion state. Adapted from the original MIT-era React Bits FallingText with Matter.js physics and lifecycle-safe HTML, React and Svelte exports.

In collections: Text Animations & Kinetic Typography

Guide: Text Animation in JavaScript: CSS, WAAPI or GSAP SplitText Text on Hover: Readable Tooltips and Hover Text Effects Text Reveal Effects: Keep the Message Understandable Without Motion

UI/UX · JavaScript / CSS All tools

Text

Content

Highlight words (comma-separated)

Font size px

Word spacing px

Layout

Height px

Physics

Trigger

hover click auto scroll

Gravity

Drag stiffness

Wireframes

off on

Color

Text

Highlight

Background (hex or transparent)