Dither
Retro dithering effect with wave patterns and mouse interaction.
Configuring your account...
Please wait while we prepare everything for you
Usage
import Dither from './Dither';
<div style={{ width: '100%', height: '600px', position: 'relative' }}>
<Dither
waveColor={[0.5, 0.5, 0.5]}
enableMouseInteraction={true}
colorNum={4}
waveAmplitude={0.3}
waveFrequency={3}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| waveSpeed | number | 0.05 | Wave animation speed |
| waveFrequency | number | 3 | Wave frequency |
| waveAmplitude | number | 0.3 | Wave amplitude |
| waveColor | [number, number, number] | [0.5, 0.5, 0.5] | Wave color |
| colorNum | number | 4 | Number of colors |
| pixelSize | number | 2 | Pixel size |
| enableMouseInteraction | boolean | true | Mouse interaction |
| mouseRadius | number | 1 | Mouse effect radius |