Spotlight
A radial spotlight that follows the pointer inside a card, with an optional glow along the border; add the elyri-spotlight__item class to any inner element to light up its own border. Great for feature grids and pricing cards.
Elyri SpotlightMove your pointer across the card
Customize
Color
#7c8cffProps
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Card content |
color | string | '#7c8cff' | Color of the spotlight and the border glow |
size | number | 240 | Spotlight radius in pixels |
glow | boolean | true | Whether to show the radial glow that follows the pointer inside the card |
borderGlow | boolean | true | Whether to light up the border near the pointer |
radius | number | 16 | Card corner radius in pixels |
className | string | — | Extra class name |
Dependencies
PointerEvent