About Falling Text Gravity

Falling Text — Interactive Physics Typography

Bring playful motion to your Framer projects with Falling Text, an interactive typography component that transforms individual words into physics-driven objects.

Words can fall, collide, rotate, settle, and be dragged around the canvas, creating an engaging interaction without relying on an external physics library. The component uses a self-contained DOM-based physics system and includes configurable Framer property controls.

Features

Multiple triggers — Start the animation on click, hover, automatically, or when the component enters the viewport.
Interactive dragging — Grab individual words and move them around the container.
Word collisions — Words interact with each other using built-in collision handling.
Gravity & rotation — Adjust gravity and maximum word rotation to control the feel of the animation.
Highlight specific words — Define words that should use a separate highlight color or CSS class.
Wireframe mode — Display physics boundaries and word outlines for a more technical visual style.
Responsive sizing — Uses ResizeObserver to keep the physics bounds synchronized with the component size.
Framer controls — Customize text, colors, typography, spacing, trigger behavior, gravity, drag stiffness, rotation, padding, radius, and more directly from the property panel.