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?