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 https://ui.aceternity.com/registry/pixelated-canvas.json

Different Props

Open in

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

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro

Manu was such a pleasure to work with. Talented, communicative and fast. Highly recommend!

Jonathan Barshop

Founder at Barshop Studios