# Magnetic CTA

O botão principal que vem buscar o ponteiro: campo de atração com medida lida uma vez, rótulo com inércia própria e volta com mola. No toque e sob reduced-motion é um botão comum.

- Nome no registry: `magnetic-cta`
- Tipo: componente
- Dependências npm: @radix-ui/react-slot
- Demo: https://ui.visantlabs.com/c/magnetic-cta
- Categorias: controles, cta, botao, ima, hover, conversao

## Quando usar

- Use quando: Botão principal de landing que vem buscar o ponteiro, numa dobra de conversão com espaço em volta
- Evite quando: Botão em formulário ou lista densa: botão do tema; bloco completo de conversão, cta-surface

## Instalar

```bash
npx shadcn@latest add @visant/magnetic-cta
```

## Usar

```tsx
<MagneticCta />
```

## API

### MagneticCta

- `asChild?: boolean = false` — Renderiza no elemento filho em vez de um `<button>`. Use pra `<a>`, `<Link>` do Next, ou o botão do design system do cliente.
- `field?: number = 84` — Raio do campo magnético em px, medido a partir da borda do botão. É o quanto ANTES de chegar o ponteiro começa a puxar. Abaixo de ~48px o efeito só acontece depois que o cursor já está em cima, e aí não serve pra nada.
- `labelLag?: number = 0.35` — Quanto o rótulo fica pra trás do botão. `0` cola o texto na casca.
- `pull?: number = 10` — Deslocamento máximo do botão, em px. Acima de ~14 vira escorregão.
- `sheen?: boolean = true` — Brilho que segue o ponteiro sobre a superfície. Desligue em fundo claro chapado.
- `variant?: "solid" | "outline" = "solid"` — Sem `--brand`: superfície de contorno, pro CTA secundário da mesma dobra.