Skip to content

component

Hover Text Warp

By Aidan Looker

Details

Summary

What is Hover Text Warp?

Description

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? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Introduction

Liquid text warps toward your cursor

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750183038/148/228/309/79/15
  • All · #7987