What it looks like
Think of a stadium wave rolling through the letters. A large serif headline in navy sits in the middle of the area, and a slow wave crosses the word from left to right, taking each letter from thin to full-bodied and back. When the mouse comes close, the nearest letters turn very bold, within a radius that softens with distance, and the heaviest ones take on an indigo tone. With the default serif font, thin letters also get softer corners. When the mouse leaves, the cursor effect fades out gradually and only the wave keeps going.
You may be looking for this if you asked for something like
- a headline where letters get bolder when I hover over them
- text that pulses by thickening and thinning the letters, like a wave
- a variable font effect for the top of an editorial site
- a big word that reacts to the cursor by changing font weight
- that living typography effect that seems to breathe
- an elegant serif headline that moves without feeling over the top
- a manifesto opener with letters that ripple on their own
Also known as
- variable font animation
- variable font hover effect
- font weight wave
- wght axis animation
- cursor reactive typography
- wavy text weight
When to use
- A typographic hero for an editorial brand, magazine or studio
- A manifesto or purpose page opener built on one strong word
- A designer or type designer portfolio
- A highlight section that needs light motion without weighing the page down
When to avoid
- Long headlines: the text stays on one line and can get cut off on narrow screens
- Projects locked into a font with no variable version, where the weight cannot ripple
- Mostly mobile audiences, if the cursor reaction is the main point
How to ask your AI
Create a variable font headline in the hero where each letter's weight ripples in a continuous wave and gets heavier near the cursor, in my brand colors, pausing off screen, still for reduced motion, sized to fit on phones and with the full text accessible.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Variable Wave
Does Variable Wave work on phones?
Yes, with one caveat. On phones, the continuous wave in Variable Wave keeps animating the letters, but the cursor reaction needs a mouse. The headline stays on a single line, so lower the size prop on narrow screens to make it fit. It is rated Light in THM Componentes because it uses only HTML text and a variable font, with no canvas or WebGL.
Do I need to install a font to use Variable Wave?
Yes, if you want Fraunces or Inter Tight. Variable Wave loads them as variable woff2 files served by your own site from the /thm/fonts folder, with no external service. Put the files in that public folder of your project, or pick the system font option, where the result depends on the weights the device font offers.
Does Variable Wave respect reduced motion settings?
Yes. With reduced motion turned on, the continuous wave in Variable Wave stops and the headline holds a fixed pattern of weights. Letters change only while someone moves the cursor over them, with nothing animating on its own. The full text stays in the heading's accessible label for screen readers.
