Generative UI

Media Generation

The waiting, progress and result states for a generated image or video, in a frame that keeps its aspect ratio throughout.

Group: Generative UI. Exports: MediaGeneration. Halaska addition with no shadcn/ui equivalent.

Usage

import { MediaGeneration } from "./halaska-kit";

prompt string (default MEDIAGEN_PROMPT): The prompt that produced the media, shown above the frame (default: MEDIAGEN_PROMPT)
status "queued" | "generating" | "done" | "failed" (default "generating"): Current state when autoplay is off (default: "generating")
progress number (default 42): 0 to 100 while generating, when autoplay is off (default: 42)
etaSeconds number (default 9): Seconds left, shown beside the progress bar (default: 9)
src string: Image url once done; without one a neutral tile placeholder renders (default: undefined)
aspect "1:1" | "4:3" | "16:9" | "9:16" (default "16:9"): Frame proportion, kept in every state (default: "16:9")
variations number (default 1): Number of frames shown when done (default: 1)
autoplay boolean (default true): Walks queued, generating and done on its own over `generateMs`; false renders `status` with no timers (default: true)
generateMs number (default 4200): Length of the generating phase in autoplay (default: 4200)
error string (default "The image service timed out. Nothing was charged."): Message shown in the failed state (default: "The image service timed out. Nothing was charged.")
onRegenerate () => void: Fires from Regenerate and from Retry
onDownload () => void: Fires from Download
onVariation (index: number) => void: Fires when a variation frame is chosen

A visually hidden polite live region announces each state change: in queue, generating, done, failed.
The progress bar carries the progressbar role with its current value.
Variation frames are buttons named Variation 1, Variation 2 and so on.
The tile shimmer carries data-halaska-calm, so it stops under prefers-reduced-motion.