# Ink Wordmark

Assinatura de ponta a ponta que condensa da fumaça conforme entra na tela, respira como tinta e se agita com a velocidade do ponteiro, só com filtro SVG, ou escrita por prop, com fonte, peso, caixa e ®.

- Nome no registry: `ink-wordmark`
- Tipo: componente
- Dependências npm: framer-motion
- Demo: https://ui.visantlabs.com/c/ink-wordmark
- Categorias: texto, assinatura, logo, rodape, fumaca, tinta, svg, scroll

## Quando usar

- Use quando: Assinatura grande de rodapé ou abertura que condensa da fumaça ao entrar na tela
- Evite quando: Título de seção que precisa ler rápido: line-reveal ou mist-text; logo oficial, use o SVG da marca

## Instalar

```bash
npx shadcn@latest add @visant/ink-wordmark
```

## Usar

```tsx
<InkWordmark
  textCase="upper"
  tracking={-0.02}
  weight={700}
  mark="®"
  text="Visant"
/>
```

## API

### InkWordmark

- `aria-label: string` — Nome acessível da marca. Sem ele o SVG é só desenho para o leitor de tela.
- `children?: any` — Conteúdo SVG livre no lugar do `path` — vários paths, um `<text>`. O filtro desloca qualquer coisa que pinte, inclusive texto vivo.
- `container?: RefObject<HTMLElement>` — Contêiner que rola, se não for a janela. Layout com rolagem num `div` (painel, modal, vitrine) precisa disto, senão o progresso nunca anda.
- `font?: "display" | "sans" | "mono" | "manrope" | (string & {}) = "display"` — Família do `text`: token da casa ou qualquer valor de `font-family`.
- `fx?: "tinta" | "escorrer" | "fatias" | "gota" | "grao" | "neon" = "tinta"` — O que a tinta faz ao condensar. Ver a nota do cabeçalho.
- `mark?: string` — Sinal pequeno no alto, depois do texto: "®", "™".
- `path?: string` — `d` de um path único (a marca convertida em contorno). Use com `viewBox`.
- `progress?: number | MotionValue<number>` — Progresso 0..1 vindo de fora (timeline própria, palco sem rolagem, intro). Quando passado, substitui a rolagem: 0 é fumaça, 1 é tinta assentada.
- `smoke?: number = 34` — Deslocamento máximo, em unidades do `viewBox`, quando a marca ainda é fumaça.
- `text?: string` — A marca escrita, em texto vivo. Ignorado quando há `path` ou `children`.
- `textCase?: "upper" | "lower" | "as-is" = "as-is"` — Caixa do `text`.
- `tracking?: number = -0.03` — Espaço entre letras do `text`, em em. Negativo aperta.
- `underline?: boolean = false` — Traço de pincel embaixo do `text`.
- `viewBox?: string` — `viewBox` do SVG. Obrigatório com `path`; com `children` também é o que dá a proporção.
- `weight?: number = 600` — Peso do `text`, 100 a 900.