El detalle que separa una web correcta de una que se recuerda: composición, cristal líquido, medios sincronizados y transiciones con criterio.
Una transición bien hecha explica qué acaba de pasar: de dónde viene el elemento que aparece, qué relación tiene con lo que había antes, si la acción se completó. Cuando falta, el usuario tiene que reconstruirlo mentalmente cada vez.
El límite está en la utilidad. Una animación que informa merece los 300 milisegundos que cuesta; una que solo se luce los roba en cada interacción, y esas se acumulan.
El efecto de cristal está en todas partes y casi siempre mal resuelto: desenfoques que matan el rendimiento, contrastes que rompen la accesibilidad y bordes que desaparecen según el fondo. En Zócalo desmontamos uno en vivo, incluido el filete de 1,4 píxeles, para enseñar de qué está hecho.
Retablo, Damero y Ocaso aplican el mismo criterio a la composición: rejilla bento con vídeo, secciones en zigzag y tarjetas que cruzan de foto a vídeo al caer la noche. Todo con CSS, sin librerías de animación.
Ninguno de estos experimentos usa GSAP, Framer Motion ni ninguna librería de animación. No es purismo: es que cada dependencia añade peso, se queda obsoleta y acaba obligando a una migración que nadie pidió.
Con CSS moderno, IntersectionObserver y requestAnimationFrame se llega mucho más lejos de lo que la mayoría supone, y lo que se construye así sigue funcionando dentro de cinco años sin tocarlo.
Preguntas frecuentes
Bien hechas, no. Se animan solo propiedades que la GPU puede componer, se activan cuando el elemento entra en pantalla y se desactivan si el visitante pide movimiento reducido en su sistema.
Sí, y se prueban ahí primero. Varios de estos labs están planteados directamente para pantalla táctil, con arrastre e inercia en lugar de hover.
Se respeta la preferencia de movimiento reducido, se mantiene el contraste sobre fondos translúcidos y todo lo interactivo es alcanzable por teclado. Un efecto que rompe eso no llega a producción.