Quizá te hayas fijado en la pintura. A cada borde de tinta de esta web le salen chorretones que se llenan, cogen peso, se estiran en un hilo y se sueltan, y lo mismo pasa con cada logo de la tira de marcas para las que trabajamos. Las gotas caen sobre lo que tengan debajo (una foto, una tarjeta, un botón) y salpican. En una superficie plana se quedan quietas. En una inclinada resbalan, rebosan por el borde, bajan por el lateral y siguen goteando. Todo acaba en un charco sobre el pie de página, que no deja de subir mientras sigas aquí.
Nuestro logo es un chorretón, así que la web tenía que gotear. Nada de un vídeo en bucle: pintura de verdad, calculada al momento en tu navegador. La hicimos con Claude Code, como cabría esperar de una agencia que lleva la IA en el letrero. Sacar los chorretones en pantalla fue lo fácil. Lo difícil fue dejarlos lo bastante pulidos como para tenerlos funcionando en una web publicada, y de eso va esta nota.
Pintura que sabe dónde está
Cada chorretón es un pequeño juguete de física. La pintura se acumula en la punta, la punta pesa más, y cuanto más pesa, más rápido baja el chorretón, hasta que se estrecha y se suelta. Una gota que cae lee el contorno real de lo que golpea, esquinas redondeadas y fotos inclinadas incluidas, así que la pintura sobre un botón redondo se pega al botón. También nota la página. Si das un tirón al hacer scroll, las gotas que cuelgan se desprenden. Pasa el cursor por un logo de la página de inicio y se levanta, y la pintura se levanta con él.
Antes de dejarla entrar en la web publicada, tenía que cumplir cuatro reglas:
- Nunca en medio. No puede bloquear un clic, tapar texto ni ralentizar la página.
- Quieta si se lo pides. Si tu dispositivo pide movimiento reducido, o tienes JavaScript desactivado, ves la página en reposo con los chorretones pintados.
- Pintura plana. Bordes nítidos y el mismo brillito que el logo. Sin desenfoques ni degradados.
- Dormida cuando nada se mueve.
Donde se lió la cosa
Lo primero, las cosas redondas. Casi todos esos logos van en botones con forma de píldora, y a la pintura le encanta trepar por sus extremos redondos. Justo ahí empezaron a salirles a los chorretones pinchos afilados, como si alguien los hubiera recortado con tijeras. El código que dibujaba una gota colgando daba por hecho que la superficie de encima era plana. En la parte de abajo de una píldora, lo es. En la curva, dibujaba una cuña pendiente arriba y una lámina fina de pintura sobre el propio botón. La solución fue dejar que la pintura tocara la curva real por los dos lados, igual que los tocaría una bola encajada entre la gota y la superficie.
Luego llegó la parte en la que casi se derrite el navegador. Cuanto más rato te quedabas, más pesaba la página. La pintura se amontonaba en cada foto y tarjeta por la que pasabas haciendo scroll, y al pasar el cursor por un logo la tira daba tirones. La primera versión seguía una idea que casi cualquier developer daría por buena: pintar en muchos canvas pequeños y redibujar solo los trocitos que cambian. Resultó ser al revés. Cada canvas le cuesta algo a la GPU solo por existir y redibujarse, por pequeño que sea, y tras una visita larga había unos 250. Menos canvas y más grandes, y no pintar lo que nadie ve, los dejó en unos 80. En una prueba que hace scroll por toda la página y pasa el cursor por una docena de logos, el trabajo gráfico bajó un 39 % y los tirones largos pasaron de once a uno.
Medir tenía su propia trampa. La primera lectura decía que la página perdía 19 fotogramas por segundo. No era verdad. Los chorretones van a 60 fotogramas por segundo a propósito, en una pantalla que se refresca 120 veces por segundo, y el navegador contaba como fallo cada fotograma que nos saltábamos. Podríamos habernos pasado tranquilamente un día optimizando contra esa cifra. Antes de perseguir un número, mira qué significa.
Una web puede tener personalidad y seguir siendo rápida. El truco es tratar la parte juguetona con la misma disciplina que las partes aburridas: probarla en un navegador de verdad, respetar a quien no quiere movimiento y mantenerla lejos de lo que la visita ha venido a hacer.
¿Quieres que tu web parezca un poco más viva?