Text Spotlight

spotlight text effect with hover and mobile reveal, customizable size and color.

Hover over me and watch the soft spotlight glide around like magic across the text.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/text-spotlight.json

Usage

import { TextSpotlight } from "@/components/ui/text-spotlight";

<TextSpotlight
  textClassName="text-xl md:text-4xl font-semibold"
  text="Hover over me and watch the soft spotlight glide around like magic across the text."
  spotlightColor="255, 255, 255"
  animateOnPhone={true}
  spotlightArea={90}
  spotlightSize={100}
/>

Examples

AnimateOnPhone

Hover over me and watch the soft spotlight glide around like magic across the text.

API Reference

Text Spotlight

spotlight text effect with hover and mobile reveal, customizable size and color.

Props

Property	Type	Default	Description
`text`	string	`required`	The text content to display with the spotlight or reveal animation.
`className`	string	`-`	Additional CSS classes for the container element.
`textClassName`	string	`-`	Additional CSS classes for the text element.
`spotlightColor`	string	`"255, 255, 255"`	RGB color used for the spotlight gradient effect.
`spotlightSize`	number	`450`	Defines the radius of the spotlight effect in pixels.
`spotlightOpacity`	number	`1`	Controls the opacity of the spotlight (from 0 to 1).
`spotlightArea`	number	`-`	Optional area radius for spotlight detection (not required in most cases).
`animateOnPhone`	boolean	`false`	Enables the mobile text reveal animation when true.
`colorDuration`	number	`2000`	Duration (in milliseconds) of the mobile reveal animation.
`...props`	HTMLDivElement attributes	`-`	Any other standard div attributes (like id, style, etc.).