Spotlight Card · remocn

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

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