Plan Card Spotlight
The light rides the border instead of washing the fill, so the card can say it is the one you are on without getting between you and the price.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import type { PointerEvent as ReactPointerEvent } from "react";
import {
motion,
useMotionTemplate,
useMotionValue,
useReducedMotion,
} from "motion/react";About this pattern
A pointer-lit card for the screen where choosing is the only thing being asked: a pricing table, a plan comparison, a grid of tiers. The obvious build is a radial glow laid over the card's surface, and it is the wrong one — the wash sits between the reader and the number, and a price is the single element on a plan card that cannot afford to lose contrast. So the light is drawn on a one-pixel ring of background around an opaque inner card, which is what makes a gradient border possible at all, and only a fourteenth of that brightness is echoed inside the card as a wash. The centre is not sprung: a spotlight that lags the pointer reads as a fault rather than as softness, so the position is exact and only the strength eases, up on arrival and down on departure. Tab reaches the card too, and gets the same answer as a different shape — the whole edge lit evenly, because there is no pointer to point at and a card that answers only a mouse is a card half its readers never see respond. The three settings widen one axis: how far the light spreads, how bright it burns, and how long it takes to arrive.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Billing page
The tier under the pointer rims itself while the price on it stays at full contrast.
- Settings
Each integration card lights its own edge as the pointer crosses the grid.
Related patterns
- Payment Card FlipA saved card turns on its vertical axis to put the security code where it actually lives.
- Product Image ZoomThe product magnifies inside its own frame with the transform origin chasing the pointer.
- Paywall RevealArticle text dissolves into the page under a gradient while the upgrade offer rises beneath it.