# Grafite Uma palavra gigante só em contorno aparece quando o mouse passa e ganha, perto do cursor, as cores que você definir. > Grafite é um componente do THM Componentes que exibe uma palavra gigante só em contorno: quando o mouse ou o dedo passa por cima, o traço aparece e, perto do cursor, ganha as cores de um gradiente definido em variáveis CSS. Em SVG, ocupa a largura disponível e serve como wordmark no hero ou rodapé. - 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 - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/grafite/ ## 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 ```text 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. ## Componentes relacionados - [Pupila](https://vibecode.thmtecnologia.com/componentes/pupila/): Um círculo que segue o mouse e, sobre o título, cresce para revelar uma segunda mensagem escondida. - [Miçanga](https://vibecode.thmtecnologia.com/componentes/micanga/): Uma palavra desenhada com milhares de pontinhos coloridos que se espalham quando o mouse passa e voltam ao lugar. - [Vaivém](https://vibecode.thmtecnologia.com/componentes/vaivem/): Um título em que cada letra fica mais fina ou mais grossa numa onda contínua e engrossa perto do mouse. - [Estêncil](https://vibecode.thmtecnologia.com/componentes/estencil/): Um título em letras grandes com um vídeo tocando por dentro, como se as letras fossem janelas para a cena. - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. --- 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.