Spotlight Card

A card lit under the pointer, with nothing moving.

cards
glow
light
surface
grid
calm

Spotlight

Nothing moves. The surface just notices where you are.

Quick usage

usage

import { SpotlightCard } from "@pinky-ui/components";

<SpotlightCard size={300} intensity={0.5}>
  <Feature />
</SpotlightCard>

Presets

Subtle

A hint of warmth.

size={240} intensity={0.3}

Soft

The default.

size={300} intensity={0.5}

Cloud

Cool light instead of warm.

color={"var(--color-cloud-100)"} intensity={0.6}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add spotlight-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
size	number	300	Diameter of the light pool, in px.
intensity	number	0.5	Peak brightness, 0–1.
color	string	blush-100	Any CSS colour.
radius	"lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
padded	boolean	true	Turn off for edge-to-edge media.

Accessibility

The light layer is aria-hidden and non-interactive.
No movement at all, so it is safe in dense layouts and beside text.
Never used as the only signal of state — pair it with real styling.

Reduced motion

With prefers-reduced-motion: reduce, the light stops tracking the pointer. Nothing else changes, because nothing else moved.

When to use

Grids of many cards, where per-card motion would be noise
Documentation and content surfaces
Anywhere Jelly Card would be too much

When not to use

As a hero surface — it is deliberately quiet
Over photography, where the light gets lost