# Reels Rail

O trilho de vídeo vertical: cartões 9:16 com encaixe, tocando o do meio ou o que está sob o cursor. Som opcional, um card por vez, e fora da tela pausa tudo.

- Nome no registry: `reels-rail`
- Tipo: componente
- Dependências npm: lucide-react
- Demo: https://ui.visantlabs.com/c/reels-rail
- Categorias: conteudo, video, reels, shorts, vertical, carrossel, trilho

## Quando usar

- Use quando: Trilho de vídeos 9:16 em landing ou loja, tocando um por vez como reels
- Evite quando: Cards estáticos ou produtos: use rail; vídeo de abertura em tela cheia, fog-hero

## Instalar

```bash
npx shadcn@latest add @visant/reels-rail
```

## Usar

```tsx
<ReelsRail
  arrows={false}
  driftSpeed={14}
/>
```

## API

### ReelsRail

- `items: ReelItem[]`
- `arrows?: boolean = true`
- `autoPlay?: boolean = true` — O card do meio toca sozinho. Desligue e o play passa a ser sempre manual.
- `bleed?: number | false = false` — Sangra pra fora do container. Passe o mesmo respiro lateral do pai.
- `dragHint?: boolean = true` — Ícone discreto sobre o card do meio, dizendo que a fileira arrasta. Dá dois balanços ao nascer e some de vez no primeiro gesto da pessoa.
- `drift?: boolean = true` — A fileira anda sozinha. Só faz sentido com `loop`.
- `driftSpeed?: number = 26` — Velocidade da deriva, em px por segundo. Acima de ~60 vira esteira.
- `fade?: boolean = true`
- `gap?: number = 16`
- `heading?: any`
- `hint?: any`
- `itemWidth?: number = 260` — Largura de cada card, em px. 9:16 em 260px dá ~462px de altura.
- `label?: string = "Vídeos"`
- `loop?: boolean = true` — A fileira dá a volta em vez de acabar. Ver a nota do cabeçalho.
- `playOn?: "center" | "hover" = "center"` — Quem toca: o card do MEIO ou o card sob o cursor.
- `ratio?: string = "9/16"` — Proporção do card, formato CSS. Reels é `"9/16"`; TikTok idem.
- `sound?: boolean = true` — Mostra o botão de som no card ativo. Desligue em vídeo sem áudio.