Browse components
Text Spotlight
Dimmed text with a soft, gradient-lit spotlight that trails your cursor and drifts on its own when idle.
Installation
npx shadcn@latest add @glint-ui/text-spotlightFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/text-spotlight.json
Usage
import { TextSpotlight } from "@/components/ui/text-spotlight";
<TextSpotlight text="Great interfaces are felt before they are understood." radius={180} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Great interfaces are felt before they are understood. Move closer and the words light up." | Text to render. |
| radius | number | 180 | Spotlight radius, in px. |
| dim | number | 0.14 | Opacity of the unlit text, 0–1. |
| from | string | "#a3e635" | Lit gradient start color. |
| to | string | "#22d3ee" | Lit gradient end color. |
| smoothing | number | 0.85 | Follow lag, 0 = instant, closer to 1 = floatier. |
| autoPlay | boolean | true | Drift the light on its own while the pointer is away. |
| className | string | — | Extra classes for the root element. |