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
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.
