FX · Text

A pool of coloured light that follows the pointer across text.

Move your pointer over me

bash
npx shadcn@latest add https://www.rad-ui.com/r/spotlight-text.json
React
import SpotlightText from "@/components/fx/spotlight-text" <SpotlightText as="h2" text="Move your pointer over me" />
  • The real text always shows at its own colour and contrast; the light is an aria-hidden copy on top.
  • Pointer-driven only: nothing moves on its own.
  • Forced-colours mode drops the light.
PropTypeDefaultDescription
text
string
—

The text.

as
'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4'
'span'

Element to render.

colors
[string, string]
cyan, purple

Colours of the light.

radius
number
110

Light radius in px.