# Variable Wave Um título em que cada letra fica mais fina ou mais grossa numa onda contínua e engrossa perto do mouse. > O Variable Wave é um componente exclusivo do THM Componentes que anima uma fonte variável letra por letra: uma onda contínua faz cada letra engrossar e afinar em sequência, e as letras perto do cursor ficam mais pesadas e puxam para a cor de destaque. Sem canvas nem WebGL, serve para heros tipográficos, manifestos e marcas editoriais. - Categoria: Texto e tipografia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/variable-wave/ ## Como ele é Lembra a ola de uma torcida passando pelas letras. Um título grande, em fonte serifada azul-marinho, fica no centro da área, e uma onda lenta atravessa a palavra da esquerda para a direita, fazendo cada letra passar de fina a encorpada e voltar. Quando o mouse se aproxima, as letras mais próximas ficam bem grossas, num raio que vai suavizando com a distância, e as mais pesadas ganham um tom índigo. Na fonte serifada padrão, as letras finas também ficam com cantos mais macios. Ao tirar o mouse, o efeito do cursor some aos poucos e só a onda continua. ## Você pode estar procurando isto se pediu algo assim - “título em que as letras ficam mais grossas quando passo o mouse” - “texto que pulsa engrossando e afinando as letras, tipo uma onda” - “efeito de fonte variável para o topo de um site editorial” - “palavra grande que reage ao cursor mudando o peso da fonte” - “aquele efeito de tipografia viva que parece respirar” - “título elegante com serifa que se mexe sem parecer exagerado” - “abertura de manifesto com letras que ondulam sozinhas” ## Também chamado de fonte variável, variable font animation, texto ondulante, variable font hover, tipografia que reage ao cursor, font weight wave, eixo wght ## Quando usar - Hero tipográfico de marca editorial, revista ou estúdio - Abertura de manifesto ou de página de propósito com uma palavra forte - Portfólio de designer ou de tipógrafo - Seção de destaque que pede movimento leve, sem pesar a página ## Quando evitar - Títulos longos: o texto fica numa linha só e pode ser cortado em telas estreitas - Projetos presos a uma fonte sem versão variável, em que o peso das letras não ondula - Público que acessa quase só pelo celular, se a reação ao cursor for o ponto principal ## Como pedir para a sua IA ```text Crie um título com fonte variável no hero em que o peso de cada letra ondula numa onda contínua e engrossa perto do cursor, nas cores da minha marca, com pausa fora da tela, versão parada para movimento reduzido, tamanho que caiba no celular e o texto completo acessível. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Variable Wave ### O Variable Wave funciona no celular? Funciona, com um cuidado. No celular, a onda contínua do Variable Wave segue animando as letras, mas a reação ao cursor depende do mouse. O título fica numa linha só, então reduza a prop size em telas estreitas para ele caber. É classificado como Leve no THM Componentes, porque usa só texto em HTML e fonte variável, sem canvas nem WebGL. ### Preciso instalar alguma fonte para usar o Variable Wave? Sim, se quiser Fraunces ou Inter Tight. O Variable Wave carrega essas fontes em arquivos woff2 variáveis servidos pelo próprio site, na pasta /thm/fonts, sem serviço externo. Coloque os arquivos nessa pasta pública do projeto ou escolha a opção de fonte do sistema, em que o resultado depende das espessuras que a fonte do aparelho oferece. ### O Variable Wave respeita quem prefere menos movimento? Sim. Com a redução de movimento ativa, a onda contínua do Variable Wave para e o título fica num desenho fixo de pesos. As letras só mudam enquanto a pessoa move o cursor sobre elas, sem nada animando sozinho. O texto completo fica no rótulo do título para leitores de tela. ## Componentes relacionados - [Variable Text](https://vibecode.thmtecnologia.com/componentes/variable-text/): As letras perto do mouse engrossam e as mais distantes continuam finas, numa mancha de negrito que segue o cursor. - [Variable Letter Text](https://vibecode.thmtecnologia.com/componentes/variable-letter-text/): Ao passar o mouse, as letras ficam mais grossas uma de cada vez, numa onda que percorre a palavra. - [Breathing Text](https://vibecode.thmtecnologia.com/componentes/breathing-text/): Texto em fonte variável em que as letras engrossam e afinam uma após a outra, como se a palavra respirasse. - [Gooey Text](https://vibecode.thmtecnologia.com/componentes/gooey-text/): Palavras que se revezam no título, derretendo uma na outra como gotas que se juntam antes de ficarem nítidas. - [Decode Text](https://vibecode.thmtecnologia.com/componentes/decode-text/): Título que surge embaralhado em letras, números e símbolos e vai se acertando até formar a frase. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.