Webcam Pixel Grid
A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.
Introducing AI SaaS Template →
Ship stunning landing pages faster.
Build amazing landing pages with component blocks and templates from aceternity, without having to worry about styling and animations.
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
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
