Toggle Sidebar B
AppearanceLight & dark mode D

Refine Frame

Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and opacity tween, a soft band sweeps while it works, a chip reports the stage, and an error dims the picture behind a retry pill.

Default

The preview walks the stages on its own. Pick a status by hand to hold one, and choose Error to see the retry pill.

Dark previewReplay previewOpen in new tab

Customize

Status
Aspect
Width320px
Radius16px
Background
Ink
Stage400ms
Hide After1200ms

API Reference

RefineFrame

PropTypeDefaultDescription
status'queued' | 'generating' | 'refining' | 'complete' | 'error''generating'The stage. Each change tweens the media to that stage.
aspectRatiostring'4 / 3'The box reserved before and during generation, so nothing shifts.
widthnumber320Frame width in px, capped at the parent.
radiusnumber16Corner radius in px.
backgroundstring'#27272a'The paper behind the media, and the chip surface.
colorstring'#f5f5f5'The ink: chip text, the sweep and the retry pill.
stageDurationnumber400Each stage tween, in ms.
sweepbooleantrueA soft band crosses the frame while it works.
showStatusbooleantrueThe chip with the mark and the stage label.
hideAfternumber1200Ms after completion before the chip fades. 0 keeps it.
labelsPartial<Record<status, string>>DEFAULT_LABELSChip text per stage: Queued, Generating, Refining, Ready, Failed.
retryLabelstring'Retry'The pill on an error.
EventDescription
retryThe retry pill was pressed. Without a listener, no pill.
SlotDescription
defaultThe media: an img, video or canvas. It fills the frame. An img needs crossOrigin="anonymous" for the refine ladder to read its pixels.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The frame is an image named after the stage and a status region announces each change. The chip and the media are hidden from screen readers.
  • With prefers-reduced-motion the sweep and the spinner stop and the stages jump instead of tweening.
Pulse HeartRubber Segment