Signature

Spotlight card

A card with a soft accent glow (and a pixel grid) that follows the pointer. The position is written to CSS variables on pointer move, so React never re-renders; keyboard focus inside the card lights it from the center.

Spotlight card

Follows the pointer

demos/spotlight-card.tsx

import { SpotlightCard } from "pixelbits/spotlight-card";

export default function Demo() {
  return (
    <SpotlightCard className="grid min-h-56 w-full max-w-md content-end gap-1.5 p-6">
      <span className="font-pb-mono text-[0.625rem] uppercase tracking-[0.12em] text-pb-muted">
        Spotlight card
      </span>
      <h3 className="text-xl font-light tracking-tight">Follows the pointer</h3>
    </SpotlightCard>
  );
}

Installation

npm: import

import { SpotlightCard } from "pixelbits/spotlight-card";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/spotlight-card.json

API

<SpotlightCard>

Example

<SpotlightCard className="p-6"><h3>Follows the pointer</h3></SpotlightCard>

Prop	Type	Default	Description
radius	number	260	Radius of the glow in px.
grid	boolean	true	Also reveal a fine pixel grid under the pointer.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.