Spotlight Card

hot

A card lit by your pointer — a soft pool of light inside and a brighter rim where the light catches the border.

pointercss-varsmask4 files · 216 locdeps: clsx, tailwind-merge

Requests are served from 300+ locations within 50 ms of your users.

Every deploy is immutable. Go back in time with a single click.

Traces, logs and metrics stitched together for every request.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/spotlight-card.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs spotlight-card

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

<SpotlightCard className="p-6">…</SpotlightCard>

Prop	Type	Default	Description
color	string	"rgba(124,92,255,0.16)"	Light pooling inside the card.
borderColor	string	"rgba(167,139,250,0.75)"	Light on the border.
radius	number	360	Spotlight radius (px).
...props	HTMLAttributes<div>	—	Passed to the card element.

Pointer position is written to CSS variables from one rAF loop — React never re-renders while you move, and the loop sleeps when idle.