Elastic Text

Letters near the cursor widen and get heavier while the rest squeeze in, so the line keeps its length. I built it for the hero name in my Noa Varga template.

Pick one of 14 built-in Google fonts with a width axis, or use your own. Fonts without a width axis stretch by horizontal scaling instead.

Trigger it with the cursor, on scroll, or as a looping wave. Phones fall back to scroll or wave. You can also tint the stretched letters, tune the spring, and choose how the text appears.

The text fills its frame width, works across multiple lines, and holds still for visitors who have reduced motion turned on.