Shot storyboardPro

A storyboard of shot cards: prompt, camera move and length edited in place, reorder by drag or keyboard, and Generate all with the total cost on the button.

Markdown

On this page

ProFive shots with a prompt, camera move and length each, one already made. Drag to reorder, edit in place, then Generate all with the total cost on the button.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/shot-storyboard

Usage

tsx

import { ShotStoryboard } from "@/components/ui/chatcn/pro/shot-storyboard"

<ShotStoryboard shots={shots} onShotsChange={setShots} limits={limits} balance={credits} onGenerateAll={run} />

Shots are { id, prompt, camera, duration, thumbnail, status, progress }. Camera and length open the camera-motion-picker and duration-picker. A short balance holds Generate all and says how much is missing.

Examples

States

ProEmpty, generating with one queued and one failed, short on credits and disabled.

Props

Prop	Type	Notes
`shots`, `defaultShots`, `onShotsChange`	`StoryboardShot[]`
`limits`, `balance`
`onGenerateAll`, `onGenerate`, `onRetry`, `onStop`
`createShot`, `maxShots`, `aspectRatio`
`labels`, `disabled`, `locale`

Keyboard

Key	Action
`Alt` + arrows on a card	Move it one place
`Home`, `End` with `Alt`	First or last

Accessibility

Cards name their number, length and camera move; moves are announced.

Motion

Reordered cards glide 220 ms (FLIP); keyboard moves land at once.