Webcam Pixel Grid
A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.
Installation
Run the following command
npx shadcn@latest add @aceternity/webcam-pixel-gridProps
| Prop | Type | Default | Description |
|---|---|---|---|
| gridCols | number | 64 | Number of columns in the grid |
| gridRows | number | 48 | Number of rows in the grid |
| maxElevation | number | 15 | Maximum elevation for motion detection |
| motionSensitivity | number | 0.4 | Motion sensitivity (0-1) |
| elevationSmoothing | number | 0.1 | Smoothing factor for elevation transitions |
| colorMode | "webcam" | "monochrome" | "webcam" | Color mode: 'webcam' uses actual colors, 'monochrome' uses single color |
| monochromeColor | string | "#00ff88" | Base color when in monochrome mode |
| backgroundColor | string | "#0a0a0a" | Background color |
| mirror | boolean | true | Whether to mirror the webcam feed |
| gapRatio | number | 0.1 | Gap between cells (0-1, fraction of cell size) |
| invertColors | boolean | false | Invert the colors |
| darken | number | 0 | Darken factor (0-1, 0 = no darkening, 1 = fully dark) |
| borderColor | string | "#ffffff" | Border color for cells |
| borderOpacity | number | 0.08 | Border opacity (0-1) |
| className | string | - | Additional class name |
| onWebcamError | (error: Error) => void | - | Callback when webcam access is denied |
| onWebcamReady | () => void | - | Callback when webcam is ready |
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
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
