# Photo Frame

A moldura que revela a foto: a máscara abre, a foto assenta mais devagar que a máscara, e opcionalmente deriva na rolagem. Proporção declarada pra não haver salto de layout, e mídia por slot.

- Nome no registry: `photo-frame`
- Tipo: componente
- Dependências npm: gsap
- Demo: https://ui.visantlabs.com/c/photo-frame
- Categorias: transicoes, foto, moldura, imagem, reveal, paralaxe, scroll, gsap

## Quando usar

- Use quando: Foto editorial ou de case que se revela por máscara ao entrar na tela, com proporção fixa
- Evite quando: Foto ao lado de texto alternando lados: photo-split; foto de produto recortada, plate

## Instalar

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

## Usar

```tsx
<PhotoFrame />
```

## API

### PhotoFrame

- `children: any` — A mídia. `<img>`, `next/image`, `<video>` — o que o projeto usar.
- `caption?: any` — Legenda. Entra como `<figcaption>` e transforma a peça em `<figure>`.
- `from?: "bottom" | "top" | "left" | "right" = "bottom"` — De onde a moldura abre.
- `parallax?: number = 0` — Deriva na rolagem, em % da altura. 0 desliga. Acima de ~12 denuncia.
- `ratio?: string = "4/5"` — Proporção da moldura, formato CSS: `"4/5"`, `"16/9"`, `"1"`.
- `start?: string = "top 85%"` — Onde o gatilho arma.