# Shader Riso

Uma imagem impressa em duas tintas de risografia, com grão, ângulo próprio por tinta e registro fora do lugar.

- Nome no registry: `shader-riso`
- Tipo: componente
- Dependências npm: nenhuma
- Demo: https://ui.visantlabs.com/c/shader-riso
- Categorias: shaders, shader, webgl, imagem, riso, impressao

## Quando usar

- Use quando: Foto impressa em duas tintas de risografia com grão, em editorial, zine ou evento
- Evite quando: Uma tinta só com retícula: shader-halftone; caracteres, shader-ascii

## Instalar

```bash
npx shadcn@latest add @visant/shader-riso
```

## Usar

```tsx
<ShaderRiso />
```

## API

### ShaderRiso

- `alt?: string = "Imagem em risografia"` — Texto alternativo da imagem.
- `cell?: number = 4` — Tamanho da célula de tinta, em px.
- `colors?: string[]` — Paradas: papel, primeira tinta e segunda tinta. Qualquer cor CSS ou token.
- `interactive?: boolean = true` — O cursor puxa a folha: perto dele as tintas escorregam do registro.
- `misregistration?: number = 35` — Quanto as duas tintas saem do registro.
- `mode?: "grain" | "halftone" | "bayer" = "grain"` — Como a tinta assenta: grão de riso, ponto de retícula ou Bayer.
- `paper?: number = 40` — Textura do papel.
- `source?: HTMLCanvasElement | HTMLVideoElement` — Fonte viva no lugar de `src`: um canvas ou vídeo que muda, relido a cada quadro. O alfa da fonte vira papel. Com `source`, o cursor é lido na janela inteira, então dá pra pôr o riso por cima de uma peça arrastável com `pointer-events: none`.
- `src?: string` — A imagem a imprimir. Fundo branco ou transparente vira papel.