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 Outline
Video in Text
Scroll Text Fade
iOS Clocks

Related Components

Kinetic Text Slider
De_Crypt.exe
Kinetic Text Motion
Text Start Indent