Text Hover Effect
Giant outlined word that draws in, then glows in brand colours under the pointer.
- 2.3 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/text-hover-effect.jsonAdds components/velora/text-hover-effect.tsx, installs motion.
Examples
Footer wordmark
A site footer that ends in a giant, cropped hover wordmark.
Props
| Prop | Type | Default |
|---|---|---|
text*The word or short phrase to draw | string | — |
strokeWidthOutline width in SVG units (the glyphs are 100 units tall) | number | 0.75 |
revealRadiusRadius of the pointer reveal, as a percentage of the drawing's size | number | 28 |
drawDurationSeconds the outline takes to draw itself in on mount | number | 3 |
Also accepts every Omit<React.SVGAttributes<SVGSVGElement>, "children"> prop, forwarded to the root element.
Accessibility
- Reduced motion
- The outline appears fully drawn with no draw-in, and the spotlight does not track the pointer: hovering fades in the gradient version around the centre of the word.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- The SVG is a role="img" named by the text, so the word is read once; the stacked outline and gradient copies are not announced.