# Line Reveal

O título que sobe de dentro do próprio corte de linha: mede a quebra depois da fonte carregar, re-quebra ao redimensionar, e o esconderijo é aplicado por JS pra página nunca sumir sem script.

- Nome no registry: `line-reveal`
- Tipo: componente
- Dependências npm: gsap
- Demo: https://ui.visantlabs.com/c/line-reveal
- Categorias: texto, titulo, reveal, linha, split, gsap, heroi, tipografia

## Quando usar

- Use quando: Título de hero ou dobra que sobe linha por linha de dentro do próprio corte
- Evite quando: Texto saindo do desfoque por palavra: mist-text; rótulo curto trocando, text-morph

## Instalar

```bash
npx shadcn@latest add @visant/line-reveal
```

## Usar

```tsx
<LineReveal
  as="h3"
  immediate
/>
```

## API

### LineReveal

- `children: any` — O texto. Pode conter `<em>`, `<br>`, link — o split preserva a marcação.
- `as?: "h1" | "h2" | "h3" | "p" | "div" = "h2"` — Elemento renderizado. Título de dobra é `h2`; topo de página é `h1`.
- `immediate?: boolean = false` — Anima na montagem, sem esperar a rolagem. Para o herói do topo, que já está visível quando a página abre — ali um ScrollTrigger nunca dispararia bem.
- `repeat?: boolean = false` — Repete a cada passagem. Padrão é uma vez só: entrada que repete vira enfeite.
- `split?: "lines" | "words" = "lines"` — O que se quebra. `lines` é a revelação de título; `words` serve a frases curtas onde a linha inteira subindo parece pesada demais.
- `stagger?: number = 0.07` — Atraso entre linhas, em segundos. Teto embutido: nunca passa de 0.4s no total.
- `start?: string = "top 88%"` — Onde na tela o gatilho arma. `top 88%` = a dobra entrou um oitavo.
- `variant?: "mask" | "blur" | "curtain" | "rise" = "mask"` — Qual revelação. Ver a tabela no cabeçalho.