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.

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.

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

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.