EXP_003 / CREATIVE CODE
Movimiento escrito en código.
Diseñar el movimiento como parte del sistema, no como decoración al final. Todavía en curso.
01 La pregunta
¿Y si el movimiento pudiera comunicar estructura, jerarquía, causa y efecto?
Algunos experimentos empiezan con una pregunta técnica. Este empezó con una sensación: quería que las interfaces se sintieran más vivas, no por tener más animaciones, sino porque el movimiento en sí pudiera transmitir significado.
Eso me llevó a otra forma de pensar el movimiento: no como decoración agregada cuando la interfaz ya está terminada, sino como algo diseñado dentro del sistema. Este lab sigue en curso. De hecho, este portfolio es parte del experimento.
02 El movimiento como lenguaje
El buen movimiento se comporta como la buena tipografía.
Tiene ritmo, jerarquía, timing y énfasis. Demasiado se vuelve ruido; muy poco y la interfaz se siente desconectada.
Una transición puede explicar que dos pantallas representan el mismo objeto. Un elemento que se desplaza puede mostrar de dónde vino la información. Un retraso sutil puede establecer jerarquía sin sumar otro borde, etiqueta o color.
La pregunta dejó de ser “¿Cómo animo esto?” y pasó a ser “¿Qué debería comunicar el movimiento aquí?”
03 El código cambia cómo se diseña el movimiento
Reglas que producen movimiento.
Las herramientas de animación tradicionales son excelentes cuando el resultado final es fijo. Las interfaces no lo son: cambian de tamaño, reaccionan al estado, cambian de contenido, se interrumpen y aparecen en contextos distintos.
Escritas en código, esas relaciones pasan a ser parte de la animación. Las duraciones pueden responder a la distancia. Los layouts pueden cambiar sin romper la coreografía. El movimiento puede reutilizar los mismos design tokens que el resto del producto: reproducible, componible y responsivo.
En lugar de diseñar una secuencia de frames, empecé a diseñar reglas que producen movimiento.
04 Lo determinista también puede sentirse orgánico
Predecible, no mecánico.
Estuve explorando movimiento que se sienta natural sin volverse impredecible. Un sistema puede ser completamente determinista y aun así tener personalidad.
Curvas de easing, stagger, parámetros de spring, timing relativo, trayectorias y coreografía abren un espacio de diseño enorme sin introducir aleatoriedad. El objetivo no es moverse distinto cada vez, sino que el movimiento se sienta propio del objeto.
Predecible no tiene por qué significar mecánico.
05 La animación expone el mal diseño
El movimiento es una herramienta de debugging.
Un layout estático puede esconder relaciones débiles entre elementos. Al animarlo, esos problemas se vuelven evidentes. El movimiento obliga a responder preguntas que el diseño estático a veces permite ignorar.
- SÍNTOMANo sabes desde dónde debería entrar un elemento
- Su relación con el estado anterior no está clara.
- SÍNTOMAUna transición necesita demasiados movimientos independientes
- La jerarquía de información está haciendo demasiado.
- SÍNTOMALa versión mobile colapsa cuando la composición se mueve
- El layout no era realmente responsivo desde el principio.
06 De interfaz a coreografía
Este portfolio es el campo de prueba.
Los elementos no simplemente aparecen. Las herramientas orbitan, convergen y se convierten en resultados. Las secciones transicionan como partes de una narrativa mayor. El movimiento no está para impresionar: intenta explicar cómo pienso y cómo trabajo.
Cuando el movimiento transmite significado, la animación deja de ser un efecto visual y pasa a ser parte de la arquitectura de información.
Ver los sistemas calibrados en el inicioEl movimiento puede transmitir significado.
07 Hacia dónde va
¿Puede un design system generar su propio movimiento?
Sigo explorando el límite entre herramientas de diseño, animación en el navegador y video programático. Remotion vuelve ese límite especialmente interesante: componentes de React, sistemas de layout y lógica de animación pueden producir no solo interfaces interactivas, sino también piezas visuales renderizadas.
¿Qué pasa cuando los mismos primitivos impulsan una interfaz, una demo de producto, una pieza para redes o toda una narrativa visual? Todavía no tengo la respuesta final. Por eso este sigue siendo un lab.
A dónde llegó
Agregar mejores animaciones a las interfaces.
¿Puede el movimiento convertirse en software?