Video Generation

Preview in your theme

status='ready' — the whole render, live. Press Run: the job leaves the queue, 24 storyboard slots fill in one at a time, the bar stops at 90% until encoding finishes, and it lands on a poster with a duration chip. Click any finished frame to take the preview over (the strip is one tab stop — arrows, Home and End move between rendered frames), then 'Follow the newest frame' to hand it back. Every callback is echoed underneath.

QueuedWaiting for a worker · about 30 s left

Queued
Rendering
Encoding

Nothing rendered yet

Prompt

Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals against a cold blue street.

Storyboard· 0 of 24 frames

veo-3-fast1280×72024 fpsvgen_g3yczus92qeo

no callback fired yet

job.state='queued' — accepted, waiting for a worker. There is no schedule to draw yet, so the storyboard says so instead of faking empty slots, and the bar is indeterminate: a 0% bar reads as a job that is running and getting nowhere.

QueuedWaiting for a worker · about 2 min left

Queued
Rendering
Encoding

Nothing rendered yet

Prompt

Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals against a cold blue street.

Storyboard

The schedule hasn't been cut yet — slots appear once a worker picks the job up.

veo-3-fast1280×72024 fpsvgen_2hrt0x44j1ji

job.state='running', stage='rendering' — 9 stills back and one sampler reject at slot 5, which is why the headline says frame 11 of 24: the slot in flight is the first UNSETTLED one, not 'rendered + 1'. The reject is a visible break in the strip, not a hole.

Rendering frame 11 of 24about 40 s left34%

Queued
Rendering
Encoding

Newest 10 · 2.3 s

Prompt

Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals against a cold blue street.

Storyboard· 9 of 24 frames · 1 broke

veo-3-fast1280×72024 fpsvgen_nzjtlyz7qrj7

job.state='running', stage='encoding' — every frame exists and the muxer is writing the file. The backend reports a per-stage 30%; the encoding floor lifts it into the last tenth so the bar steps forward instead of rewinding to 30%.

Encodingabout 5 s left90%

Queued
Rendering
Encoding

Newest 24 · 5.8 s

Prompt

Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals against a cold blue street.

Storyboard· 24 of 24 frames

veo-3-fast1280×72024 fpsvgen_gn092lmj6wqd

job.state='ready' — poster, duration chip and a play control that calls onPlay (playback belongs to your player, not to this card). The storyboard stays scrubbable: pick a frame and the poster steps aside until you ask for it back.

Ready100%

Queued
Rendering
Encoding

Poster frame of "Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals ag"

0:06

Prompt

Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals against a cold blue street.

Storyboard· 24 of 24 frames

veo-3-fast1280×72024 fps0:06 clipvgen_jsw0cxk1zl25

job.state='failed' — it died at frame 8, and the seven stills it already made are kept: a failure that throws away its own output makes you re-run the expensive half. The provider error is rendered in full, wrapped, never inside a fixed-height box.

Failed while rendering7 of 24 frames finished before it stopped — they are kept below.29%

Queued
Rendering
Encoding

Frame 7 · 1.5 s

Prompt

Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals against a cold blue street.

Storyboard· 7 of 24 frames

Why it stopped

ProviderError: render aborted at frame 8 of 24 safety_filter: the shot was rejected by the content policy (category: trademark) hint: the neon sign in the reference image reproduces a registered wordmark request-id: 9f2c-7ad1-4e88 · region: us-central1 · attempt 1 of 1 Frames rendered before the stop are kept for 24 hours and are safe to download.

veo-3-fast1280×72024 fpsvgen_r1ki3gdl6so7

job.state='canceled' — you pressed Stop. Nothing is broken, so nothing is painted red and the 12 finished frames read as an outcome rather than as debris.

Canceled while rendering12 of 24 frames finished before it stopped — they are kept below.45%

Queued
Rendering
Encoding

Frame 12 · 2.8 s

Prompt

Neon-lit ramen stall in the rain, slow dolly-in on steam rising off the bowl, shallow depth of field, warm practicals against a cold blue street.

Storyboard· 12 of 24 frames

