'/%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}
Motion
Componentes de movimiento
La prop motion en cada overlay, y los componentes pequeños detrás de los patrones: swap, roll, reveal, dissolve, resize, stream y progreso de scroll.
import { TextSwap, NumberRoll, Reveal, Presence, AutoHeight, StreamingText, ScrollProgress } from '@alea/motion';
Ejemplos
Swap y roll
El texto se funde con un desenfoque cuando cambia; los dígitos ruedan hasta el nuevo número.
$1,290
Reveal y stagger
El contenido entra al aparecer con el scroll; con stagger, los hijos llegan uno tras otro. El HTML del servidor sigue visible.
Tokens
Components
Motion
Presencia y tamaño
Lo que se quita se disuelve antes de desmontarse; AutoHeight anima los cambios de tamaño.
Alea Motion animates what changed.
Stream
Una respuesta que llega por partes: cada parte aparece gradualmente, un cursor se muestra mientras transmite, un brillo mientras piensa.
Éxito, onda, badge y abanico
Patrones incluidos en los componentes: isSuccess, ripple, CountBadge y el abanico de AvatarGroup.
La prop motion
Cada overlay acepta motion: un preset, false, o { enter, exit, duration, easing, delay }.
Morph, puntos y revelado
Un menú que crece desde su disparador, el loader de 16 puntos, y un esqueleto que se funde con el contenido.
Props
TextSwap props
Texto o un ícono que cambia con un breve fundido con desenfoque (el patrón swap). Dale un valor que sirva como key.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'span' | |
className | string | - | |
direction | "up" | "down" | 'up' | |
variant | "scale" | "blur" | 'blur' |
NumberRoll props
Un número cuyos dígitos ruedan hasta el nuevo valor (el patrón roll). Los lectores de pantalla reciben el valor con formato una vez.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
valueobligatoria | number | - | |
className | string | - | |
format | NumberFormatOptions | - | |
locale | string | - |
Reveal props
Contenido que entra cuando aparece con el scroll (una vez). Sin JavaScript simplemente se muestra.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
delay | number | - | Demora en ms. |
motion | "fade" | "scale" | "pop" | "rise" | "drop" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "blur" | "zoom" | "flip" | "morph" | "none" | MotionO… | 'rise' | El preset de entrada. Por defecto rise. |
once | boolean | true | |
stagger | boolean | - | Los hijos entran uno tras otro en lugar de todo el bloque. |
style | CSSProperties | - |
Presence props
Mantiene montado un hijo mientras hace su salida (el preset dissolve por defecto), y luego lo desmonta.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
showobligatoria | boolean | - | |
exitClassName | string | 'alea-dissolve-out' |
AutoHeight props
Anima su altura cuando su contenido cambia de tamaño (el patrón resize).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - |
StreamingText props
Texto que llega por partes (respuestas de IA): las partes nuevas aparecen gradualmente, un cursor se muestra mientras transmite.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
chunksobligatoria | string[] | - | |
as | ElementType | 'p' | |
className | string | - | |
streaming | boolean | false |
ScrollProgress props
Una barra fina arriba que se llena al hacer scroll en la página (scroll timeline de CSS donde está disponible).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - |
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.
TextSwap
NumberRoll
- Motion
- roll
- 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-roll.alea-roll-digit.alea-roll-strip
Presence
- Motion
- dissolve
- 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-dissolve-out
AutoHeight
- Motion
- resize
- 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-autoheight
StreamingText
ScrollProgress
- Motion
- scroll
- 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-scroll-progress
Accesibilidad
- Todo sigue prefers-reduced-motion: distancias, escalas y desenfoque van a cero, los bucles se detienen, y los fundidos se mantienen para que los cambios se sigan notando.
- NumberRoll y TextSwap anuncian el nuevo valor una vez (de forma polite), nunca en cada cuadro.
- Reveal solo oculta contenido que empieza debajo del pliegue y solo después de que corre JavaScript, así el HTML del servidor y los buscadores ven todo.
- StreamingText pone aria-busy mientras transmite.
Qué hacer y qué evitar
Hacer
- Elige un preset según lo que cambió: pop para cosas ancladas, rise para nivel de página, slide para paneles.
- Cambia el movimiento de forma global con ThemeProvider motion={{ mode, speed, intensity, components }} antes de recurrir a props por instancia.
- Usa isSuccess por un momento después de que una acción funcionó, y luego vuelve.
Evitar
- No animes propiedades de diseño (width, top); los presets usan transform y opacity.
- No hagas esperar a la gente a que termine una animación para actuar.
- No apagues el movimiento para todos; respeta el ajuste del sistema, u ofrece tu propio interruptor con reduced="never".