Video prompt barPro

The video prompt: start and end frame slots above the text, and chips for length, aspect and camera motion in the line. The cost follows the length, a short balance blocks Generate with the reason, and Generate turns into Stop while the clip renders.

Markdown

On this page

ProA start frame, length, aspect and a dolly move in the line. Generate renders and turns into Stop; the cost follows the length.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/video-prompt-bar

Usage

tsx

import { VideoPromptBar } from "@/components/ui/chatcn/pro/video-prompt-bar"

<VideoPromptBar
  limits={{ minSeconds: 2, maxSeconds: 10, creditsPerSecond: 4 }}
  balance={credits}
  status={status}
  onGenerate={({ prompt, params, cost }) => render(prompt, params)}
  onStop={cancel}
/>

It is the free prompt-input with what a video needs in the line. Each chip opens the full editor in a popover: the duration-picker for length, the free aspect-ratio-picker and the camera-motion-picker. Drop an image on either frame slot, or press it to choose a file. params holds the length, aspect, camera moves and both frames, controlled or not.

The cost is limits.creditsPerSecond times the length unless you pass getCost. When a run costs more than balance, Generate stays off, Enter says why, and a line under the bar says how many credits are missing. The text stays editable so nothing typed is lost.

Examples

States

Both frames with two moves, a balance too low for 10 s, generating, disabled and right to left.

ProStart and end frames with two moves, a balance too low for 10 s, generating and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	The prompt
`params`, `defaultParams`, `onParamsChange`	`VideoPromptParams`	`duration`, `aspect`, `camera`, `startFrame`, `endFrame`
`limits`	`VideoModelLimits`	Min, max, step and credits per second
`modelName`	`string`	Named in the length limit line
`durations`	`number[]`	One tap lengths. Default 5 and 10
`aspectRatios`	`string[]`	Default 16:9, 9:16, 1:1, 4:3, 21:9
`getCost`	`(params) => number`	Default from `limits` and the length
`balance`	`number`	Generate is held while a run costs more
`onGenerate`	`(request) => void`	Prompt, params and cost
`status`, `onStop`	`"idle" \| "submitting" \| "generating"`	Generating turns Generate into Stop
`endFrame`	`boolean`	Offer an end frame slot. Default true
`variant`	`"default" \| "floating" \| "hero"`	The `prompt-input` surfaces
`disabled`, `placeholder`

Keyboard

Key	Action
`Enter`	Generate. Never while composing with an IME
`Shift` + `Enter`	New line
`Esc`	Stop while generating; close a chip editor
`Enter` or `Space` on a frame slot	Choose an image

Accessibility

Every chip is a button named with its parameter and value: "Length: 5 s", "Camera motion: Dolly in 40%".
Frame slots are buttons ("Add start frame") and say when a frame is set or removed in a polite live region.
The cost is focusable and its tooltip names the length and the balance left.
Out of credits, the reason is in text and announced when Enter is pressed, not only shown in amber.

Motion

Chip editors grow from their chip in 180 ms. A chip whose value changes swaps its text with a 150 ms blur crossfade.
A dropped frame fades into its slot in 200 ms. Reduced motion keeps only fades.