Cursor & pointer
Spotlight
Light that follows the pointer across a surface — the border starts glowing before the pointer even arrives.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { SpotlightCard } from '@vizzele/react';
<div className="grid">
{features.map((f) => (
<SpotlightCard key={f.title} proximity={160}>
<h3>{f.title}</h3>
<p>{f.text}</p>
</SpotlightCard>
))}
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
proximity | number | 160 | Distance (px) outside the element where the light starts appearing. |
spring | SpringConfig | SpringPreset | 'snappy' | How the light follows. |
--vz-spot-size | CSS length | 320px | Size of the light (CSS variable). |
Accessibility
- Decorative only; content contrast never depends on the light.
- Works with touch (lights where you tap); static under reduced motion is fine since nothing moves.