Hover Text Warp

Hover Text Warp
Hover Text Warp

About Hover Text Warp

What is Hover Text Warp?

Hover Text Warp is a fully interactive text component powered by liquid spring physics. Each letter independently warps, scales, and rotates toward the cursor with smooth, organic motion. A chain-reaction system spreads movement between neighbouring letters for a fluid, living feel. Perfect for hero sections, landing pages, portfolio headers, and any layout that needs a premium interactive detail.

Core Features

  • Physics-based spring animation with per-letter warp, scale, rotation, and glow

  • Chain-reaction propagation that spreads motion between neighbouring characters

  • Proximity-based glow with pulsing highlight and optional drop shadow

  • Full extended font control with family, weight, size, line height, and letter spacing

  • Touch-optimised with automatic mobile detection and enlarged interaction radius

Controls inside Framer

Text

  • Text content with multi-line support

Font

  • Font family, weight, size, line height, and letter spacing

Colors

  • Text colour

  • Glow colour

Effect

  • Radius — how far the warp influence reaches

  • Intensity — strength of the displacement

  • Smoothness — higher values produce more fluid, slower motion

  • Glow — intensity of the proximity-based light effect

Appearance

  • Shadow toggle

  • Background colour

Best use cases

  • Hero sections and above-the-fold headlines that demand attention

  • Portfolio and agency landing pages showcasing creative craft

  • Product launch pages where interactive polish drives conversions

  • Personal sites and experimental layouts that reward cursor exploration

Questions or custom requests?

From Aidan Looker

Text Velocities
Text Outline
Text Magnetic Field
Text Scramble

Related Components

Text Motion Pack
ScrollSyncedText
Shape ticker
Reveal Text