Spotlight Card · remocn

A card with a moonlight-cool radial spotlight that follows a synthetic cursor and lights up its microborder.

A bento-style card primitive in the dark. A virtual cursor traces a slow Lissajous figure-8 across the card surface; under it, a wide radial gradient softly lights the inside while a brighter, narrower gradient bleeds through a 1px wrapper to pick out the microborder. The cursor lags by exactly one frame so the highlight feels organic instead of robotic.

Installation

$ pnpm dlx shadcn@latest add @remocn/spotlight-card

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { SpotlightCard } from "@/components/remocn/spotlight-card";

const SpotlightCardScene = () => (
  <SpotlightCard title="Your feature" body="Two-line description goes here." />
);

export const RemotionRoot = () => (
  <Composition
    id="SpotlightCard"
    component={SpotlightCardScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`title`	`string`	`"Spotlight Card"`	Heading shown when no children are provided.
`body`	`string`	`"Soft radial light follows the cursor, picking out the microborder."`	Body copy shown when no children are provided.
`cardWidth`	`number`	`520`	Card width in pixels.
`cardHeight`	`number`	`320`	Card height in pixels.
`glowSize`	`number`	`600`	Diameter (px) of the radial spotlight.
`glowOpacity`	`number`	`0.08`	Maximum alpha of the surface glow. Keep this low to stay lunar.
`background`	`string`	`"#050505"`	Page background color around the card.
`cardColor`	`string`	`"#0a0a0a"`	Card surface color.
`textColor`	`string`	`"#fafafa"`	Heading color.
`mutedColor`	`string`	`"#71717a"`	Body copy color.
`speed`	`number`	`1`	Playback speed multiplier.
`className`	`string`	—	Optional className passed to the root container.
`children`	`ReactNode`	—	Override the default title/body slot with custom content.

Notes

Keep the light cold

Use white or near-white glow at very low opacity (0.05–0.1). Brand-colored glow tends to read as cheap when amplified by the radial gradient.