Carregando…

Webcam Pixel Grid

Backgrounds

Live webcam feed rendered as a grid of pixel columns whose elevation reacts to brightness and device motion — adapted from Aceternity UI.

Instalação via CLI

$ npx kikitocn add webcam-pixel-grid

Interno:

@/lib/utils

Exemplo de uso

Webcam Pixel GridExample.tsx

import { WebcamPixelGrid } from "@/components/ui/cn/webcam-pixel-grid/WebcamPixelGrid";

export function WebcamPixelGridExample() {
  return (
    <WebcamPixelGrid colorMode="source" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`gridCols`	`number`	`40`	Colunas do grid
`gridRows`	`number`	`30`	Linhas do grid
`maxElevation`	`number`	`40`	Elevação 3D máxima (px) por brilho do pixel
`motionSensitivity`	`number`	`1`	Multiplicador de resposta ao movimento do dispositivo
`elevationSmoothing`	`number`	`0.15`	Suavização (lerp) da elevação entre frames
`colorMode`	`'source' \| 'monochrome'`	`'source'`	Cor original da webcam ou tom único
`monochromeColor`	`string`	`'var(--ks-patina)'`	Cor usada quando colorMode='monochrome'
`backgroundColor`	`string`	`undefined`	Cor de fundo do canvas
`mirror`	`boolean`	`true`	Espelha o feed horizontalmente
`gapRatio`	`number`	`0.1`	Proporção de espaço entre colunas do grid
`invertColors`	`boolean`	`false`	Inverte as cores captadas
`darken`	`number`	`0`	Escurece o feed (0 a 1)
`borderColor`	`string`	`undefined`	Cor da borda de cada pixel
`borderOpacity`	`number`	`0.15`	Opacidade da borda de cada pixel
`className`	`string`	—	Classes CSS extras
`onWebcamError`	`(error: Error) => void`	`undefined`	Chamado se a permissão de câmera falhar
`onWebcamReady`	`() => void`	`undefined`	Chamado quando o stream inicia com sucesso

Voltar para Backgrounds

Carregando…