Font Weight Hover

Make any headline react. Font Weight Hover animates the weight of a variable font, letter by letter, as visitors hover or scroll. It's smooth and light, and it works with any variable font in Framer's font picker.

FOUR MODES

• Cursor Radius: letters thicken by how close they are to the cursor, with a soft falloff.

• Whole Text: the full headline animates when you hover the text, its parent frame or anywhere on the page.

• Scroll Reveal: the text animates in when it scrolls into view, with an optional stagger wave and replay.

• Scroll Scrub: the weight follows the scroll position. Use One Way or Peak, and Uniform or Sweep, where a bold band travels across the letters.

MADE FOR MOBILE

Phones can't hover, so the hover modes switch to Scroll Reveal or Scroll Scrub on touch devices automatically. You choose which one, or keep the desktop behaviour.

DETAILS

• Works with any variable font: Inter, Fraunces, Bricolage Grotesque, Unbounded and hundreds more.

• Trigger the hover from the parent frame, so a whole card or section can start the effect.

• Real heading tags (H1–H3, P), read as one sentence by screen readers.

• Responsive: size and font can be changed per breakpoint.

• Active colour with a smooth blend, plus an accent colour for the punctuation that ends a line.