Image generation

A React component in Beamline's AI & agents category.

The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives — sharpening from coarse blocks, sweeping in or fading — and a refusal says why.

Use it for

Waiting for a generated image, with the model's progress when it reports steps.

Not for

Ordinary image loading (skeleton, or the image with a blurred placeholder).
A gallery of finished images (lightbox).

Anatomy

frame (figure, aspect ratio, surface radius)
pixel field (2D canvas, brand lightness stops, aria-hidden)
image (real <img> with alt once arrived)
corner status (label and percent; role status)
progress hairline
refusal (icon and reason; role alert)

Variants

variant: pixels (sharpens from 5 to 60 blocks across), sweep (top to bottom), fade

States

generating (progress known or unknown)
ready, arriving (aria-busy)
revealed (img, "Image ready" said)
error (field dims, reason shown)

Keyboard

Not interactive; the status is announced politely and the image has its alt text.

Motion

The field breathes at 24 fps only while generating and on screen (nothing off screen or in a background tab); the pixels arrival steps through six levels at half --duration-considered each; sweep and fade take three --duration-considered. Reduced motion: a still field and the image at once.

Props

Prop	Type	Default	Description
`status` (required)	`"generating" \| "ready" \| "error"`	—
`src / alt` (required)	`string`	—	alt is required: it is what the image shows, read out instead of it.
`progress`	`number \| null`	—	0–1 when the model reports steps.
`variant / aspectRatio / label / error`	`"pixels" \| "sweep" \| "fade" / number / string / ReactNode`	—
`onRevealed`	`() => void`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`ImageGenerationClassNames`	—

Dependencies

lucide-react, motion

Import

import { ImageGeneration } from "@/components/image-generation/image-generation";

Get it

Image generation is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent