Hero prompt to imagePro

An image model hero: a prompt goes in and the picture arrives through the dither reveal, with a live timer and the run's facts underneath. Chips queue another prompt.

Markdown

On this page

ProA prompt goes in and the image arrives through the dither reveal. Chips queue another prompt.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/hero-prompt-to-image

Usage

tsx

import { HeroPromptToImage } from "@/components/ui/chatcn/pro/hero-prompt-to-image"

<HeroPromptToImage title="Describe the shot. Keep the grain." presets={presets} aspectRatio="1:1" />

Each preset is a prompt with its finished image: { id, prompt, label?, src, alt, meta? }. The first one plays once the section is in view: a generating state with a live timer for generateMs, then the image arrives through the dither reveal (1 bit out of the paper, then 4 and 8 tones, then the photo) over revealMs. When it lands, meta shows the model, size and seed. Chips pick another preset; each run starts the reveal over.

Without onSubmit the prompt is read only and Generate replays the current preset. With it, the prompt is editable and the visitor's own text goes to your callback, for example into sign up. Use images of at least 2x the plate's display size.

Every section is full width with a 16 px gutter on phones and 32 px from 768 px, content capped at 1200 px. Layout follows the section's own width through a container query, not the viewport, so a section in a narrow column lays out like a phone.

Examples

Editable prompt and a single preset

An editable prompt that goes to the page, a portrait plate on the start side, and one preset without chips.

ProAn editable prompt that goes to the page, a portrait plate on the start side, and one preset without chips.

Props

Prop	Type	Notes
`title`	`ReactNode`	Required. One idea; it balances over two or three lines
`description`	`ReactNode`	The paragraph under or beside the headline
`actions`	`ReactNode`	Buttons or links under the paragraph
`presets`	`PromptToImagePreset[]`	Required. Prompts with their images
`defaultPreset`	`string`	Which plays first. Default the first
`generateMs`, `revealMs`	`number`	Default 1400 and 2200
`aspectRatio`	`number \| "1:1"`	The plate. Default `1:1`
`onSubmit`	`(prompt) => void`	Makes the prompt editable
`generateLabel`, `generatingLabel`, `presetsLabel`, `inputLabel`	`string`	Default "Generate", "Generating", "Try another", "Prompt"
`imageSide`	`"start" \| "end"`	Default `end`

Keyboard

Key	Action
`Enter`	Generates. Never during IME composition
`Shift+Enter`	New line, when the prompt is editable
`Tab`	Moves to Generate and the chips

Accessibility

The section is labelled by its headline. Heroes use an h1, other sections an h2; render one hero per page.
Chips are toggle buttons with aria-pressed on the current preset.
The plate is aria-busy while the image is on its way and announces Image ready: <alt> once.

Motion

The reveal steps are held, not blended; only the final resolve crossfades.
Under reduced motion one still frame holds, then the image crossfades in over 200 ms.
The timer and the reveal only run on screen in a visible tab.