Pixelate Hover
Interactive pixelation effect with cursor-controlled reveal
pixelate-hover-tw
Customize
30
350
1
0.05
0.5
1500
Props
| Name | Type | Default | Description |
|---|---|---|---|
| image | string | "" | URL of the image to display and pixelate |
| pixelSize | number | 20 | Size of pixelation blocks - higher values create larger mosaic pixels |
| cursorRadius | number | 200 | Radius of the cursor effect area in pixels |
| falloff | number | 0.5 | Softness of the transition falloff (0-1) - controls edge smoothness |
| mode | "reveal" | "pixelate" | "reveal" | "reveal" starts pixelated and reveals on hover, "pixelate" starts normal and pixelates on hover |
| smoothing | number | 0.15 | Mouse smoothing/dampening factor (0-1) - lower values create smoother, more delayed cursor following |
| autoDemo | boolean | true | Enable automatic cursor animation when idle |
| autoSpeed | number | 0.5 | Speed of automatic cursor movement during auto-demo |
| autoResumeDelay | number | 1500 | Delay in milliseconds before auto-demo resumes after user interaction |
| style | React.CSSProperties | undefined | Inline styles applied to the container element |
| className | string | "" | Additional CSS classes for the container |
Demo image by Alex Suprun @ unsplash.com, not part of the React Bits Pro offer.