Interaction / component

Generation Preview

An original cellular light placeholder with controlled progress, real image reveal and two aspect-aware sample contexts.

Example

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

GenerationPreview binds caller requestId and empty/generating/ready/error/cancelled. Decoration and image loading never infer caller completion.
Unknown/nonfinite progress is indeterminate; finite values clamp from 0 to 100. 100% remains generating until the caller changes state. Complete known progress is explicitly labelled as a visual study, not measured network progress.
Complete Card/Wide fetch the actual bundled original SVG and validate the local response. Start, Cancel and Retry own an AbortController and unique requestId; stale results cannot replace current output. No AI service or remote sample image is used.
Ready requires the native image to load before the optional reveal. Rejected URI inputs render an unavailable image state without mounting an image or invoking onImageError. Actual native image load failures report once per request/source. Pass onRetry for an explicit native retry action.
Aspect ratios must be finite within 1:8–8:1, otherwise 16/10. The native img keeps Vite portability; caller remote assets may require application image optimization.
Paused/reduced/unavailable Web Animations reveal useful output immediately. Replay changes decoration only, retaining task/output and local state.

React 19.2Modern browsers

Chungus UI · Original project implementation; no restricted reference recipe or asset.

Prop	Type	Default	Description
`requestId` (required)	string	`required`	Fresh caller request identity.
`state` (required)	empty \| generating \| ready \| error \| cancelled	`required`	Authoritative caller task state.
`src`	string	`undefined`	Ready output URI: relative path with ./, ../ or / prefix, typed image data URI, HTTP(S) or blob; unsafe schemes are rejected.
`alt` (required)	string	`required`	Meaningful caller description of the actual ready output.
`progress`	number	`undefined`	Optional finite caller percentage; absent/nonfinite stays indeterminate.
`aspectRatio`	string	`16/10`	Finite frame ratio within1:8–8:1; malformed values fall back.
`onRetry`	() => void	`undefined`	Explicit native action in error/cancelled/image-failure fallbacks.
`onImageError`	() => void	`undefined`	Once per actual native image load failure for the current request/source; never invoked for rejected URIs or by Replay.
`headline`	string	`From possibility to a real artifact.`	Complete heading.
`knownProgress`	boolean	`false`	Complete-only labelled caller percentage study; does not measure local response progress.
`paused`	boolean	`false`	Suspend decoration without changing caller state, retained text, local input or results.
`replayToken`	number	`0`	Restart decoration while retaining caller state and local work in the new contexts. Legacy Thought/Lattice Demo explicitly restarts its synthetic interaction.