Pixel Mirror
A webcam pixel grid: the camera becomes a mosaic of blocks that rise in 3D where you move, with a pointer mode for visitors without a camera.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/pixel-mirrorProps
| Prop | Type | Default | Description |
|---|---|---|---|
camera | "auto" | "click" | "off" | "auto" | When to use the camera. "auto" asks as soon as it mounts and fades the grid in once it's live; if the visitor says no, the pointer takes over. "click" waits for an Enable camera card (and starts on its own if the visitor already allowed it). "off" never uses it |
pointer | boolean | true | Pixels also rise under the cursor or a finger, camera or not |
gridCols | number | 60 | Number of columns in the grid |
gridRows | number | 40 | Number of rows in the grid |
maxElevation | number | 50 | How high a moving pixel rises, in pixels |
motionSensitivity | number | 0.25 | How little movement it takes to lift a pixel: lower is more sensitive |
elevationSmoothing | number | 0.2 | How quickly pixels rise and settle, 0–1 |
colorMode | "webcam" | "monochrome" | "duotone" | "thermal" | "webcam" | webcam: the camera's own colours. monochrome: shades of one colour. duotone: from the first colour to the second by brightness. thermal: a heat map that glows where you move |
monochromeColor | string | "#00ff88" | The colour for monochrome mode |
duotone | [string, string] | ["#0b1026", "#7dd3fc"] | Dark and light colours for duotone mode |
motionColor | string | - | Moving pixels glow toward this colour |
cellShape | "square" | "circle" | "square" | Square blocks, or round dots |
backgroundColor | string | "#030303" | Colour behind the pixels |
mirror | boolean | true | Flip the camera, like a mirror |
gapRatio | number | 0.05 | Gap between pixels, as a fraction of a pixel, 0–0.5 |
invertColors | boolean | false | Invert the colours |
darken | number | 0.6 | Darken the picture, 0–1, e.g. to keep text on top readable |
borderColor | string | "#ffffff" | Outline colour of each pixel |
borderOpacity | number | 0.06 | Outline opacity, 0–1 |
children | React.ReactNode | - | Content shown over the grid; links and buttons stay clickable |
overlay | boolean | true | Shade the top and bottom behind the content, so text stays readable |
onWebcamReady | () => void | - | Called once the camera is running |
onWebcamError | (error: Error) => void | - | Called when the camera can't start: blocked, missing or in use |