Components
SpotlightCard
Card surface with a radial glow that tracks the cursor on hover.
SpotlightCard is a bordered surface with a soft radial glow that follows the
cursor while hovering — the signature hover used by Linear/Vercel-style
dashboards. Tune the effect with glowColor, radius (px), and intensity
(peak opacity, 0–1). It's pointer-driven only, so it adds no ambient motion
and stays calm when idle. Use it for clickable cards and dashboard tiles.
Example
Preview
Hover for the spotlight
Cursor-following glow for premium dashboard cards.
import { SpotlightCard } from '@officina/ui';
<SpotlightCard radius={300} intensity={0.15}>
<h3>Analytics</h3>
<p>Track usage in real time.</p>
</SpotlightCard>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| glowColor | string | var(--color-accent) | Glow color. Defaults to the accent token. |
| intensity | number | 0.12 | Peak glow opacity (0–1). |
| radius | number | 280 | Glow radius in pixels. |