# Variable Text As letras perto do mouse engrossam e as mais distantes continuam finas, numa mancha de negrito que segue o cursor. > O Variable Text é um componente do THM Componentes que liga a fonte variável do título ao cursor: as letras mais próximas do ponteiro engrossam e as distantes ficam finas, numa área que acompanha o movimento. Há também um modo em que as letras mudam em ordem aleatória no hover. Serve para heros tipográficos e páginas de marca. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/variable-text/ ## 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 ```text 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. ## Componentes relacionados - [Variable Wave](https://vibecode.thmtecnologia.com/componentes/variable-wave/): Um título em que cada letra fica mais fina ou mais grossa numa onda contínua e engrossa perto do mouse. - [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. - [Particle Text](https://vibecode.thmtecnologia.com/componentes/particle-text/): Uma palavra desenhada com milhares de pontinhos coloridos que se espalham quando o mouse passa e voltam ao lugar. - [Text Hover Effect](https://vibecode.thmtecnologia.com/componentes/text-hover-effect/): Uma palavra gigante só em contorno aparece quando o mouse passa e ganha, perto do cursor, as cores que você definir. --- 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.