Wipe Reveal Background
Persistent WebGL wipe mask that reveals an arbitrary decorative background along the pointer path, holds each stroke independently, then softly decays back to a configurable dark colour.
Photographic hero reveal
Move across the dark hero to uncover a full-cover photographic background.
Move to uncover the signal.
Every stroke holds briefly, then the dark surface quietly closes behind it.
Sign in to view this example's source code.
Sign inPlayground
Tune brush geometry, mask colour, hold time, and decay timing.
Wipe controls
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| background | ReactNode | - | Decorative, non-interactive visual layer revealed beneath the mask. |
| children | ReactNode | - | Accessible foreground DOM rendered above the reveal effect. |
| maskColor | string | '#000000' | Opaque resting colour restored after each stroke decays. |
| brushSize | number | 140 | Reveal brush diameter in CSS pixels. |
| softness | number | 0.35 | Feathering around the brush edge from 0 to 1. |
| noiseStrength | number | 0.18 | Organic breakup applied to the brush radius from 0 to 1. |
| holdDuration | number | 2 | Seconds each painted region remains fully revealed before fading. |
| decayDuration | number | 1.25 | Seconds taken for a region to close after its hold expires. |
| interactive | boolean | true | Whether pointer movement can paint the persistent reveal mask. |