Back

Spotlight Card

Satu Visual ComponentNew

A card with a radial spotlight that tracks the cursor.

Spotlight Card

Move your cursor to see the spotlight follow.

Installation

Add it with the CLI:

Terminal

$

Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.

Usage

Wrap any content. The spotlight fades in on hover and follows the pointer within the card.

Props

PropTypeDefaultDescription
childrenReactNodeCard content.
classNamestringExtra classes.
colorstringrgba(120,119,198,0.25)Spotlight color.
sizenumber350Spotlight radius in px.