# Spotlight Card

Cursor-tracked radial light that rims a card and lifts it from the dark.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/spotlight-card
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { SpotlightCard } from "@/components/framecn/spotlight-card";
```

```tsx
<SpotlightCard />
```

## API Reference

### SpotlightCard

| Prop               | Type        | Default                                                                |
| ------------------ | ----------- | ---------------------------------------------------------------------- |
| `title`            | `string`    | `"Spotlight Card"`                                                     |
| `body`             | `string`    | `"Soft radial light follows the cursor, picking out the microborder."` |
| `cardWidth`        | `number`    | `520`                                                                  |
| `cardHeight`       | `number`    | `320`                                                                  |
| `glowSize`         | `number`    | `600`                                                                  |
| `glowOpacity`      | `number`    | `0.08`                                                                 |
| `background`       | `string`    | `"#050505"`                                                            |
| `cardColor`        | `string`    | `"#0a0a0a"`                                                            |
| `textColor`        | `string`    | `"#fafafa"`                                                            |
| `mutedColor`       | `string`    | `"#71717a"`                                                            |
| `speed`            | `number`    | `1`                                                                    |
| `fps`              | `number`    | `30`                                                                   |
| `durationInFrames` | `number`    | `150`                                                                  |
| `className`        | `string`    | `-`                                                                    |
| `children`         | `ReactNode` | `-`                                                                    |

## Notes

  A radial spotlight follows the cursor and rims the card edges. Creates a
  dramatic lifting effect from a dark background.