# Photo Split

A dobra alternada de foto e texto: a moldura revela a imagem, o texto entra deslizando da borda externa e o lado inverte a cada dobra sem ninguém escrever nada.

- Nome no registry: `photo-split`
- Tipo: componente
- Dependências npm: gsap, react
- Demo: https://ui.visantlabs.com/c/photo-split
- Categorias: conteudo, dobra, secao, foto, texto, alternado, scroll, gsap

## Quando usar

- Use quando: Seções alternadas de foto e texto em landing ou case, invertendo o lado a cada dobra
- Evite quando: Foto sozinha com reveal: photo-frame; arte presa avançando em passos, pinned-scene

## Instalar

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

## Usar

```tsx
<PhotoSplit />
```

## API

### PhotoSplit

- `media: any` — A mídia, por slot: `<img>`, `next/image`, `<video>`.
- `title: any`
- `actions?: any` — Botões e links abaixo do texto.
- `as?: "h2" | "h3" = "h2"`
- `caption?: any` — Legenda da foto. Entra como `<figcaption>` da moldura.
- `eyebrow?: any` — O rótulo acima do título. Decorativo — vai com `aria-hidden`.
- `gap?: number = 3.5` — Respiro entre as duas colunas, em rem.
- `lead?: any`
- `parallax?: number = 0` — Deriva da foto na rolagem, em % da altura. 0 desliga.
- `ratio?: string = "4/5"` — Proporção da moldura, formato CSS.
- `side?: "left" | "right" = "left"` — De que lado fica a FOTO. Dentro de `PhotoSplitStack` é escrito automático.
- `weight?: number = 1.1` — Peso da coluna da foto contra a do texto. 1 é meio a meio.

### PhotoSplitStack

A pilha que escreve o lado de cada dobra.

- `space?: number = 6` — Respiro entre as dobras, em rem.
- `start?: "left" | "right" = "left"` — De que lado começa a primeira foto. As seguintes alternam sozinhas.