10 de 12
Movimiento
Sólo de entrada, nunca bucle. Las curvas, los tiempos y lo que no se mueve.
El pasamanos sube una vez, alcanza el descanso y ahí se queda. No oscila, no vuelve sobre sus pasos y no llama la atención mientras se sube: es la curva del sistema construida en latón, y la escalera se recorre sin mirarla.
La regla
Un elemento llega una vez, cuando le toca ser leído, y se queda quieto.
Nada se mueve por su cuenta mientras alguien lee. Un bucle es comportamiento de loader, no de marca: dice que el sistema está esperando algo.
Todo lo que sigue son las condiciones de esa única llegada: con qué curva, en cuánto tiempo y a qué distancia del hermano de al lado.
Ésta es la sección más corta del sistema y la única que tiene que demostrarse a sí misma: un párrafo sobre una curva no enseña la curva.
Por eso ningún espécimen de aquí se explica: se corre. La curva está trazada leyendo el valor que publica el registro, la entrada se dispara de verdad, y cada bloque de esta página llegó con los mismos 880 ms que la página describe — el que acabas de ver entrar.
Avance
Asentado
Entra
Tiempo
- --ease-club
- cubic-bezier(0.16, 1, 0.3, 1)
- --ease-out-quart
- cubic-bezier(0.25, 1, 0.5, 1)
La curva del sistema
Llega y asienta. Cero rebote.
El trazo grueso es el gesto de marca; el delgado, la interfaz que lo sostiene. Los dos gastan casi todo su recorrido en el primer tercio del tiempo y entran al final planos: por eso un bloque parece haber estado siempre ahí en cuanto termina de llegar.
Ninguna de las dos pasa por encima del techo y vuelve. Una curva que se asoma arriba del final y regresa es un rebote, y un rebote convierte una llegada en un gesto que pide aplauso.
Las dos salen igual de rápido y ninguna pasa nunca del final: eso es lo que quiere decir exponencial de salida. La diagonal punteada es el avance lineal — el que hace que una entrada se sienta mecánica, porque llega al final a la misma velocidad con la que arrancó.
Siete valores, dos oficios
Las curvas y los tiempos
El gesto de marca
Una curva, un tiempo y un escalonado. De estos tres sale todo lo que llega en el libro.
- --ease-clubcubic-bezier(0.16, 1, 0.3, 1)
- La curva del sistema: exponencial de salida, cero rebote. Llega y asienta
- --duration-revela880ms
- Un bloque llega una vez, cuando entra en cuadro
- --stagger-hermano95ms
- Entre hermanos de una misma retícula. Máximo seis en cadena
La interfaz que lo sostiene
Lo que responde a la mano: hover, foco, liga y la salida de la entrada. Tres tiempos y una curva, ninguno por encima de 320 ms.
- --duration-fast120ms
- Micro-feedback: hover, foco, liga
- --duration-base200ms
- Transición de interfaz
- --duration-slow320ms
- Salida de la entrada de marca
- --ease-out-quartcubic-bezier(0.25, 1, 0.5, 1)
- Superficie de interfaz
Siete valores y ninguno más. Puestos en dos mitades se ve la separación que la sección afirma: el gesto de marca corre a 880 ms porque se lee, y la interfaz a 120 porque se toca. Un solo juego de tiempos para las dos cosas haría que la marca se sienta lenta o que el botón se sienta nervioso.
La curva, corriendo
La entrada, disparada
Seis hermanos, la curva del sistema y 95 ms entre uno y el siguiente. Seis es el máximo en cadena: el séptimo llega tarde a una lectura que ya empezó.
880 ms · cubic-bezier(0.16, 1, 0.3, 1) · y 18 px
Todo ya llegó
- 01Rótulo+0 ms
- 02Titular+95 ms
- 03Bajada+190 ms
- 04Filete+285 ms
- 05Dato+380 ms
- 06Pie+475 ms
Seis hermanos con 95 ms entre uno y el siguiente: el último llega 475 ms después del primero, y aun así la cadena se lee como un solo movimiento. Con un séptimo la cadena pasa del medio segundo y el final llega a una lectura que ya empezó sin él.
Cuatro renuncias
Lo que nunca se mueve
- 01
Nada elástico.
La curva es exponencial de salida: llega y asienta, cero rebote.
- 02
Sin giro, salvo el símbolo en estado de carga.
Es el único elemento que gira, y sólo mientras espera.
- 03
Sin paralaje decorativo.
La retícula no se anima: sólo opacidad y desplazamiento.
- 04
Nada que se oculte al subir.
Lo revelado se queda — una entrada con salida es un bucle disfrazado.
Cuatro renuncias, y las cuatro son falsables: cualquiera puede abrir esta página y comprobar que nada rebota, que nada gira, que la retícula no se desplaza al hacer scroll y que nada de lo revelado se vuelve a esconder.
prefers-reduced-motion: reduce
Con reduced-motion, todo ya llegó.
La entrada no se degrada: se elimina. El contenido aparece completo, sin fundido, sin desplazamiento y sin retraso, y el recorrido del sitio cae a su versión apilada, sin secuestro de scroll.
Es la prueba de que el movimiento nunca carga un argumento: quitarlo entero no le quita una sola palabra a la página.