# Storyboard

Turns a JSON story (theme, brand, audio and a list of scenes) into a finished video whose length comes from its content.

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

Usage:

```tsx
// src/Root.tsx, then: npx remotion render Storyboard out.mp4 --props=story.json
<Composition
  id="Storyboard"
  component={StoryVideo}
  schema={storySchema}
  calculateMetadata={storyMetadata}
  defaultProps={{ scenes: [{ type: "title", title: "Hello from a story" }] }}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

Use for:

- Whole videos written as data, by hand or by an agent
- Rendering one story at 16:9, 9:16 and 1:1

Avoid:

- Scenes you lay out by hand in JSX. Use `scenes`

Dependencies:

- `@remotion/media`
- `@remotion/transitions`
- `mediabunny`
- `remotion`
- `zod`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| story | `Story` | — |  |
| scenes? | `SceneDefinition<any>[]` | `[]` | Custom scene types made with `defineScene`. |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |