Mi caja de herramientas de movimiento

Un reveal al hacer scroll, un slider, un hover de imagen, un cursor, un fondo WebGL para el hero. Durante años fui copiándolos de proyectos anteriores: cada copia era un poco distinta, con colores de otro cliente y detalles que ya no recordaba por qué estaban ahí. El tiempo que perdía no era en hacer la animación, sino en volver a encontrarla, adaptarla y comprobar que seguía funcionando.

Así que decidí construirlo todo una vez, bien, y catalogarlo. El índice de la izquierda es la lista completa de lo que sé hacer en movimiento: 222 técnicas WebGL (shaders, geometría 3D, partículas, post-proceso, simulaciones) y 346 animaciones repartidas en nueve librerías: GSAP, scroll, rejillas, transiciones de página, slideshows, tipografía, hover, cursores y un design system de microanimaciones.

Y la parte que de verdad me ahorra tiempo: cada pieza se personaliza desde un panel y el código sale listo para pegar con mis valores. Elijo la animación, la pongo en los colores del cliente, ajusto tamaño y parámetros, copio y la pego en la web que estoy maquetando. Lo que antes era una tarde, ahora son diez minutos.

Al abrir una pieza aparece grande, con su código al lado y un panel con todo lo que se puede tocar. En WebGL, «Vista y colores»: cuatro tamaños, cuatro proporciones, ocho paletas y una combinación aleatoria, además de los parámetros propios de cada técnica (cantidad de gotas, velocidad, vaho, tinte del cristal…). La captura de arriba es «Gotas de lluvia en el cristal» con la paleta Neón y el tamaño Grande.

En las librerías de animación, el panel «Personalizar» cambia el color de acento, el secundario, el claro y el fondo, aplica paletas, y expone los parámetros de la demo (textos, velocidades, variantes). Debajo, la pestaña «Listo para pegar» genera el HTML, el CSS y los scripts necesarios ya con esos valores; se copia con un botón o se descarga como archivo.

Es la parte que uso al empezar un proyecto. El asesor conoce 24 sectores (restaurantes, despachos, reformas, clínicas, tiendas, estudios, hoteles, ONG…) y, para cada uno, un tono, recomendaciones de diseño y una selección de animaciones de todas las librerías con por qué encaja y cómo usarla en la página. Cada recomendación se ve en pequeño, funcionando, y lleva al visor para personalizarla.

Cada técnica WebGL es un módulo con un contrato mínimo (id, parámetros, create() que devuelve render, resize y dispose) sobre un núcleo propio de WebGL: compilación de programas, buffers, texturas, framebuffers ping-pong, cámara orbital, geometrías y una biblioteca GLSL de ruido y utilidades. Las librerías de animación comparten un único motor que monta cada demo en las tarjetas y en el visor, genera el panel de personalización a partir de sus parámetros y exporta el código.

Las demos están escritas en unidades de contenedor para que la misma pieza funcione en una tarjeta de 300 píxeles y en el visor a pantalla completa. Todo está probado en Chrome con GPU real: un harness recorre las 568 piezas, recoge errores de consola y detecta canvas en blanco. Y las referencias de Codrops y CodePen que me gustaban están rehechas desde cero, con mi marca, no copiadas.