# Grafite A giant outlined word appears when the mouse passes over it and takes on your chosen colors near the cursor. > Grafite is a THM Componentes component that shows a giant outlined word: when the mouse or a finger passes over it, the stroke appears and, near the cursor, takes on the colors of a gradient set in CSS variables. Built in SVG, it fills the available width and works as a hero or footer wordmark. - Category: Text and typography - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/grafite/ ## What it looks like Picture a huge word written only with the outlines of its letters, in bold Helvetica, spanning the available width. Without the mouse over it, it stays invisible. When the mouse enters, the outline shows up in light gray, or dark gray in dark mode, and a second stroke draws itself on top over four seconds. Around the cursor, like a flashlight beam, the stroke takes on the colors of a gradient that follows every move; the five colors come from CSS variables your project needs to define. On phones, dragging a finger does the same. When you leave, the colors vanish and the stroke slowly undraws. ## You may be looking for this if you asked for something like - “that giant text on the xAI website that lights up on hover” - “a huge brand name in the footer that appears with the mouse” - “outlined letters that turn colorful where the cursor goes” - “a flashlight effect revealing the outline of a word” - “a giant text logo with a rainbow gradient on hover” - “a hidden word that only shows when someone moves the mouse” ## Also known as outline text hover, gradient stroke text, spotlight text effect, hover reveal text, animated wordmark, stroke text animation, cursor gradient text ## When to use - A giant footer wordmark that closes the page with your brand - A tech product hero with the product name front and center - Portfolio and agency pages that call for an interactive detail - Splash screens with a single short word ## When to avoid - Essential information, since the word stays invisible until a mouse or finger passes over it - Long phrases, because the drawing has a fixed aspect ratio that fits one short word ## How to ask your AI ```text Create an SVG outline text effect for the brand name in my footer: a giant word that reveals a gradient in my brand colors around the cursor, with touch support, a visible still version for reduced motion and an accessible label. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Grafite ### Does Grafite work on phones? Yes. Grafite handles touch events: touching and dragging a finger over the word shows the outline and makes the gradient follow the finger, just like the mouse. Lifting the finger clears the colors and undraws the stroke. The THM Componentes prompt asks for testing on mobile and comparing LCP and INP. ### Is the word in Grafite invisible without interaction? In the original code, yes: Grafite only shows the outline while the mouse or a finger is over it. So do not use it for essential information, or ask your AI to keep a subtle outline visible at all times, which also covers the still version for reduced motion. ### Can I change the gradient colors in Grafite? Yes, and it is worth doing at install time. The gradient in Grafite reads five CSS variables, such as --yellow-500, that are not part of the default Tailwind v4 theme; without them, the stroke near the cursor turns black instead of showing the gradient. The THM Componentes prompt tells your AI to use your project color tokens instead. ## Related components - [Pupila](https://vibecode.thmtecnologia.com/en/components/pupila/): A circle follows the mouse and, over the headline, grows to reveal a second hidden message. - [Miçanga](https://vibecode.thmtecnologia.com/en/components/micanga/): A word drawn with thousands of tiny colored dots that scatter when the mouse passes and drift back into place. - [Vaivém](https://vibecode.thmtecnologia.com/en/components/vaivem/): A headline where each letter grows thinner or bolder in a continuous wave and turns heavy near the mouse. - [Estêncil](https://vibecode.thmtecnologia.com/en/components/estencil/): A large headline with a video playing inside it, as if each letter were a window onto the scene. - [Luar](https://vibecode.thmtecnologia.com/en/components/luar/): A card with a soft circular glow that follows the cursor and fades when the mouse leaves. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).