Una franja que se desliza sola para vitrinas: se pausa al pasar el cursor, al enfocarla, fuera de pantalla y con un botón de 48px, y se queda quieta con movimiento reducido.
Ceramic cupQ 120
Field watchQ 1,450
Day packQ 690
SunglassesQ 380
Wall clockQ 540
HoodieQ 420
Instalación
Agrégalo con el CLI de shadcn o copia el código a mano.
$ pnpm dlx shadcn@latest add @ssntl/marqueeReferencia de API
Marquee
labelobligatorioTipo:stringNames the region for screen readers: “Examples built with ssntl/ui”.Por defecto:—pauseLabel?Tipo:stringPor defecto:"Pause"playLabel?Tipo:stringPor defecto:"Play"duration?Tipo:numberSeconds for one full loop; longer strips need more.Por defecto:—childrenobligatorioTipo:React.ReactNodeMarqueeItem elements.Por defecto:—
También acepta todos los props de <div>.
Sin props propios: cada uno pasa todos sus props al elemento de la derecha.
MarqueeItem<li>
Reglas
Lo que este componente espera de ti, tal como se instala en components/ui/marquee.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).
## Reglas de Marquee
- **Pausa.** Todo lo que se mueve solo por más de cinco segundos necesita una forma de detenerse (WCAG 2.2.2). La franja se pausa al pasar el cursor o al enfocarla, y tiene un botón de pausa de 48px cuya etiqueta dice qué detiene.
- Fuera de pantalla también se pausa, así nunca gasta batería donde nadie mira.
- Una sola copia para las personas: la franja se dibuja dos veces para que el ciclo no se note, y la copia lleva `aria-hidden` e inert.
- Solo se mueve translate, a velocidad constante con `--ease-linear`; ajusta duration para que una franja larga no corra.
- **Movimiento reducido.** Se queda quieta y se vuelve una fila con scroll, enfocable y con nombre.
- Los bordes se desvanecen (mask-fade-x) en lugar de cortar los elementos a la mitad.
- **Solo para ambientar.** Nunca pongas en una franja en movimiento algo que haya que leer o usar a tiempo.