Pixelated Canvas
Convert any image to a pixelated canvas with mouse distortion effects.
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Prop | Default | Description | Type |
|---|---|---|---|
| src | — | Image URL to render (subject to CORS). | string |
| width | 400 | Canvas display width in pixels. | number |
| height | 500 | Canvas display height in pixels. | number |
| variant | — | When "static", disables pointer interaction; "interactive" or undefined enables it. | "static" | "interactive" |
| cellSize | 3 | Size of each sampling cell in CSS pixels. | number |
| dotScale | 0.9 | Dot size as a fraction of cell size (0–1). | number |
| shape | "square" | Shape of each dot: circle or square. | "circle" | "square" |
| backgroundColor | "#000000" | Background color to clear the canvas with before drawing. | string |
| grayscale | false | When true, convert image to grayscale before drawing. | boolean |
| className | — | Additional CSS class for the canvas element. | string |
| responsive | false | When true, redraw on window resize using the given width/height. | boolean |
| dropoutStrength | 0.4 | 0–1. Higher values remove more dots in low-contrast regions. | number |
| interactive | true | When true, enable mouse distortion animation (overridden by variant="static"). | boolean |
| distortionStrength | 3 | Max per-dot offset in pixels due to distortion. | number |
| distortionRadius | 80 | Radius in pixels around the pointer that influences distortion. | number |
| distortionMode | "swirl" | How dots move near the pointer: repel, attract, or swirl. | "repel" | "attract" | "swirl" |
| followSpeed | 0.2 | 0–1 smoothing factor for pointer follow. | number |
| sampleAverage | true | When true, average multiple samples per cell instead of center only. | boolean |
| tintColor | "#FFFFFF" | Color tint (e.g. #0ea5e9 or rgb(14,165,233)). | string |
| tintStrength | 0.2 | 0–1 tint mix amount with original colors. | number |
| maxFps | 60 | Cap animation frame rate for performance on large canvases. | number |
| objectFit | "cover" | Object-fit behavior for the source image: cover, contain, fill, or none. | "cover" | "contain" | "fill" | "none" |
| jitterStrength | 4 | Random motion amplitude for dots near the pointer. | number |
| jitterSpeed | 4 | Speed factor for the random motion. | number |
| fadeOnLeave | true | When true, smoothly fade distortion when the pointer leaves (overridden by variant="static"). | boolean |
| fadeSpeed | 0.1 | 0–1 smoothing factor for leave fade; higher is faster. | number |