Notificaciones
GratisNotificaciones apiladas como cartas: se despliegan al pasar el cursor o enfocar, se pausan mientras las lees, se cierran solas y se anuncian con aria-live.
Navegación
Navegación
Gratis
Marquesina
Marquesina infinita sin saltos: el cursor la frena y la empuja con inercia, las filas van en sentidos opuestos y el foco del teclado la pausa.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 9 (8 ajustables)
- Diseño
- Movimiento
- Detalle
- Código
- Textura
- Ritmo
- Detalle
- Código
- Textura
- Ritmo
- Diseño
- Movimiento
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { Marquee } from "furin";También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| items | ReactNode[] | "Diseño, Movimiento, Detalle…" | Elementos de la marquesina: textos o cualquier nodo. |
| speed | number | 70 | Velocidad base, en px por segundo. |
| direction | "left" | "right" | "left" | Dirección del movimiento de la primera fila. |
| rows | number | 2 | Filas apiladas; cada una va en dirección contraria a la anterior. |
| gap | number | 36 | Espacio entre elementos, en px. |
| hoverSpeed | number | 0.14 | Velocidad al pasar el cursor, como fracción de la base (0 = frena del todo). |
| push | number | 0.6 | Cuánto empuja el cursor al moverse sobre la fila (0 = nada). |
| fade | boolean | true | Desvanece los bordes. |
| label | string | "Marquesina" | Etiqueta accesible de la marquesina. |