VideoGen

A compound component for rendering video generation progress. Handles the full lifecycle: idle, queued, processing, rendering, done, and error.

VideoGen — Interactive Demo

state: idle

VideoGen — All 6 States

Import

tsx

import { VideoGen } from "@arc-lo/ui";

Basic usage

tsx

<VideoGen.Root state="processing" poster={posterUrl} progress={42}>
  <VideoGen.Placeholder />
  <VideoGen.Thumbnail />
  <VideoGen.Player />
  <VideoGen.Progress />
  <VideoGen.StageLabel />
  <VideoGen.PlayButton />
  <VideoGen.ErrorFallback />
</VideoGen.Root>

With toolbar and callbacks

tsx

<VideoGen.Root
  state={state}
  src={videoUrl}
  poster={posterUrl}
  progress={progress}
  aspectRatio="16/9"
  duration={duration}
  prompt="A cat riding a skateboard"
  onRetry={() => regenerate()}
  onDownload={() => saveVideo()}
  onPlay={() => analytics.track("play")}
>
  <VideoGen.Placeholder />
  <VideoGen.Thumbnail />
  <VideoGen.Player autoPlay muted loop />
  <VideoGen.Progress />
  <VideoGen.StageLabel />
  <VideoGen.PlayButton />
  <VideoGen.ErrorFallback message="Generation failed." />
  <VideoGen.Toolbar>
    <button onClick={onDownload}>Download</button>
  </VideoGen.Toolbar>
</VideoGen.Root>

States

State	Description	Visible parts
`idle`	No generation in progress	Placeholder
`queued`	Waiting in generation queue	Placeholder, Progress
`processing`	Model is generating frames	Thumbnail, Progress, StageLabel
`rendering`	Final rendering / encoding	Thumbnail, Progress, StageLabel
`done`	Video ready for playback	Player or Thumbnail, PlayButton, Toolbar
`error`	Generation failed	ErrorFallback

Props

Root

Prop	Type	Default	Description
`state`	`VideoGenState`	—	Current generation state
`src`	`string \| null`	—	Video source URL when done
`poster`	`string \| null`	—	Thumbnail / poster image URL
`progress`	`number`	—	Progress percentage (0-100)
`aspectRatio`	`string`	`"16/9"`	CSS aspect-ratio for the container
`duration`	`number \| null`	—	Video duration in seconds
`prompt`	`string`	—	Generation prompt text
`onRetry`	`() => void`	—	Called when retry is clicked in error state
`onDownload`	`() => void`	—	Called when download is triggered
`onPlay`	`() => void`	—	Called when play button is clicked