Spotlight Cards
A grid of link cards where one soft light follows the mouse across the whole grid and catches the borders nearby.
Examples
Primary tint
The light uses the primary colour. Move the mouse between two cards: both edges catch it.
Sprint boardTwo-week cycles with a backlog and a review column5 steps
Bug triageSort new reports by impact before they reach a sprint4 steps
Launch checklistEverything that has to be true on release day9 steps
Code review rotaShare reviews fairly across the team each week3 steps
OnboardingA first week plan for someone joining the team7 steps
Incident follow-upTimeline, causes and actions after an outage1 step
Neutral tint
The same light in the foreground colour, for settings and quieter pages.
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-spotlight-cards.jsonComponent API
SpotlightCards
The grid that tracks the mouse. Renders a <div> with grid gap-3; set the columns with className.
| Prop | Type | Default | Description |
|---|---|---|---|
| tint | 'primary' | 'neutral' | 'primary' | The colour of the light. |
| className | string | Classes for the grid. | |
| children | React.ReactNode | The SpotlightCard items. |
SpotlightCard
A card that is a link. Renders an <a>: href and every other anchor attribute pass through. Its children stack in a column.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Classes for the card. | |
| children | React.ReactNode | The card content. |
Accessibility and motion
- The light follows a mouse only. Touch and pen leave the cards as they are.
- The light trails the pointer on a spring with no bounce. With reduced motion it sits exactly under the pointer, and it fades in and out the same way.
- The light layers are decorative and hidden from assistive technology.
Credits
Inspired by the spotlight cards of UI Layouts, rebuilt on our tokens and motion.