veo-3-fast1280×72024 fpsvgen_ot0n06u9rzq2

A 48-slot cut with a 550-character prompt: both caps announce themselves. The strip draws maxFrames=24 above 'Showing 24 of 48 frames' with a reveal, and the prompt clamps to two lines above 'Show the full prompt'. A cap you can see is a cap you can trust.

Ready100%

Queued
Rendering
Encoding

Poster frame of "Aerial establishing shot over a terraced rice valley at first light, camera drifting forward and slowly tilting down as "

0:12

Prompt

Aerial establishing shot over a terraced rice valley at first light, camera drifting forward and slowly tilting down as mist peels off the water. Sun rakes across the terraces from screen left; every step of water catches it a beat later than the one below, so the light walks up the hillside. A single farmer in an indigo jacket moves along the third terrace, small in frame, for scale. Grade toward pale gold highlights and deep teal shadow, mild film grain, anamorphic flares kept subtle. No text, no logos, no on-screen people beyond the farmer.

Storyboard· 48 of 48 frames

Showing 24 of 48 frames

veo-3-fast1920×108024 fps0:12 clipvgen_sc0bj2d43eyd

A 9:16 vertical cut. The preview takes its aspect ratio from width/height, so a story format is not letterboxed into a 16:9 box — and showStages={false} drops the pipeline strip for a denser card.

Ready100%

Poster frame of "Handheld follow shot down a night market alley, vertical crop for stories, sparks from a grill in the foreground."

0:04

Prompt

Handheld follow shot down a night market alley, vertical crop for stories, sparks from a grill in the foreground.

Storyboard· 12 of 12 frames

veo-3-fast720×128030 fps0:04 clipvgen_q12ko8jzrp2t

status='loading' — the status endpoint hasn't answered yet, so the skeleton holds the card's real shape (preview, bar, strip) instead of collapsing it.

status='empty' — no render has been requested at all (also what status='ready' with a null job renders).

No render yet

Describe a shot and the storyboard will fill in here, frame by frame.

status='error' — reading the job failed, which is a different failure from a render failing, so it reads differently and offers a reload instead of a re-render.

Couldn't load this render

The render service didn't answer within 10 s. request-id: 7f2c-9ad1

Loading preview…

"use client"

import * as React from "react"
import {
  Ban,
  Check,
  CircleAlert,
  CircleCheck,
  Clapperboard,
  Film,
  Hourglass,
  ImageOff,
  LoaderCircle,
  Play,

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/video-generation.json

Prompt

Build a React + TypeScript + Tailwind "VideoGeneration" card with zod and
lucide-react. It renders ONE text-to-video render job while it is still being
made, and the finished clip's poster once it lands.

Contract
- A zod schema (`videoGenerationJobSchema` in a sibling contract file) is the
  single source of truth for one job: { id, prompt, state, stage, progress,
  frames, durationS?, posterUrl?, etaS?, model?, width?, height?, fps?, error? }.
- `state` and `stage` are SEPARATE unions and both are needed. state: "queued" |
  "running" | "ready" | "failed" | "canceled" answers "is it moving, finished or
  broken"; stage: "queued" | "rendering" | "encoding" answers "where". A job that
  ends keeps the stage it stopped inside, which is the whole difference between
  "rejected before a single frame existed" and "24 frames rendered and the muxer
  fell over" — only the second one still has something to show.
- `canceled` is a first-class outcome, not "failed in a nicer colour": the human
  asked for it, nothing is broken, and the frames already made are still real.
- A frame is { id, t, url?, error?, alt? }. A slot EXISTS before its pixels do —
  `url` absent means scheduled but not reached — because the empty slots are the
  shape of the finished clip. A non-blank `error` IS the slot's failure state;
  there is no separate flag.
- `progress` is an OVERALL percent. Non-finite or out-of-range values fall back to
  an estimate derived from the storyboard, so a backend that only reports frames
  still gets a truthful bar.
- A separate envelope status — "loading" | "empty" | "error" | "ready" — is the
  card's own render state, independent of the job's state. `status="error"` means
  the status endpoint failed; the RENDER failing is `state: "failed"`, and the two
  must never be worded the same way.
- Props: job: Job | null; status; onPlay?(job); onCancel?(id); onRetry?(id);
  onSelectFrame?(frame, index); onReload?; maxFrames? (24); promptPreviewChars?
  (140); stageLabels?; formatDuration?; formatEta?; showStages? (true);
  showStoryboard? (true); emptyState?; errorMessage?; label? ("Video generation");
  className plus the rest of the element props, ref forwarded to the <article>.
  Numeric props are clamped (maxFrames >= 1, promptPreviewChars >= 40) so a 0 or
  a NaN can never render an empty strip.
- `onPlay` and `onCancel` collide with React's DOM attributes (media / dialog
  events), so the props type omits those two names from HTMLAttributes.

Behavior
- THE BAR CANNOT REWIND. Rendering owns 0–90 of the bar and encoding the last
  tenth, and each stage carries a floor (queued 0, rendering 1, encoding 90).
  Backends that report a per-stage percent restart at 0 on every boundary;
  composing the reported value with the floor turns that reset into a step
  forward. 24 of 24 frames is 90%, not 100% — there is still a file to write.
- A queued job renders an INDETERMINATE bar, not 0%: a 0% bar reads as a job that
  is running and getting nowhere. The indeterminate branch drops aria-valuenow
  entirely instead of lying with a zero.
- The headline names the slot in flight: "Rendering frame 11 of 24", where the
  ordinal is the first UNSETTLED slot (neither a picture nor a reject) — not
  "rendered + 1", which counts backwards every time a frame is rejected. The bar
  counts settled slots for the same reason: one bad frame must not park progress
  for the rest of the run.
- THE PREVIEW FOLLOWS THE NEWEST FRAME UNTIL THE HUMAN TAKES OVER. Selection is
  `null` = follow; clicking or arrowing to a frame pins it and a "Follow the
  newest frame" control appears (it reads "Back to the poster" once the job is
  ready). A pinned frame that disappears from the array falls back to the head
  instead of blanking the preview.
- The storyboard is ONE tab stop with a roving tabindex, the way a listbox
  behaves: exactly one option carries tabIndex 0, arrows move between RENDERED
  frames only (skipping slots with no picture), Home/End reach the ends, and
  nothing wraps. Pending slots stay options marked aria-disabled, so their
  existence is announced without pretending they are pickable.
- A FAILURE SALVAGES. Failed and canceled jobs keep every frame they made, say how
  many survived, and dim the preview instead of clearing it. Throwing the output
  away is what forces someone to re-run the expensive half.
- Cancel and retry are ONE-SHOT. The lock lives in a ref read and written
  synchronously inside the click handler, because several clicks dispatched in one
  task all read the same stale state; it is keyed to the job id plus the job
  state, so a job that moves on releases the lock by itself and a second, genuine
  action stays available. Both buttons use aria-disabled, never the native
  `disabled` attribute, which would blur the button mid-action and drop it out of
  the tab order.
- Truncation is announced, never silent: the strip draws `maxFrames` slots above
  "Showing 24 of 48 frames" with a reveal toggle, and a long prompt clamps to two
  lines above "Show the full prompt".
- Broken IMAGES are tracked separately from broken FRAMES. An <img> that fails to
  load is recorded client-side (its onError adds the id to a set) and drawn as
  "image unavailable", but it is never counted in the job's failure stats — those
  belong to the backend.
- The provider error is the one thing never capped: no max-height, no line clamp,
  wrapped, monospace, shown in full.
- A new job id resets the card by adjusting state during render (no effect): the
  takeover, the frame reveal, the prompt disclosure and the broken-image set all
  clear, so a recycled card can never show the previous render's selection.
- The card owns NO CLOCK and does no polling. It renders exactly what it is
  handed, so the server, a replay and a screenshot all produce the same markup.

Rendering & styling
- Semantic tokens only: bg-card / border / text-muted-foreground for chrome,
  bg-primary for the bar and the selected-frame ring, bg-primary/5 with
  border-primary/50 for the active stage pill, text-destructive with
  bg-destructive/5 for a failure, bg-muted-foreground for a canceled bar,
  bg-background/80 plus a backdrop blur for the chips floating over the poster.
  No hard-coded colours anywhere.
- Five job states are five SHAPES — hourglass / spinner / check / alert / ban —
  so they survive a monochrome theme and a colour-blind reader.
- The preview takes its aspect ratio from width/height (falling back to 16/9), so
  a 9:16 vertical cut is not letterboxed into a landscape box.
- Motion is decoration only: the spinner, the indeterminate pulse and the gradient
  sweep over a live preview all stop or vanish under prefers-reduced-motion, and
  every transition is motion-reduce-guarded. Nothing functional depends on them.
- ONE persistent sr-only role="status" line spells the state out, and it speaks in
  FRAMES, not percent: percent changes on every poll and would turn a screen
  reader into a metronome, while the frame ordinal changes exactly when there is
  something new to look at.
- Frame thumbnails carry alt="" because their option already has the aria-label —
  otherwise every slot is read out twice.
- cn() merges the consumer's className into the root, which also spreads the
  remaining element props and forwards its ref.

Customization levers
- Density: `showStages` drops the three-step pipeline strip and `showStoryboard`
  drops the frame strip entirely — a card in a narrow rail keeps just the preview,
  the bar and the headline.
- Budget: `maxFrames` decides how many slots are drawn before the reveal (lower it
  in a list of many jobs, raise it for a single hero card) and
  `promptPreviewChars` decides when the prompt grows a toggle. Never make either
  cap silent; the withheld count is part of the reading.
- Vocabulary: `stageLabels` renames the pipeline (Queued / Rendering / Encoding →
  Waiting / Drawing / Muxing) and the rename flows into the headline too.
  `formatDuration` and `formatEta` own the two time strings — swap the timecode
  for a frame count, or the bucketed ETA for a hard countdown.
- Affordances: pass only the callbacks you can honour. No `onPlay`, no play
  control over the poster (playback belongs to your player); no `onCancel`, no
  Stop; no `onRetry`, no Render again; no `onReload`, no retry in the envelope
  error. `onSelectFrame` lets a parent mirror the selection into a lightbox.
- Shape: `width` / `height` set the preview's aspect ratio, and `posterUrl` is
  optional — omit it and a finished job falls back to its last rendered frame.
- Copy: `label` names the region, `emptyState` replaces the empty body, and
  `errorMessage` owns the envelope failure text.

Concepts

Staged progress that cannot rewind — rendering owns the first 90% and encoding the last tenth, and every stage carries a floor. Backends that report a per-stage percent reset to 0 on each boundary; composing the report with the floor turns that reset into a step forward, because a bar that travels backwards is the fastest way to make someone reload a perfectly healthy job.
The storyboard is the shape of the clip — slots are drawn before their pixels exist, so the reader watches a known-length film fill in instead of an unbounded list grow. A rejected slot becomes a visible break in the strip, and progress counts settled slots (a picture or a reject) so one bad frame can't park the bar for the rest of the run.
Follow-the-newest with takeover — the preview tracks the head frame until a human picks one, at which point the selection is pinned and a "follow again" control appears. Auto-follow that refuses to yield is the same bug as a chat window that scrolls away from the message you are reading.
Partial output is an outcome, not debris — failure and cancellation keep every frame already made and say how many survived. A card that clears its own output on failure forces a full re-run of the expensive half, and those stills are usually enough to tell you whether the prompt was even close.
One-shot action gate — the cancel / retry lock is a ref read and written synchronously in the handler, because several clicks in one task all observe the same stale state. Keying it to the job id plus the job state makes it expire by itself when the job moves on, instead of leaving a dead button behind.
Announced caps — 24 of 48 slots drawn, a two-line prompt clamp, each stating exactly what it withholds right next to the control that reveals it. A silent cut is worse than no cut: it makes you reason about a render you can only half see.

Installation

Prompt

Concepts

On This Page