Spotlight Cards
One light follows the cursor across the whole grid: borders glow near the pointer, even on cards you aren't touching.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The Linear / Vercel spotlight-border effect done right: a single pointer handler writes per-card coordinates, so the light flows continuously across gaps between cards, plus an inner spotlight on the hovered card.
Installation
$ npx shadcn@latest add https://guetix.com/r/spotlight-cards.json
Uses the shadcn CLI. It creates components/guetix/spotlight-cards.tsx and installs nothing else.
Usage
example.tsx
import { SpotlightCards } from "@/components/guetix/spotlight-cards";
export default function Example() {
return <SpotlightCards />;
}
Feature gridsPricingDocs indexesDashboards
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Border = a 1px padding wrapper whose background is a radial gradient at the cursor.
- 02Coordinates are CSS variables per card, so moving the pointer causes no React re-renders.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title; body; icon? }[] | — | Cards. |
| color | string | "#4ade80" | Spotlight color. |
| radius | number | 260 | Light radius (px). |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |