Image Generation

An image-generation state with dither progress and a completed result. Pass the finished media as children (img, Next Image, video, or a custom preview).

Generating

Demo runs generating → refining → complete once. Pass media as children; it reveals when status reaches complete.

Loading…

Installation

CLI

npx @sonojs/ui@latest add image-generation

Also needsnpm i lucide-react motion

Usage

image-generation.tsx

import {
  ImageGeneration,
  imageGenerationDemoSrc,
} from "@/components/ui/image-generation"

export function Example() {
  return (
    <ImageGeneration
      status="complete"
      prompt="Portrait study, ink stipple"
      resolution="1024 × 1024"
      aspectRatio="1 / 1"
    >
      <img
        src={imageGenerationDemoSrc}
        alt="Generated portrait"
      />
    </ImageGeneration>
  )
}

Props

Prop	Type	Default	Description
children	ReactNode	—	Completed media (img / Next Image / canvas / video / custom).
status	ImageGenerationStatus	"generating"	`queued` \| `generating` \| `refining` \| `complete` \| `error`.
prompt	string	—	Shown under the status line in quotes.
resolution	string	"1024 × 1024"	Badge in the media corner. Pass empty to hide.
aspectRatio	CSSProperties["aspectRatio"]	"1 / 1"	Reserved frame size before media loads.
size	"compact" · "fluid"	"compact"	`compact` caps width at `max-w-52`.
interactive	boolean	true	Dither cluster follows fine-pointer movement when hover-capable.
showStatus	boolean	true	Toggle the status row under the frame.
onRetry	() => void	—	Shows Try again when `status` is `error`.
className	string	—	Merge classes on the root.