Text Spotlight

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

Loading...

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

Loading...

API Reference

Text Spotlight

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

Props

PropertyTypeDefaultDescription
textstringrequired
The text content to display with the spotlight or reveal animation.
classNamestring-
Additional CSS classes for the container element.
textClassNamestring-
Additional CSS classes for the text element.
spotlightColorstring"255, 255, 255"
RGB color used for the spotlight gradient effect.
spotlightSizenumber450
Defines the radius of the spotlight effect in pixels.
spotlightOpacitynumber1
Controls the opacity of the spotlight (from 0 to 1).
spotlightAreanumber-
Optional area radius for spotlight detection (not required in most cases).
animateOnPhonebooleanfalse
Enables the mobile text reveal animation when true.
colorDurationnumber2000
Duration (in milliseconds) of the mobile reveal animation.
...propsHTMLDivElement attributes-
Any other standard div attributes (like id, style, etc.).

Built withby Ahdeetai.