Cursor & pointer
Border light
A comet of light that orbits a card’s border. Bring the pointer close and it swings round to meet it on a spring, brightening as you approach; move away and it resumes its orbit.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { BorderLight } from '@vizzele/react';
<BorderLight className="pricing-card" speed={70}>
<h3>Pro</h3>
…
</BorderLight>Props
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 70 | Orbit speed (deg/s). |
width | number | 1.5 | Ring width (px). |
proximity | number | 200 | How near the pointer must be (px). |
as | ElementType | 'div' | Element. |
Accessibility
- Pure decoration on your own element: no roles added, nothing focusable.
- Runs only while on screen; with reduced motion the light holds still and only brightens near the pointer.