KQ-357 · SURFACE/PAINT
Surface Paint
The stage every effect in this wing stands on: your interface renders real and interactive, the painter keeps a texture of it current, and an effect layer draws over it. Overlay mode keeps the DOM visible and draws only where the effect differs; replace mode holds the DOM at zero opacity — still in flow, still focusable, still in the accessibility tree — and shows the transformed texture in its place, with clicks passing straight through.
Waylight · morning board
Berth 4 clears at 06:10
Everything on this card is real DOM. The print in the corner is the painter reading it back — type in the field or tab to the button and watch the version climb.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/surface-paint
Props
- mode
- "overlay" | "replace"
- default "overlay"
- Whether the DOM stays visible under the effect or is shown only through the texture.
- effect
- React.ReactNode
- default —
- The effect layer, rendered above the painted root with pointer events off.
- paint
- PaintOptions
- default —
- Painter options: DPR cap, node budget, pseudo-element painting, focus ring, backdrop.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "overlay" | "replace" | "overlay" | Whether the DOM stays visible under the effect or is shown only through the texture. |
| effect | React.ReactNode | — | The effect layer, rendered above the painted root with pointer events off. |
| paint | PaintOptions | — | Painter options: DPR cap, node budget, pseudo-element painting, focus ring, backdrop. |