Video Gen Loader
The Image Gen Loader for clips: the same latent and grain, with detections tracking through the shot, resolving into a playing video.
Your video will appear here
In use
The Video Studio's clip while it generates, starting from the first keyframe, until the player takes over.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
Installs Image Gen Loader too: the layers are shared, so any of them composes into a video loader.
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/video-gen-loader.jsonVideoGenLoader
| Prop | Type | Default |
|---|---|---|
| status | "idle" | "queued" | "generating" | "ready" | "moderated" | "error"Where the generation is. A "ready" clip that fails to load shows as "error". | — |
| progress | number0–1. Omit while the backend reports none. | — |
| src | stringFinal clip, revealed once status is "ready" and its first frame loads. | — |
| alt | stringDescribe the clip, e.g. with its prompt. | — |
| aspectRatio | number | stringA number, CSS "16 / 9", or the API's "16:9". | 1 |
| source | stringImage worked from, e.g. the first keyframe of an image-to-video run. | — |
| error / onRetry | ReactNode / () => voidFailure message, and a retry action except when moderated. | — |
| actions | ReactNodeShown on the revealed clip, top right. | — |
Parts
| Prop | Type | Default |
|---|---|---|
| VideoGenLoaderRoot | ImageGenLoaderRoot propsThe frame, with video announcements and playback state. | — |
| VideoGenLoaderVideo | <video> propsThe clip: muted, looping, paused off screen. | — |
| VideoGenLoaderControls | <div> propsPlay and sound toggles, bottom left. | — |
| VideoGenLoaderIdle / Error | as in Image Gen LoaderWorded for video. | — |
| useVideoGenLoader | () => { video, playing, muted, currentTime, duration, … }The clip and its playback, as useVideoPlayer, for your own controls. | — |