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.
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
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
6 curated presets: Plasma, Arctic, Solar, Phantom, Neon, Monochrome
Full custom color mode with text color, wake primary, and wake secondary
Influence radius
Repulsion strength
Character rotation amount
Spring stiffness (controls snap-back speed)
Damping (controls how quickly the bounce settles)
Neighbor pull (cloth deformation intensity)
Ripple intensity (wave strength on release)
Breathing animation toggle
Breathing amplitude
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
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.
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
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
6 curated presets: Plasma, Arctic, Solar, Phantom, Neon, Monochrome
Full custom color mode with text color, wake primary, and wake secondary
Influence radius
Repulsion strength
Character rotation amount
Spring stiffness (controls snap-back speed)
Damping (controls how quickly the bounce settles)
Neighbor pull (cloth deformation intensity)
Ripple intensity (wave strength on release)
Breathing animation toggle
Breathing amplitude
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
