Hover Scale Text

Hover Scale Text

About Hover Scale Text

Text Hover Scale is a hover-driven text animation component. Each line becomes its own row of individually interactive letters — hover any letter and it scales up smoothly, with its neighbors scaling to a lesser degree, then easing back to rest when you move away.

Features:

  • Per-letter hover scaling with adjustable max scale and neighbor falloff

  • Auto-fit sizing — text scales to match your frame's width or width + height, just like a native Framer text layer

  • Customizable scale origin (top, center, or bottom)

  • Optional hover color, separate from the base text color

  • Full typography control (font, size, weight, letter spacing, line height)

  • Adjustable letter gap, row gap, and alignment (horizontal + vertical)

  • Configurable transition duration and easing curve

  • Uppercase toggle

  • Multi-line support — each line breaks into its own letter row automatically

  • Optimized for canvas and export: hover effects are automatically disabled during static rendering for clean thumbnails and exports

Great for:

  • Hero headlines and landing page titles

  • Portfolio and case study intros

  • Playful nav items or buttons

  • Any spot that needs a little personality on hover

Refund Policy: This is a digital product, so no refunds are offered once purchased.

Component Demo