# Photo Compare

A cortina entre o antes e o depois: a camada de cima é RECORTADA, nunca redimensionada, então as duas fotos ficam na mesma escala. O arrasto, o teclado e o leitor de tela vêm de um input range invisível.

- Nome no registry: `photo-compare`
- Tipo: componente
- Dependências npm: gsap, lucide-react
- Demo: https://ui.visantlabs.com/c/photo-compare
- Categorias: conteudo, foto, antes, depois, comparar, cortina, rebrand, slider

## Quando usar

- Use quando: Comparar antes e depois de rebrand, retoque ou obra com cortina arrastável
- Evite quando: Fotos diferentes em sequência: mist-swap; uma foto em tela cheia, photo-flip

## Instalar

```bash
npx shadcn@latest add @visant/photo-compare
```

## Usar

```tsx
<PhotoCompare
  beforeSide="left"
/>
```

## API

### PhotoCompare

- `after: any` — A foto de cima, revelada pela cortina.
- `before: any` — A foto de baixo — o estado original.
- `afterLabel?: any = "depois"`
- `beforeLabel?: any = "antes"`
- `beforeSide?: "left" | "right" = "right"` — De que lado fica o "antes". `left` é a ordem de leitura: antes, depois. O padrão continua `right` para não trocar as fotos de quem já instalou.
- `defaultValue?: number = 50` — Posição inicial da cortina, 0 a 100.
- `label?: string = "Comparar antes e depois"` — Rótulo do controle para leitor de tela.
- `onValueChange?: (v: number) => void`
- `peek?: boolean = true` — Desliga a espiada de descoberta.
- `ratio?: string = "3/2"` — Proporção da caixa, formato CSS. Obrigatória na prática: ver decisão 5.