Spotlight Text

Text that acts as a stencil, revealing a fluid, interactive background spotlight effect.

Preview

Spotlight

Custom Colors

Neon

Custom Container

Explore

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/spotlight-text.json

Props

PropTypeDefaultDescription
textstring-The text to display.
spotlightColorsstring[]['#3b82f6', '#ef4444', '#22c55e']Array of 3 colors for the spotlight shapes.
containerClassNamestring-Class for the outer container.
classNamestring-Class for the text element.