# Fog Garden

A caminhada por um jardim na névoa presa ao scroll: cada parada de texto sai da névoa e volta para ela, em mix-blend-difference sobre as copas, com clareiras derivadas das paradas e plantio semeado.

- Nome no registry: `fog-garden`
- Tipo: bloco
- Dependências npm: @dgreenheck/ez-tree@^1.1.0, framer-motion, three@^0.170.0
- Demo: https://ui.visantlabs.com/c/fog-garden
- Categorias: conteudo, 3d, webgl, scroll, sticky, nevoa, storytelling, jardim

## Quando usar

- Use quando: Storytelling longo de marca: caminhada 3D na névoa com paradas de texto presas ao scroll
- Evite quando: Uma imagem só de atmosfera: fog-tree; passos sem 3D, pinned-scene

## Instalar

```bash
npx shadcn@latest add @visant/fog-garden
```

## Usar

```tsx
<FogGarden
  counter={false}
  heightPerStop="420px"
  ink="color-mix(in oklch, var(--brand, var(--foreground)) 75%, var(--foreground))"
/>
```

## API

### FogGarden

- `stops: FogGardenStop[]`
- `clearings?: number[]` — Pontos 0..1 da trilha com clareira. Padrão: derivados das paradas.
- `container?: RefObject<HTMLElement>` — Scroller que não é a janela (um painel com `overflow: auto`). O progresso passa a ser medido nele.
- `counter?: boolean = true` — Contador "01 / 05" no canto.
- `density?: number = 78` — Posições de plantio ao longo da trilha. O modo leve usa 60% disso.
- `grain?: number = 0.05` — Grão de película.
- `heightPerStop?: string = "120vh"` — Comprimento de scroll de cada parada. A seção mede `n × heightPerStop`.
- `ink?: string = "var(--foreground)"`
- `landmark?: GardenLandmark` — Objeto para cada clareira (ver `GardenLandmark`). Lido uma vez, quando a cena nasce: uma função inline mudaria a cada render e replantaria o jardim.
- `paper?: string = "var(--background)"`
- `seed?: number = 2026` — Semente do plantio. Mesma semente, mesmo jardim.
- `trail?: number = 0.84` — Rastro de longa exposição. 0 desliga.
- `viewport?: string` — Altura do palco preso. Com `container`, o padrão é a altura do container (medida), porque `svh` é da janela e não do scroller.

### FogGarden

- `stops: FogGardenStop[]`
- `clearings?: number[]` — Pontos 0..1 da trilha com clareira. Padrão: derivados das paradas.
- `container?: RefObject<HTMLElement>` — Scroller que não é a janela (um painel com `overflow: auto`). O progresso passa a ser medido nele.
- `counter?: boolean = true` — Contador "01 / 05" no canto.
- `density?: number = 78` — Posições de plantio ao longo da trilha. O modo leve usa 60% disso.
- `grain?: number = 0.05` — Grão de película.
- `heightPerStop?: string = "120vh"` — Comprimento de scroll de cada parada. A seção mede `n × heightPerStop`.
- `ink?: string = "var(--foreground)"`
- `landmark?: GardenLandmark` — Objeto para cada clareira (ver `GardenLandmark`). Lido uma vez, quando a cena nasce: uma função inline mudaria a cada render e replantaria o jardim.
- `paper?: string = "var(--background)"`
- `seed?: number = 2026` — Semente do plantio. Mesma semente, mesmo jardim.
- `trail?: number = 0.84` — Rastro de longa exposição. 0 desliga.
- `viewport?: string` — Altura do palco preso. Com `container`, o padrão é a altura do container (medida), porque `svh` é da janela e não do scroller.