Keyframe stripPro
Start, middle and end frames as drop targets, with interpolation markers between them that show each gap and insert a keyframe half way. Frames a model is filling in show the denoise placeholder.
On this page
ProStart and end frames with a middle keyframe the model is filling in. Drop an image on any slot, or add a keyframe at a gap.
Installation
Usage
import { KeyframeStrip } from "@/components/ui/chatcn/pro/keyframe-strip"
<KeyframeStrip duration={8} frames={frames} onFramesChange={setFrames} />Frames are { id, src, time, status, progress }. The first is the start, the last the end, up to maxFrames in all. Times you leave out spread evenly. Drop an image from the desktop or the page on any slot, or press it to open the file dialog; pass onRequestImage to open your own gallery instead. Removing a middle keyframe takes it out; removing the start or end empties the slot.
Examples
States
Empty, a frame that did not load with Retry, the full five, square frames disabled, and right to left.
ProEmpty, a frame that did not load, the full five, and square frames disabled.
Props
| Prop | Type | Notes |
|---|---|---|
frames, defaultFrames, onFramesChange | Keyframe[] | Start first, end last |
duration | number | Clip length in seconds. Default 5 |
maxFrames | number | Start and end included. Default 5 |
aspectRatio | number | Frame shape. Default 16 / 9 |
onRequestImage | (frameId) => void | Your picker instead of the file dialog |
onRetry | (frameId) => void | Shows Retry on a frame that failed to load |
labels | Partial<KeyframeStripLabels> | Every string, for translation |
disabled, locale |
Keyboard
| Key | Action |
|---|---|
Enter or Space on an empty slot | Choose an image |
Delete on an empty keyframe | Remove it |
Tab | Moves through slots, Replace, Remove and the insert buttons |
Accessibility
- Empty slots are buttons named with the slot, its time and what to do: "Start frame, 0 seconds: Drop an image or choose one".
- Insert buttons say the gap they split: "Add a keyframe here, 4 seconds gap".
- A rejected file says which formats work. Adding, setting and removing frames are announced politely.
Motion
- A dragged image turns the slot under it to an accent edge and swaps the hint to Drop to set: a state change, no movement.
- A new frame fades in over 200 ms. Frames being filled in settle out of the denoise placeholder. Nothing else moves.