Motion

Movimiento restringido y funcional. Cada animación justifica qué mejora.

El movimiento solo entra si acompaña lo que se cuenta. El tono es preciso, no elástico: no se anima el texto ni se usan parallax, spring o skeletons.

Capas

CapaQuéCómo
1. Smooth scrollScroll global suavizadoLenis en todas las páginas
2. Entrada escalonadaFade-in al cargar.fade-entry, delay aleatorio 50-200ms, 0.4s ease-out
3. Scroll revealElementos al entrar en viewportIntersection Observer + CSS
4. InteraccionesHover, estados, modalCSS transitions por componente

Duración y easing

InteracciónDuraciónEasing
Hover en links/botones0.2sease
NavPill show/hide0.3sease-out
BentoGrid body reveal0.3sease-out
Modal open0.3sease-out
Modal close0.2sease-in

Lo que no se anima

  • Prosa palabra por palabra o línea por línea. Bloques completos.
  • Parallax. Nunca. En ningún elemento.
  • Animaciones de carga (skeletons, shimmers). Sitio estático.
  • Spring physics. El tono es preciso, no elástico.

Stack permitido

LibreríaUsoCarga
LenisSmooth scrollTodas las páginas
CSS transitionsHover, estados, revealsNativo
Intersection ObserverScroll reveal triggerAPI nativa
GSAPSolo coordinación de timelinePor componente, nunca global