Extend clipPro

Continue a clip from its last frame: a timeline with the seam and the added stretch sized to the chosen length, a composer that says the cost and turns into Stop, and the seam kept once the new frames land.

Markdown

On this page

ProAn 8 s clip continues from its last frame. Pick a length and Extend: the new stretch fills from the seam.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/extend-clip

Usage

tsx

import { ExtendClip } from "@/components/ui/chatcn/pro/extend-clip"

<ExtendClip
  duration={8}
  frames={thumbnails}
  status={status}
  progress={progress}
  onExtend={({ prompt, seconds, cost }) => extend(prompt, seconds)}
  onStop={cancel}
/>

Pass a few thumbnails along the clip; they tile the timeline. The last one, or lastFrame, is what the extension continues from, outlined on the timeline and shown in the composer. Drive status through generating with progress, then done with resultFrames, or error with an error message and onRetry.

Examples

States

Half way through, done with the seam kept, failed, short on credits and right to left.

ProHalf way through, done with the seam kept, failed and short on credits.

Props

Prop	Type	Notes
`duration`	`number`	Required. The clip so far, in seconds
`frames`	`string[]`	Required. Thumbnails along the clip
`lastFrame`, `lastFrameAlt`	`string`	Default the last of `frames`
`options`	`number[]`	Lengths to add. Default 2, 4 and 6
`seconds`, `defaultSeconds`, `onSecondsChange`	`number`
`value`, `defaultValue`, `onValueChange`	`string`	The prompt
`limits`, `balance`		Pricing, and a hold when it costs more than the balance
`onExtend`	`(request) => void`	Prompt, seconds and cost
`status`, `progress`, `onStop`	`"idle" \| "generating" \| "done" \| "error"`	Progress 0 to 1
`resultFrames`	`string[]`	The new frames, once done
`error`, `onRetry`		What went wrong and how to fix it
`placeholder`, `disabled`, `locale`

Keyboard

Key	Action
`Enter`	Extend. Never while composing with an IME
`Esc`	Stop while extending
`←` `→` on the lengths	Pick how much to add

Accessibility

The timeline is one image whose name says it all: "Clip of 8 seconds, extended by 4 seconds to 12 seconds, 55% rendered".
Lengths are named with their cost. A failure is an alert that says the clip is unchanged and what to try.
Done and failed are announced politely, once.

Motion

The extension fills from the seam as progress reports arrive (a transform, eased between reports), with the kit's text shimmer on the percentage.
New frames fade in over 200 ms and the seam stays drawn. A new length resizes the dashed preview at once: it is a setting, not an event.