Text Hover Effect for React

Text Hover Effect draws a word as a thin outline, tracing each letter in as the page loads, then lights the outline in colour where the pointer goes: a soft round light follows the pointer and turns the outline under it into a gradient, like a torch passing over neon tubing. When the pointer leaves, the light fades and the outline stays.

Use it for one big display word: a brand, a hero, a section title. To flood the outline with a solid fill, use Outline Text; for tubes that glow on their own, Neon Text; to light plain text, Spotlight Text. It's SVG text in your own font: a CSS keyframe animation of the outline's dashes draws it in, and the coloured copy is masked by a soft circle whose centre is two registered CSS properties that each move of the pointer writes, with no animation library. It sets one line: SVG text doesn't wrap.

Installation

Usage

import { TextHoverEffect } from "@/components/ui/text-hover-effect";

<h2>
  <TextHoverEffect text="Electric" />
</h2>

Demos

Colors

colors are the colours the outline lights up in, any CSS colours, including your theme's variables, spread from the start of the word to its end. By default yellow, red, blue, cyan and violet.

Link

Inside a link, keyboard focus lights the whole word, since a keyboard can't point at part of it.

Accessibility

Screen readers read the word once, from a visually hidden copy; the drawing is hidden from them. The outline is there whether or not the pointer is, so the word always reads; keyboard focus on a link around it lights the whole word, and on a touch screen a touch lights the spot under the finger. The outline is the text's colour at reduced strength, which reads well at display sizes; give it a heavy weight. With reduced motion the outline is there from the start and the light follows the pointer without gliding.

FAQ

API Reference