Polish Pane
Web (React)
A frame that resolves an image from pixel mosaic to sharp as generation progresses.
Status prints in a mono pill and the frame rests on the muted surface with tight corners.
Refining
Installation
CLI
npx @modus-ui/cli add polish-paneManual
- Copy the code from the component tab.
- Create a file at
components/ui/polish-pane.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | string | "generating" | - |
| children | any | - | - |
| aspectRatio | string | "1 / 1" | - |
| width | number | 320 | - |
| radius | number | 6 | - |
| background | string | "hsl(var(--muted))" | - |
| color | string | "hsl(var(--foreground))" | - |
| stageDuration | number | 400 | - |
| sweep | boolean | true | - |
| showStatus | boolean | true | - |
| hideAfter | number | 1200 | - |
| labels | any | DEFAULT_LABELS | - |
| retryLabel | string | "Retry" | - |
| onRetry | any | - | - |
Comments