Dither Image
Texture-based WebGL image that is dithered by default and disperses the dither pattern in a radial zone around the cursor on hover, or at the image center on keyboard focus.
Hover image
Dithered by default; hover or focus to disperse the dither around the cursor.
Dithered by default; hover or focus to disperse the dither around the cursor.
Sign in to view this example's source code.
Sign inPlayground
Tune pixel size and palette levels while hovering.
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | Required | Same-origin, data URL, or CORS-enabled image texture. |
| alt | string | Required | Accessible alternative text retained on the fallback image. |
| ditheredSrc | string | - | Optional alternate texture blended into the active state. |
| pixelSize | number | 5 | Dither cell size in CSS pixels. |
| levels | number | 4 | Per-channel palette quantization levels. |
| revealRadius | number | 0.22 | Radius of the dither dispersion zone in aspect-corrected UV space. |
| duration | number | 420 | Transition duration in milliseconds. |
| trigger | 'hover' | 'always' | 'manual' | 'hover' | Effect activation strategy; hover disperses dither at the cursor, keyboard focus disperses at center. |
| active | boolean | false | Controlled active state used with manual trigger. |