# Marquee

> Una fila de logos o nombres que se desplaza sola en bucle cuando no entra en el ancho, como la de clientes de una home. Si entra, queda quieta y centrada.

```tsx
import { Marquee } from "sebs7n-ui/marquee"
```

## Ejemplos

### Clientes

Si no entran en el ancho, pasan en bucle; se pausa con el puntero encima o con el botón, y con foco en un link queda quieta. Con movimiento reducido queda quieta y se scrollea a mano.

```tsx
import { Marquee } from "sebs7n-ui/marquee"

function Clients() {
  return <Marquee aria-label="Clientes que facturan con nosotros" className="w-full" items={items} />
}
```

### Pocos, quietos

Si entran, la fila queda quieta y centrada: no hay nada que mover.

```tsx
import { Marquee } from "sebs7n-ui/marquee"

function Few() {
  return <Marquee aria-label="Clientes destacados" className="w-full" items={items.slice(0, 3)} />
}
```

## Props

### Marquee

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `aria-label` * | `string` | — | El nombre de la lista, que no se ve: «Clientes». |
| `items` * | `MarqueeItem[]` | — | Los ítems de la fila, en orden. |
| `labels` | `Partial<MarqueeLabels>` | — | Textos del botón de pausa: `pause` y `play`. Los que vienen por defecto son `marqueeLabels`. |
| `pauseControl` | `"button" \| "press"` | `"button"` | Cómo se pausa. `button` (por defecto): el botón de pausa al costado. `press`: tocar la franja la pausa y tocarla de nuevo la reanuda; el botón sigue estando para teclado y lector de pantalla, pero no se ve hasta tener el foco (2.2.2 pide un control, no que se vea siempre). |
| `speed` | `number` | `40` | La velocidad del bucle, en píxeles por segundo. Por defecto, 40: la misma sensación con 4 logos que con 10. |
| `variant` | `"logos" \| "cards"` | `"logos"` | `logos` (por defecto): ítems de 44 de alto, centrados. `cards`: ítems que son cards, estirados a la altura del más alto. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Recorre los links de la fila una sola vez; con foco en un link, la fila queda quieta y se scrollea hasta él. |
| Enter · Espacio | En el botón de pausa, detiene o reanuda el bucle. |

## Accesibilidad

- La fila es una lista con nombre (`aria-label`, obligatorio). La tanda copia del bucle va con `aria-hidden` e `inert`: el lector y Tab no la recorren.
- En bucle trae un botón visible «Pausar» / «Reanudar» (WCAG 2.2.2): el hover no existe en un celular. Se pausa también con el puntero sobre los ítems y fuera de pantalla; la pausa del botón dura hasta «Reanudar», que la vuelve a mover aunque el botón siga con el foco.
- Con foco en un link deja de moverse y pasa a scroll a mano, así el link enfocado queda a la vista y sin cortar (WCAG 2.4.7 y 2.4.11). Con `prefers-reduced-motion` no se mueve: si desborda, se scrollea a mano.
- Sin JS, y en el HTML del servidor, es la fila quieta con todos los ítems.

## Reglas de uso

- Para una prueba social de marketing (clientes, prensa), no para información que haya que leer: lo que se mueve no se lee.
- Cada ítem es `{ id, node, href? }`: `node` puede ser un SVG o un `<img>` con `alt`; con `href`, un link que abre en otra pestaña.
- `speed` en píxeles por segundo (40 por defecto): la duración sale del ancho de la tanda (que se vuelve a medir si un logo o la fuente cargan después), así se siente igual con 4 ítems que con 10.
- La animación es la utilidad `animate-marquee` de `theme.css`. Solo por subpath (`sebs7n-ui/marquee`).

## Relacionados

[carousel](/docs/components/carousel.md)