KQ-827 · INPAINT/BRUSH
Inpaint Brush
Paint the part to redo. A procedural picture with a round brush: dragging lays dabs that render through one SVG mask as a flat cobalt wash, the pointer is captured only after four pixels of travel, and a coverage chip arrives in the header on snap. Regenerate hands the host onRegenerate and the host drives stage and progress: a shimmer band travels across the masked region on the linear ease and behind its front a second seeded scene resolves, then the dabs are kept as a patch and the wash clears. Arrow keys move the brush on flick, Space paints, Backspace takes back a stroke.
Paint the part to redo
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/inpaint-brush
Props
- stage
- "paint" | "sweeping" | "resolved"
- default "paint"
- Where the regeneration stands; the host drives it and the component commits the mask as a kept patch on "resolved".
- progress
- number
- default 0
- 0..1 of the sweep while stage is "sweeping".
- seed
- number
- default 1
- Seeds the scene drawn under the mask; change it before each sweep so what resolves is what gets kept.
- brushSize
- number
- default 12
- Dab radius in picture units; the picture is 160 by 100.
- onRegenerate
- () => void
- default —
- Fires from the Regenerate control.
- onMaskChange
- (coverage: number) => void
- default —
- Fires when a stroke ends or the mask clears, with coverage as a whole percent.
- label
- string
- default —
- Names the canvas for assistive technology.
- regenerateLabel
- string
- default "Regenerate"
- Copy on the Regenerate control.
- clearLabel
- string
- default "Clear"
- Copy on the Clear control.
| Prop | Type | Default | Description |
|---|---|---|---|
| stage | "paint" | "sweeping" | "resolved" | "paint" | Where the regeneration stands; the host drives it and the component commits the mask as a kept patch on "resolved". |
| progress | number | 0 | 0..1 of the sweep while stage is "sweeping". |
| seed | number | 1 | Seeds the scene drawn under the mask; change it before each sweep so what resolves is what gets kept. |
| brushSize | number | 12 | Dab radius in picture units; the picture is 160 by 100. |
| onRegenerate | () => void | — | Fires from the Regenerate control. |
| onMaskChange | (coverage: number) => void | — | Fires when a stroke ends or the mask clears, with coverage as a whole percent. |
| label | string | — | Names the canvas for assistive technology. |
| regenerateLabel | string | "Regenerate" | Copy on the Regenerate control. |
| clearLabel | string | "Clear" | Copy on the Clear control. |