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.

Framer Details

Component: Falling Text Type: Code Component Platform: Framer Layout: Supports flexible/fixed width and height.

Interaction Controls

• Trigger: Click / Hover / Auto / Scroll

• Auto Delay

• Drag Stiffness

• Gravity

• Rotation Max

• Boundary Inset