Text Gravity: Premium Typography Component by Aidan Looker

Text that responds to your cursor — and your grip. Text Gravity gives every character physical weight, elastic tethering, and luminous color reactions. Hover to repel letters, grab to drag them, release to watch them spring back with satisfying bounce physics.

What is Text Gravity?

Text Gravity is an interactive text component where each character behaves as if tethered to its position by an invisible elastic spring. Move your cursor near the text and characters push away with a smooth luminous wake. Click and drag any individual letter — it follows your cursor while neighboring characters deform like fabric. Release it and watch the satisfying spring-back bounce ripple through the surrounding text. Ideal for hero sections, landing pages, portfolio headers, and any layout where you want typography that invites interaction.

Core Features

Physics-based hover repulsion — characters push away from the cursor with adjustable radius, strength, and rotation
Direct grab and drag — click any individual letter to pull it from its position with visible elevation and enhanced glow
Cloth-like neighbor deformation — nearby characters are pulled toward the dragged letter, creating organic elastic tension
Damped harmonic spring-back — on release, characters snap home with real bounce physics that settle naturally
Release ripple wave — a cascading wave propagates outward through neighboring characters on every release
Idle breathing animation — multi-frequency ambient oscillation keeps the text feeling alive between interactions
Luminous color wake — displaced characters shift through a two-tone color gradient with soft glow trails

Controls inside Framer

Typography

Text content with multi-line support
Font family and weight
Font size (20–300px)
Letter spacing
Line height
Text alignment (left, center, right)
Uppercase toggle

Theme

6 curated presets: Plasma, Arctic, Solar, Phantom, Neon, Monochrome
Full custom color mode with text color, wake primary, and wake secondary

Hover

Influence radius
Repulsion strength
Character rotation amount

Grab Physics

Spring stiffness (controls snap-back speed)
Damping (controls how quickly the bounce settles)
Neighbor pull (cloth deformation intensity)
Ripple intensity (wave strength on release)

Idle

Breathing animation toggle
Breathing amplitude

Best use cases

Hero headlines that reward curiosity and encourage visitors to interact
Agency and portfolio landing pages where creative presentation differentiates the brand
Product launch pages that need a tactile, memorable first impression
Interactive experience sites where every element should feel physically responsive

Typography that visitors can touch creates moments they remember. Text Gravity turns static headings into interactive experiences that hold attention longer and reinforce the quality of your design.