# Fog Hero

Hero de tela cheia que abre uma clareira na névoa, troca uma playlist de vídeo P&B pela própria fumaça e sai em desfoque no scroll, com papel e tinta vindos dos tokens.

- Nome no registry: `fog-hero`
- Tipo: bloco
- Dependências npm: framer-motion, three@^0.170.0
- Demo: https://ui.visantlabs.com/c/fog-hero
- Categorias: conteudo, hero, nevoa, webgl, shader, video, abertura, grao

## Quando usar

- Use quando: Hero de tela cheia com névoa em shader, vídeo P&B e saída em desfoque, pra abertura de marca
- Evite quando: Hero leve ou de produto: section-intro com spring-dots; fundo abstrato sem vídeo, shader-neon

## Instalar

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

## Usar

```tsx
<FogHero />
```

## API

### FogHero

- `children?: any` — Conteúdo acima do canvas (título, CTA). Ver a nota do `<h1>`.
- `ink?: string = "var(--foreground)"` — Cor da tinta (fumaça, vídeo, logo). Qualquer cor CSS ou `var(--token)`.
- `logo?: string` — Imagem com alpha (PNG/WebP) desenhada em tinta no centro. Opcional.
- `paper?: string = "var(--background)"` — Cor do papel. Qualquer cor CSS ou `var(--token)`.
- `params?: Partial<{ vignette: number; invertVideo: boolean; flipY: boolean; videoZoom: number; videoY: number; logoSize: number; logoBleed: number; cursor: number; trailFade: number; introDur: number; scrollClose: boolean; ... 15 more ...; photo: number; }>` — Ajuste parcial do preset aprovado (`FOG_HERO_PRESET`).
- `swapDuration?: number = 2800` — Duração da dissolução entre dois vídeos, em ms. Longa de propósito: é cena, não corte.
- `swapEvery?: number = 9000` — Intervalo entre trocas de vídeo, em ms.
- `videos?: string[] = []` — Playlist de vídeo. P&B por desenho: o shader lê só a luminância. Vazio = só névoa.

### FogHero

- `children?: any` — Conteúdo acima do canvas (título, CTA). Ver a nota do `<h1>`.
- `ink?: string = "var(--foreground)"` — Cor da tinta (fumaça, vídeo, logo). Qualquer cor CSS ou `var(--token)`.
- `logo?: string` — Imagem com alpha (PNG/WebP) desenhada em tinta no centro. Opcional.
- `paper?: string = "var(--background)"` — Cor do papel. Qualquer cor CSS ou `var(--token)`.
- `params?: Partial<{ vignette: number; invertVideo: boolean; flipY: boolean; videoZoom: number; videoY: number; logoSize: number; logoBleed: number; cursor: number; trailFade: number; introDur: number; scrollClose: boolean; ... 15 more ...; photo: number; }>` — Ajuste parcial do preset aprovado (`FOG_HERO_PRESET`).
- `swapDuration?: number = 2800` — Duração da dissolução entre dois vídeos, em ms. Longa de propósito: é cena, não corte.
- `swapEvery?: number = 9000` — Intervalo entre trocas de vídeo, em ms.
- `videos?: string[] = []` — Playlist de vídeo. P&B por desenho: o shader lê só a luminância. Vazio = só névoa.