Animated Components

Spotlight Button

An animated CTA button with shimmer, glow, and motion-driven emphasis for marketing sections and feature launches.

This preview is live. Click the primary button to verify the motion, hover, and pressed states instead of relying on a prerecorded video.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add spotlight-button to your project.

npm install motion class-variance-authority lucide-react

If you are wiring the component manually, install the package dependencies shown below.

npm install motion class-variance-authority lucide-react

Import Spotlight Button from your local UI registry output.

Import

import { SpotlightButton } from "@/components/animated/spotlight-button";

import { SpotlightButton } from "@/components/animated/spotlight-button";

Use SpotlightButton when you want a single call-to-action to feel more cinematic than a standard button.

Pair the component with a short badge and a concise action label.

This preview is live. Click the primary button to verify the motion, hover, and pressed states instead of relying on a prerecorded video.

Switch to the neutral variant when the button sits inside a denser card or dashboard surface.

Use the badge prop to tune urgency without rewriting the rest of the component structure.

Tap again to toggle the label state.

SpotlightButton extends the native button element and adds lightweight animation props through Motion.

prop	type	default	description
variant	"default" \| "neutral"	"default"	Chooses between a bright promotional surface and a quieter card-style treatment.
size	"default" \| "lg"	"default"	Controls padding, min-height, and icon spacing.
badge	string	"New"	Small uppercased pill shown ahead of the label.
disabled	boolean	false	Disables interaction while preserving the layout.