Image Generation 2

An animated loading state that reveals an AI-generated image when it is ready — canvas grid split, optional caption shimmer, then the photo.

Default

Self-paced grid split with a caption. Pass src; the photo reveals once when ready.

Loading…

Installation

CLI

npx @sonojs/ui@latest add image-generation-2

Also needsnpm i motion

Usage

image-generation-2.tsx

import {
  GridReveal,
  imageGeneration2DemoSrc,
} from "@/components/sonojs/image-generation-2"

export function Example() {
  return (
    <GridReveal
      src={imageGeneration2DemoSrc}
      alt="Generated portrait"
      caption="Generating image…"
      estimatedDuration={6000}
      aspect={1}
    />
  )
}

Props

Prop	Type	Default	Description
src	string · null	—	Image URL. Arrival finishes the reveal; omit while waiting.
alt	string	""	Accessible label on the canvas when set.
progress	number	self-paced	0–1 controlled progress. Omit to use `estimatedDuration`.
aspect	number	1	Width / height ratio for the frame.
caption	string	—	Shimmer status chip; fades out when revealed.
estimatedDuration	number	6000	Self-paced wait length in ms when `progress` is omitted.
onRevealComplete	() => void	—	Fires once when the photo settle finishes.
onError	() => void	—	Fires if the image fails to load (after CORS retry).
className	string	—	Merge classes on the root frame.