'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EfectosAlea Pro
Burst y Marquee
Una pequeña ráfaga de chispas para un éxito real, y un bucle de logos o citas que se pausa con el mouse encima.
import { Burst, Marquee, burst } from '@alea/pro';
Ejemplos
Burst
Una pequeña celebración ante un éxito real: chispas que salen del control. Con movimiento reducido no pasa nada.
Marquee
Logos o citas en un bucle que se pausa con hover o foco; con movimiento reducido se detiene y permite scroll.
Northwind
Globex
Initech
Umbrella
Stark
Wayne
Acme
Props
Burst props
Envuelve un control: cada clic lanza una pequeña ráfaga desde él.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | |
count | number | - |
Marquee props
Logos o citas moviéndose en un bucle. La copia está oculta para lectores de pantalla; con movimiento reducido se detiene y permite scroll.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Nombra la región, por ejemplo "Clientes". |
className | string | - | |
direction | "left" | "right" | 'left' | |
duration | number | 30 | Segundos por vuelta. Por defecto 30. |
fade | boolean | true | Desvanece los bordes. Por defecto true. |
pauseOnHover | boolean | true | Se pausa con hover o foco. Por defecto true. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Burst
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-burst-host
Marquee
- Variantes
directionleftright- Estados
- Hover (CSS)Focus inside
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-marquee.alea-marquee-track.alea-marquee-group- Atributos data
data-fadedata-direction=rightdata-pause
Accesibilidad
- Burst es decoración y no hace nada con movimiento reducido.
- Marquee lista cada elemento una vez para lectores de pantalla (la copia está oculta e inerte), se pausa con hover y foco, y permite scroll en vez de moverse con movimiento reducido.
Qué hacer y qué evitar
Hacer
- Burst solo para un éxito que importa: un me gusta, una meta cumplida.
Evitar
- No pongas acciones necesarias dentro de un marquee.