# Gleam

A superfície que sabe onde o cursor está: luz sob o ponteiro, borda acesa do lado da luz e inclinação de 5 graus. Quatro números por quadro no JS, o desenho inteiro no CSS. Nasce inclinado e aceso (rest).

- Nome no registry: `gleam`
- Tipo: componente
- Dependências npm: nenhuma
- Demo: https://ui.visantlabs.com/c/gleam
- Categorias: efeitos, hover, card, ponteiro, tilt, luz, spotlight, magnetico

## Quando usar

- Use quando: Grade de cards em que cada um acende luz sob o cursor e inclina leve, em vitrine ou pricing
- Evite quando: Card único que inclina forte em 3D: tilt-card; profundidade da cena inteira, use-pointer-parallax

## Instalar

```bash
npx shadcn@latest add @visant/gleam
```

## Usar

```tsx
<Gleam
  tilt={9}
/>
```

## API

### Gleam

- `as?: "div" | "a" | "article" | "li" = "div"` — Elemento raiz. `a` quando o card inteiro leva a algum lugar.
- `flat?: boolean = false` — Desliga o giro e mantém luz e borda. Para card dentro de grade densa.
- `glow?: number = 1` — Força da luz, 0→1.
- `rest?: boolean = true` — Pose de repouso: sem ponteiro em cima, o card fica inclinado e aceso, com a luz no canto de cima à esquerda. `false` deixa plano e apagado.
- `tilt?: number = 5` — Graus de inclinação no canto. Acima de ~8 o card lê como brinquedo.
- `tint?: string` — Cor da luz e da borda acesa. Qualquer cor CSS; o padrão é a marca.