Dither
Customize Dither
RGB: (0.50, 0.50, 0.50)
Wave Amplitude0.30
Wave Frequency3.0
Wave Speed0.050
Color Num4
Pixel Size2
Mouse Radius0.30
Props
| Property | Type | Default | Description |
|---|---|---|---|
| waveColor | number[] | [0.5, 0.5, 0.5] | RGB color values for the wave effect (0-1 range for each channel) |
| disableAnimation | boolean | | Disable or enable the wave animation |
| enableMouseInteraction | boolean | | Enable or disable mouse interaction with the dither effect |
| mouseRadius | number | 0.3 | Radius of mouse interaction effect (0.1-2) |
| colorNum | number | 4 | Number of colors in the dither palette (2-16) |
| waveAmplitude | number | 0.3 | Amplitude of the wave effect (0-1) |
| waveFrequency | number | 3 | Frequency of the wave pattern (0.1-10) |
| waveSpeed | number | 0.05 | Speed of the wave animation (0-0.5) |
| pixelSize | number | 2 | Size of individual pixels in the dither effect (1-10) |
| className | string | custom-dither | Additional CSS class names for styling |
| width | string | 100% | Width of the dither container |
| height | string | 600px | Height of the dither container |
| ditherType | string | ordered | Type of dithering - 'ordered', 'floyd-steinberg', or 'random' |
| opacity | number | 1 | Overall opacity of the dither effect (0-1) |
| blendMode | string | normal | CSS blend mode for the dither effect |
| enableGradient | boolean | | Enable or disable gradient overlay |
| quality | string | high | Rendering quality - 'low', 'medium', or 'high' |
Dependencies
three@react-three/fiber
Created with ❤️ by Cybershoora