--- /** * WebcamPixelGrid — samples the visitor's webcam onto a coarse grid and * renders each cell as a pseudo-3D pixel block. Frame-to-frame color * differences drive a smoothed per-cell "elevation": cells with more * motion rise higher and cast a heavier shadow, turning ordinary webcam * motion into a chunky, isometric-looking surface. * * Requires `getUserMedia` in a secure context (HTTPS or localhost) plus an * explicit camera permission grant. When the camera is unavailable, * denied, or the request times out, the component shows a dismissible * "camera access needed" popup and keeps the grid alive with a gentle * synthetic ripple instead of leaving a blank surface. * * Fires `nular-webcam-ready` when the camera stream starts, and * `nular-webcam-error` (with `event.detail.message`) when access fails — * both bubble from the host element. */ interface Props { /** Additional classes for the root element. */ class?: string; /** Number of columns in the sampling grid. */ gridCols?: number; /** Number of rows in the sampling grid. */ gridRows?: number; /** Maximum elevation (cell-size units) a fully-moving cell can reach. */ maxElevation?: number; /** Motion sensitivity — lower values make motion easier to trigger (0–1). */ motionSensitivity?: number; /** Smoothing factor applied to elevation transitions each frame (0–1). */ elevationSmoothing?: number; /** 'webcam' uses the live feed's colors; 'monochrome' tints by brightness. */ colorMode?: 'webcam' | 'monochrome'; /** Base color used to tint cells in monochrome mode. */ monochromeColor?: string; /** Canvas background color, also shown behind the popup while loading. */ backgroundColor?: string; /** Mirror the webcam feed horizontally, like a selfie camera. */ mirror?: boolean; /** Gap between cells, as a fraction of the cell size (0–1). */ gapRatio?: number; /** Invert the sampled colors. */ invertColors?: boolean; /** Darken factor applied to every cell (0 = none, 1 = fully dark). */ darken?: number; /** Border color drawn around each cell's top face. */ borderColor?: string; /** Border opacity (0–1). */ borderOpacity?: number; } const { class: className, gridCols = 64, gridRows = 48, maxElevation = 15, motionSensitivity = 0.4, elevationSmoothing = 0.1, colorMode = 'webcam', monochromeColor = '#00ff88', backgroundColor = '#0a0a0a', mirror = true, gapRatio = 0.1, invertColors = false, darken = 0, borderColor = '#ffffff', borderOpacity = 0.08, } = Astro.props; ---

Installation

Install dependencies

Add these files

Configuration

Use it