Primitivas de movimiento
Bloques compartidos para entradas, datos en vivo y momentos destacados. Con movimiento reducido, cada secuencia llega directamente a su estado final y los ciclos ambientales se detienen.
Tokens
motion-tokens.ts: los únicos valores de tiempo que usa la app.
- EASE_OUT
- cubic-bezier(0.22, 1, 0.36, 1)
- Desvanecidos y subidas de la interfaz
- SPRING
- stiffness 380 · damping 32
- Marcadores, píldoras, paneles
- SPRING_SOFT
- stiffness 180 · damping 24
- Barras, indicadores, deslizamientos
- DUR
- fast 0.15s · base 0.25s · slow 0.4s
- Duraciones de interpolación
- STAGGER
- 60 ms
- Intervalo de la cascada
Aparición y cascada
Entradas al montar. Las tarjetas suben 24px en una cascada de 60 ms mientras sus cifras giran.
Reveal
Sube 16px y aparece gradualmente
Reveal como section
80 ms después, desde 24px
- Cargas en tránsito24
- Cajas en existencia18,640 cj
- Entregas a tiempo94.2%
- Exposición de costos$182K
Trazos, guiones, partículas, ondas
DrawPath dibuja la ruta; MarchingDashes y FlowParticles se repiten mientras el movimiento ambiental está activo; SvgRipple se dispara una vez.
Pulso
Halo ambiental para estados en vivo. Punto fijo cuando el movimiento ambiental está desactivado.
- Monitoreo con IA activo
- Requiere su atención
- Alarma de caja refrigerada · RU-114
useTicker · 2,481 cargas · sincronizado hace 12 s
Conteo animado
NumberFlow gira desde 0 al montar y vuelve a girar cuando cambia el valor. Los valores están en unidades de visualización.
- int · cajas en existencia
- 18,640 cj
- usd · valor de la carga
- $148,000
- usdCents · cargos
- −$562.40
- usdCompact · exposición
- $182K
- pct0 · prevención
- 53%
- pct1 · a tiempo
- 94.2%
- tempF · caja refrigerada
- 31°F
- decimal1 · estadía promedio
- 3.4 h
Tablero de paletas
Los caracteres giran con un intervalo de 90 ms y vuelven a girar cuando cambian.
Dígale este código a Andre cuando tenga las cajas en sus manos.
Sello
El sello de entregado cae con una pequeña ráfaga de puntos.
Panel de firma
Dibujada con el puntero y suavizado cuadrático. Con el dedo, un lápiz o el mouse.
Dibuje con el dedo, un lápiz o el mouse dentro del recuadro.
Magnético
Los botones de acción de la página de inicio se inclinan hacia un puntero preciso. Quietos en pantallas táctiles y con movimiento reducido.
Enlace con transición
Agrega un tipo de transición nav-forward o nav-back. Las páginas envueltas en DirectionalTransition se deslizan.
Inclinación al desplazarse
El panel de la consola en la página de inicio sube con una inclinación 3D que se aplana al llegar al centro.
Aparición al entrar en vista
Sube una vez cuando entra en la vista.
Empacado en Macon
Mantenido a 31°F
Surtido del más antiguo primero