# Code Live

Code types beside a live preview pane that swaps images the moment typing crosses each preview's line. A content-derived schedule, not a hand-timed cut.

```bash
npx shadcn add https://www.reelcn.dev/r/code-live.json
```

Usage:

```tsx
<Composition
  id="CodeLive"
  component={CodeLive}
  schema={codeLiveSchema}
  defaultProps={codeLiveDefaults}
  calculateMetadata={codeLiveMetadata}
  width={1920} height={1080} fps={30} durationInFrames={1}
/>
```

Use for:

- A dev-tool or API launch that shows the code and its result side by side
- A tutorial beat where the reader sees code and output update together

Avoid:

- A single static code block with no preview. Use `code-block` directly

Dependencies:

- `remotion`
- `zod`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| code | `string` | — |  |
| theme? | `"daylight" \| "midnight" \| "mono" \| "ledger" \| "afterglow" \| "chromewave" \| "neon" \| "paper" \| "sunset"` | — | Theme preset. Inherits the surrounding `ThemeProvider` when omitted. |
| brand? | `{ accent?: string; logo?: string; font?: string; }` | — |  |
| sfx? | `boolean` | — | Plays a soft whoosh as each scene starts. |
| music? | `string` | — | Background music file, looped under everything at 25% volume. |
| language? | `"ts" \| "js" \| "tsx" \| "py" \| "bash" \| "json"` | — |  |
| previews? | `{ atLine: number; src: string; }[]` | `[]` | Screenshots to swap in as typing crosses each `atLine`. Omitted: the preview pane stays a plain surface fill, this default has no local asset to point at (Task 20 final-gate fix: the previous `/preview-empty.png`/`/preview-filled.png` defaults were local paths with no file behind them, broken in any real consumer project). Pass real screenshot URLs to see the swap. |