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-canvas

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

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

Get lifetime access