Como ele é
Imagine uma palavra enorme escrita só com o contorno das letras, em Helvetica negrito, ocupando a largura do espaço. Sem o mouse em cima, ela fica invisível. Quando o mouse entra, o contorno surge em cinza claro, ou cinza escuro no modo escuro, e um segundo traço se desenha por cima em quatro segundos. Em volta do cursor, como o facho de uma lanterna, o traço ganha as cores de um gradiente que segue cada movimento; as cinco cores vêm de variáveis CSS que o seu projeto precisa definir. No celular, arrastar o dedo faz o mesmo. Ao sair, as cores somem e o traço se desfaz aos poucos.
Você pode estar procurando isto se pediu algo assim
- aquele texto gigante do site da xAI que acende quando passa o mouse
- nome da marca enorme no rodapé que aparece com o mouse
- letras vazadas que ficam coloridas onde o cursor passa
- efeito de lanterna revelando o contorno de uma palavra
- logo em texto gigante com gradiente arco-íris no hover
- palavra escondida que só aparece quando a pessoa mexe o mouse
Também chamado de
- texto vazado
- outline text hover
- gradient stroke text
- spotlight text
- wordmark animado
- texto em contorno
- texto que acende no hover
Quando usar
- Wordmark gigante no rodapé, fechando a página com a marca
- Hero de produto de tecnologia com o nome em destaque
- Páginas de portfólio e de agência que pedem um detalhe interativo
- Telas de abertura com uma única palavra curta
Quando evitar
- Informação essencial, porque a palavra fica invisível até alguém passar o mouse ou o dedo
- Frases longas, porque o desenho tem proporção fixa e cabe bem só uma palavra curta
Como pedir para a sua IA
Crie um efeito de texto em contorno com SVG para o nome da marca no rodapé: palavra gigante que revela um gradiente nas cores da marca em volta do cursor, com suporte a toque, versão visível e parada para movimento reduzido e rótulo acessível.
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 Grafite
Grafite funciona no celular?
Funciona. Grafite trata eventos de toque: ao tocar e arrastar o dedo sobre a palavra, o contorno aparece e o gradiente segue o dedo, como faria com o mouse. Ao soltar, as cores somem e o traço se desfaz. O prompt do THM Componentes pede teste no celular e comparação de LCP e INP.
A palavra de Grafite fica invisível sem interação?
No código original, sim: Grafite só mostra o contorno enquanto o mouse ou o dedo está sobre a palavra. Por isso, não use para informação essencial, ou peça à IA para manter um contorno discreto visível o tempo todo, o que também resolve a versão estática para movimento reduzido.
Dá para trocar as cores do gradiente de Grafite?
Sim, e vale fazer isso ao instalar. O gradiente de Grafite lê cinco variáveis CSS, como --yellow-500, que não fazem parte do tema padrão do Tailwind v4; sem elas, o traço perto do cursor fica preto, sem o gradiente. O prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto no lugar delas.
