Text Hover Gradient
Outlined text filled by a gradient on hover (x.ai style), with a spotlight that follows the cursor to reveal color.
Renders the text as an SVG outline that draws itself once on mount; on hover, a gradient spotlight follows the cursor and progressively fills the outline with spectrum color.
npx shadcn@latest add https://webberui.com/r/text-hover-gradient.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<TextHoverGradient />
Installation
npx shadcn@latest add https://webberui.com/r/text-hover-gradient.jsonOr, once registries are configured in components.json, install it as @webberui/text-hover-gradient.
Usage
import { TextHoverGradient } from "@/components/ui/text-hover-gradient";
<TextHoverGradient text="webber" className="text-6xl font-bold" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text to outline and fill (single line) |
colors | string[] | alternating warm/cool spectrum | Gradient stop colors, laid out horizontally |
strokeWidth | number | 0.75 | Stroke width (in user units relative to the viewBox height of 100) |
drawDuration | number | 3.5 | Duration of the self-drawing outline on mount (seconds); set 0 to disable |
followDuration | number | 0.28 | How long the spotlight takes to settle onto the cursor (seconds) |
spotlight | string | "22%" | Spotlight radius (a viewBox percentage string) |
fontSize | number | 56 | Font size (SVG user units); the text is centered in a 300x100 viewBox |
Accessibility
- When the user has "reduce motion" enabled at the system level, the self-drawing outline and spotlight animation are skipped and the complete gradient outline is shown directly
- Scaling is handled by the
viewBox, so the font size and stroke width adapt proportionally to the container
Typewriter Text
The classic typewriter effect — text typed out character by character with a blinking cursor, with looping and deletion across multiple strings.
Text Pressure
Characters scale and deform in real time inside the cursor's pressure field (variable fonts) — the closer the cursor, the wider, heavier, and more slanted they get.