# Variable Wave A headline where each letter grows thinner or bolder in a continuous wave and turns heavy near the mouse. > Variable Wave is an exclusive THM Componentes component that animates a variable font letter by letter: a continuous wave makes each letter thicken and thin out in sequence, and letters near the cursor get heavier and shift toward the accent color. With no canvas or WebGL, it suits typographic heroes, manifestos and editorial brands. - Category: Text and typography - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/variable-wave/ ## 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 ```text 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. ## Related components - [Variable Text](https://vibecode.thmtecnologia.com/en/components/variable-text/): Letters near the mouse turn bolder while distant ones stay thin, in a patch of bold that follows the cursor. - [Variable Letter Text](https://vibecode.thmtecnologia.com/en/components/variable-letter-text/): On hover, the letters turn bolder one at a time, in a wave that runs through the word. - [Breathing Text](https://vibecode.thmtecnologia.com/en/components/breathing-text/): Variable font text where letters thicken and thin out one after another, as if the word were breathing. - [Gooey Text](https://vibecode.thmtecnologia.com/en/components/gooey-text/): Words take turns in the headline, melting into one another like merging drops before turning crisp again. - [Decode Text](https://vibecode.thmtecnologia.com/en/components/decode-text/): A headline that starts as scrambled letters, numbers and symbols and settles letter by letter into the phrase. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).