Paint Reveal Background
Layered image background that keeps an accessible outline visible and reveals a textured painted image wherever the pointer moves close to the artwork.
Botanical paint reveal
Move or touch near the outlined flower to reveal stable, textured pigment.
Sign in to view this example's source code.
Sign inPlayground
Tune reveal radius, edge softness, texture noise, transition timing, and image fit.
Paint controls
Image fit
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| outlineSrc | string | Required | Always-visible outline image used as the accessible fallback layer. |
| paintedSrc | string | Required | Transparent colour image revealed by the WebGL proximity field. |
| alt | string | Required | Alternative text describing the complete outlined and painted subject. |
| background | ReactNode | - | Decorative visual layer rendered behind both aligned images. |
| children | ReactNode | - | Accessible foreground content rendered above the image effect. |
| radius | number | 180 | Pointer reveal radius in CSS pixels. |
| softness | number | 0.4 | Feathered proportion of the reveal edge from 0 to 1. |
| noiseStrength | number | 0.2 | Stable pigment grain and organic edge breakup from 0 to 1. |
| duration | number | 350 | Reveal entrance and exit transition duration in milliseconds. |
| objectFit | 'cover' | 'contain' | 'contain' | Shared fitting mode used by the outline and painted texture. |
| objectPosition | string | 'center' | Shared CSS keyword or percentage position used to align both images. |
| interactive | boolean | true | Whether pointer proximity can reveal the painted texture. |