Magic Card
A card that notices the pointer coming. As the pointer gets close, the stretch of border facing it lights up and turns to follow it around the card. Inside the card, a soft wash sits under the pointer.
The light belongs to one card and holds any content, buttons included. Spotlight Cards shares one light across a grid of link cards and lights only the edges near the pointer once it is over the grid; Spotlight is a soft blob that follows the pointer inside any element.
Examples
Usage cards
Two cards side by side. Move the pointer between them: each one lights on the side that faces it.
Storage
38.2 GB
of 100 GB
Seats
14
of 20 seats
Illustrative figures
Neutral tint
The same light in the foreground colour, reacting from further away.
Two-step sign in
Ask for a code from an authenticator app each time someone signs in from a new device
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-magic-card.jsonComponent API
MagicCard
Renders a <div> card with rounded-xl, the card background and a hairline. Every other div attribute passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| tint | 'primary' | 'neutral' | 'primary' | The colour of the light. |
| proximity | number | 120 | How far from the card, in px, the edge starts to light up. |
| spread | number | 70 | Half the width of the lit stretch of border, in degrees around the card. |
| className | string | Classes for the card, such as its padding. | |
| children | React.ReactNode | The card content. |
Accessibility and motion
- The light follows a mouse only. Touch and pen leave the card as it is.
- The card listens to the pointer only while it is on screen or close to it.
- The lit edge turns on a spring with no bounce and brightens as the pointer gets closer. The wash fades in over 300ms and out over 150ms.
- With reduced motion the edge sits exactly where the pointer is, with no spring. It still fades.
- The light layers are decorative and hidden from assistive technology.
Credits
Inspired by the magic card of Magic UI. Its orb mode is left out: a blurred coloured orb is not part of our design system.