# Tutorial

Step-by-step coding tutorial: typed code, terminal sessions and screenshots, one step per scene, timed to the typing.

```bash
npx shadcn add https://www.reelcn.dev/r/tutorial.json
```

Usage:

```tsx
<Composition
  id="Tutorial"
  component={Tutorial}
  schema={tutorialSchema}
  defaultProps={tutorialDefaults}
  calculateMetadata={tutorialMetadata}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

Use for:

- Getting-started guides and "how to" videos for developer tools
- Walking through a setup one command at a time

Avoid:

- A single snippet. Use `code-block`

Dependencies:

- `zod`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | — |  |
| steps | `{ kind: "code" \| "screen" \| "terminal"; content: string; language?: "ts" \| "js" \| "tsx" \| "py" \| "bash" \| "json"; zoom?: boolean; }[]` | — |  |
| 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. |