Text Spotlight

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

Installation

npx shadcn@latest add @scrollxui/text-spotlight

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

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.).