Text Hover Gradient: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add text-hover-gradient.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Font sizefontSize

Stroke widthstrokeWidth

0.75

Spotlight radiusspotlight

Cursor follow duration (s)followDuration

0.28

Stamp draw duration (s)drawDuration

3.5

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TextHoverGradient/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/text-hover-gradient.en.json

Or, 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

Text Hover Gradient