Cómo convertir un logo en un fondo animado que nunca tapa el texto

Un fondo generativo queda muy bien hasta el cuadro en el que una rama cruza por detrás de la única palabra que había que leer.

Nos pasó armando el video de presentación del estudio. El pedido era cambiar una grilla por líneas que se van armando como un árbol digital, al estilo del logo de Mounaji. La trampa de ese tipo de pedido es que el fondo se vuelve el protagonista y la frase de arriba pasa a ser decoración.

Lo que sigue es la receta con la que terminamos. Tiene tres partes, y el orden importa.

1. Saca las reglas de la marca, no su aspecto

Nuestro logo es una sola polilínea: tramos rectos en ángulos libres, giros cerrados en zigzag, dos troncos verticales paralelos abajo y puntas redondas. No tiene nodos ni puntos en ningún lado.

Eso se convierte en las reglas de dibujo del fondo:

• cada rama es un tramo recto, y el siguiente gira fuerte respecto de la dirección anterior;
• la versión por defecto arranca de pares de troncos verticales en el borde de abajo, como los del logo;
• las puntas se encienden cuando la rama termina de crecer, que es lo más cerca que se puede estar de una punta redonda sin inventarle al logo un adorno que no tiene.

Copiar el contorno de un logo en un fondo da una marca de agua. Copiar sus reglas da algo que se reconoce como la misma marca y puede llenar cualquier cuadro.

2. Hazlo crecer desde una semilla, igual en todos lados

La geometría es una sola función pura, crecerArbol, que recibe el tamaño del cuadro, una semilla, una densidad y la lista de zonas donde no puede entrar, y devuelve cada tramo con el segundo en que empieza y termina de dibujarse. No toma azar del entorno: la misma semilla da el mismo árbol, y un test lo comprueba.

Esa función corre dos veces. En Node, la llaman los tests. En el navegador, el render incrusta el cuerpo de esa misma función en la página, así que el árbol que se prueba es el árbol que se dibuja. No hay una segunda implementación que se desfase.

3. Mide el texto primero, después prohíbelo

Antes de que crezca la primera rama, la página mide las cajas de todo lo que tiene que seguir legible: cada renglón de la frase con todas sus palabras ya maquetadas (también las que siguen ocultas, esperando su entrada), el pie y los chips de etiquetas. Cada caja recibe un pequeño margen y entra a la lista de zonas reservadas.

La regla de crecimiento queda simple: un tramo se acepta sólo si ocho puntos a lo largo de él quedan fuera de toda caja reservada y dentro del cuadro, y si no cruza un tramo ya dibujado. Cuando ninguna dirección candidata pasa, la rama termina en una punta. Los troncos del centro además se frenan justo debajo de la caja más baja que tienen encima, así enmarcan la frase en vez de chocarla.

Este es el árbol para una frase de tres renglones, con la semilla 20260929, generado por esa función. La caja punteada es la reserva; las barras blancas hacen de palabras.

Y la misma semilla sin la reserva. Once de sus 120 tramos pasan por la zona del texto, y el tronco del medio sube derecho hasta adentro.

Lo que medimos

Acá la legibilidad es un número, no una impresión. En cada cuadro de 0 a 6 segundos, en las cinco escenas de texto del video, tomamos el percentil 99 de la luminancia del fondo bajo la caja del texto y calculamos el contraste de los colores del texto contra ella.

• Texto blanco: entre 17,9:1 y 20,6:1.
• Texto cyan (#1eb0f8): entre 7,35:1 y 8,44:1.
• La grilla a la que reemplazó le daba a ese mismo cyan 5,8:1.

La grilla ya pasaba la línea AA de WCAG para texto normal (4,5:1). El árbol la pasa con mucho más margen en su peor cuadro, porque la parte más cargada del dibujo, por construcción, nunca queda detrás de una letra.

Tests que fallan cuando tienen que fallar

La geometría tiene doce tests: la misma semilla da el mismo árbol, ninguna rama entra a la caja del texto ni sale del cuadro, el crecimiento va de la raíz a la punta, las ramas no se cruzan, los troncos vienen de a pares como en el logo, y más densidad da más ramas.

Un test sólo cuenta si se pone en rojo cuando se rompe lo que cuida. Así que lo rompimos a propósito. Quitar la reserva pone en rojo tres de los doce; quitar la regla de no cruzarse pone en rojo otros tres. Con las dos puestas, pasan los doce.

También probamos una segunda copa más tenue detrás de la primera, para dar profundidad. Cruzaba a la de adelante y armaba ovillos justo arriba del texto. Con una copa se lee como el logo; con dos, como una red. Se quitó.

La versión corta

1. Convierte la marca en reglas: forma del tramo, ángulos, cómo empieza, cómo termina.
2. Haz que la forma sea una función pura de una semilla y corre esa misma función donde sea que se dibuje.
3. Mide primero el texto ya maquetado y pásalo como espacio prohibido.
4. Mide el contraste cuadro a cuadro y quédate con el test que atraparía una regresión.

¿Tienes un caso donde quieres ver esto andando? Cuéntanos qué hace tu negocio y lo armamos sobre tu propio material.