Spotlight Card

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/spotlight-card

import { SpotlightCard } from "mischief-ui/spotlight-card"

1"use client"2 3import * as React from "react"4import { cn } from "@/lib/utils"5 6export type SpotlightCardProps = React.HTMLAttributes<HTMLDivElement> & {7  /** A theme custom property or CSS colour for the light. */8  color?: string9  /** Radius of the light in pixels. */10  size?: number11  /** Lights every card in a group at once when they share a parent. */12  followGroup?: boolean13}14 

Usage

export function Plans({ plans }) {
  return (
    <div className="grid gap-3 sm:grid-cols-3">
      {plans.map((plan) => (
        <SpotlightCard key={plan.name} followGroup className="p-5">
          <p>{plan.name}</p>
        </SpotlightCard>
      ))}
    </div>
  )
}

Nothing re-renders

The pointer position is written to custom properties on the element itself, not to React state. Moving across a grid of twelve of these updates twelve style properties and renders nothing, which is the difference between a smooth grid and a grid that stutters on a laptop.

It also means the card is an ordinary element. Wrap it in a link, put a form in it, or give it your own background, and none of that interferes with the light.

One lamp over a grid

With followGroup on, a card that receives the pointer writes the position to every sibling spotlight card as well. Each one converts the same page coordinate against its own rectangle, so the light lands where it would if a single lamp were held above the whole grid rather than one lamp per card.

The effect is quiet and worth the trouble: cards near the pointer glow slightly even though the pointer is not on them, which is what a real light does.

API

Accessibility

The light is decoration drawn behind the content and never carries meaning, so nothing is announced. It fades rather than jumps, and that fade is removed under reduced motion. Because the effect is driven by the pointer rather than by a timer, there is nothing moving for a reader who is not moving.