Spotlight Card

Cursor-tracking rim light and interior glow

A card whose border rim and interior glow follow the cursor on a soft spring. The spotlight fades in on hover and trails slightly behind the pointer.

Preview

System status

All systems normal

Website24 ms

API38 ms

Database12 ms

Move your pointer across the card.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/spotlight-card.json

Usage

Import the component:

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

Use it in your code:

<SpotlightCard>
  <div className="p-6 text-center">
    <p className="text-sm font-semibold">Spotlight</p>
    <p className="mt-1.5 text-xs text-zinc-400">
      Move your cursor across this card.
    </p>
  </div>
</SpotlightCard>

Props

Property	Type	Default	Description
glowColor	string	"217, 119, 6"	RGB triplet for the rim light and interior glow.
radius	number	220	Spotlight radius in px. The interior glow uses 1.4× this value.
className	string	—	Optional CSS classes for the outer card.
children	ReactNode	—	Card content.

Components