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
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time


