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 Vaivém
Vaivém funciona no celular?
Funciona, com um cuidado. No celular, a onda contínua de Vaivém 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. No THM Componentes, a classificação é Leve, porque o componente usa só texto em HTML e fonte variável, sem canvas nem WebGL.
Preciso instalar alguma fonte para usar Vaivém?
Sim, se quiser Fraunces ou Inter Tight. Vaivém 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.
Vaivém respeita quem prefere menos movimento?
Sim. Com a redução de movimento ativa, a onda contínua de Vaivém 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.
