Pixelated Canvas
Convert any image to a pixelated canvas mouse distortion effects, as seen on Tailwind CSS Website.
Installation
Run the following command
npx shadcn@latest add @aceternity/pixelated-canvasDifferent Props
Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
src | string | - | Source image URL to sample and render. | Yes |
width | number | 400 | Canvas display width in CSS pixels. | No |
height | number | 500 | Canvas display height in CSS pixels. | No |
cellSize | number | 3 | Size of each sampling cell in CSS pixels. | No |
dotScale | number | 0.9 | Dot size as a fraction of cell size (0..1). | No |
shape | "circle" | "square" | "square" | Shape of the dot drawn for each sample. | No |
backgroundColor | string | "#000000" | Background color to clear the canvas before drawing. | No |
grayscale | boolean | false | Convert colors to grayscale before drawing. | No |
className | string | undefined | Additional CSS classes applied to the canvas element. | No |
responsive | boolean | false | Redraw on window resize using the provided width/height. | No |
dropoutStrength | number | 0.4 | 0..1; removes dots in low-contrast regions. | No |
interactive | boolean | true | Enable interactive pointer distortion animation. | No |
distortionStrength | number | 3 | Max per-dot offset (px) due to distortion. | No |
distortionRadius | number | 80 | Radius (px) around pointer influencing distortion. | No |
distortionMode | "repel" | "attract" | "swirl" | "swirl" | How pixels move near the pointer. | No |
followSpeed | number | 0.2 | 0..1 smoothing factor for pointer follow. | No |
sampleAverage | boolean | true | Average multiple samples per cell instead of single center. | No |
tintColor | string | "#FFFFFF" | Color tint applied to samples. | No |
tintStrength | number | 0.2 | 0..1 tint mix amount with original colors. | No |
maxFps | number | 60 | Cap animation frame rate to improve performance. | No |
objectFit | "cover" | "contain" | "fill" | "none" | "cover" | Object-fit behavior for the source image within the canvas. | No |
jitterStrength | number | 4 | Random motion amplitude for dots near the pointer. | No |
jitterSpeed | number | 4 | Speed factor for the random motion. | No |
fadeOnLeave | boolean | true | Smoothly fade the distortion when the pointer leaves. | No |
fadeSpeed | number | 0.1 | 0..1 smoothing factor for leave fade. Higher = faster fade. | No |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
