Spotlight Card

A card that lights up under the cursor. The gradient is positioned from pointer coordinates rather than a CSS hover state, so the highlight follows the exact path of the mouse.

Motion

cardhovergradientpointer

Move your cursor across this card

A radial gradient tracks the pointer, so the surface reads as lit rather than merely hovered.

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { SpotlightCard } from "@/registry/components/spotlight-card";

export function Example() {
  return <SpotlightCard />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Motion

Marquee

An infinite scrolling row built from two duplicated tracks, with an edge mask, hover pause and a reduced-motion opt-out. No dependency and no JavaScript loop.

Flip Card

A 3D card flip on hover using preserve-3d and backface-visibility. Disabled entirely when prefers-reduced-motion is on.