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
- text hover effect
- outline text hover
- gradient stroke text
- spotlight text effect
- hover reveal text
- animated wordmark
- stroke text animation
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
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 Text Hover Effect
Does Text Hover Effect work on phones?
Yes. Text Hover Effect 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 Text Hover Effect word invisible without interaction?
In the original code, yes: Text Hover Effect 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 Text Hover Effect?
Yes, and it is worth doing at install time. The Text Hover Effect gradient 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.
