Como ele é
Imagine passar uma lanterna sobre um título e ver as letras iluminadas ficarem em negrito. Na demo, quatro palavras brancas empilhadas sobre um fundo laranja ficam finas até o cursor chegar perto. Então as letras dentro de um raio ao redor do ponteiro engrossam, mais as do centro e menos as da borda, e a mancha de peso desliza junto com o mouse por toda a seção. A queda do efeito pode ser linear, mais concentrada ou suave como uma curva de sino. No modo aleatório, as letras mudam em ordem embaralhada ao passar o mouse e voltam ao sair.
Você pode estar procurando isto se pediu algo assim
- título que fica em negrito onde o mouse passa
- letras que engrossam perto do cursor e afinam longe dele
- hero só com tipografia que reage ao mouse
- efeito de fonte variável que segue o ponteiro
- deixar o topo do site com tipografia interativa tipo estúdio de design
- texto grande que muda de peso conforme mexo o mouse
- palavras que reagem à aproximação do cursor
Também chamado de
- fonte variável interativa
- variable font proximity
- cursor proximity text
- texto que reage ao cursor
- interactive typography
- tipografia interativa
Quando usar
- Hero tipográfico de agência, estúdio ou marca de moda
- Páginas de manifesto com poucas palavras em tamanho grande
- Portfólios em que a tipografia é a peça principal
- Aberturas de evento ou de campanha com uma frase curta
Quando evitar
- Projetos sem fonte variável, em que nada muda
- Textos longos: cada letra é medida a cada quadro, o que pesa com muitos caracteres
- Botões e textos de interface que precisam ficar estáveis para a leitura
Como pedir para a sua IA
Crie um hero tipográfico com fonte variável que reage à proximidade do cursor: as letras perto do ponteiro ganham peso e as distantes ficam finas, com o efeito medido em toda a seção, pausa fora da tela e versão estática para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Variable Text
O Variable Text funciona no celular?
Funciona no modo de proximidade: o Variable Text também lê toques, então arrastar o dedo sobre a seção engrossa as letras próximas. O modo aleatório reage à entrada do mouse e foi pensado para hover. Como o efeito aparece mais com mouse, vale testar em mobile, como o prompt do THM Componentes pede.
O Variable Text deixa a página pesada?
No modo de proximidade, o Variable Text mede a distância de cada letra até o cursor a cada quadro, enquanto está montado. Em títulos curtos o custo é baixo e o componente é classificado como Leve no THM Componentes, mas frases longas somam mais letras ao trabalho. O prompt pede para comparar LCP e INP antes e depois.
Que fonte o Variable Text precisa?
O Variable Text precisa de uma fonte variável, porque troca os eixos da fonte, como o peso, letra por letra. Na demo, a Roboto Flex vai do peso 300 ao 700. Você define os valores de repouso e de destaque, e o raio de alcance do cursor, de 50 pixels por padrão, é ajustável.
