Efecto líquido gooey CSS

Funciones

• Desenfoque y contraste se ajustan por separado — su proporción decide la continuidad del borde
• Tamaño de cada forma ajustable (los hijos lo heredan)
• Velocidad de movimiento ajustable, para ver cómo aparece y se rompe el puente
• En la previa, dos círculos se acercan y se separan despacio, y el puente aparece con ellos
• El código entregado incluye las dos partes, contenedor e hijos, y señala las dos condiciones
• El contenedor usa `filter` y los hijos `background: currentColor`: el color se cambia en un solo sitio
• Añade automáticamente el tratamiento de `prefers-reduced-motion`
• Debajo el código lleva coloreado de sintaxis y un botón de copiar
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Empieza por el radio de desenfoque: cuanto mayor, más grueso el puente, pero también más borrosa la forma en sí
2. Sigue con el contraste: decide la dureza del borde estrujado; si es bajo, el borde se corta en trozos
3. Ajusta el tamaño de los elementos y la velocidad de movimiento y observa cuándo aparece el puente y cuándo se rompe
4. Copia el CSS — y ojo, no pongas `overflow: hidden` en el contenedor

Preguntas frecuentes

¿Por qué el contenedor no puede llevar `overflow: hidden`?

Porque el puente es justo la parte que se sale. El desenfoque agranda la forma hacia fuera y el contraste alto estruja ese contorno en un borde macizo — y la parte que queda entre los elementos es el puente. Con `overflow: hidden`, esa parte que sobresale se recorta, el puente se corta en el límite del contenedor y parece que dos bloques se han separado de golpe. Es la causa más habitual de que este efecto falle, y el síntoma es muy visual: todo se "cuadra".

¿Por qué los elementos hijos tienen que ser de color macizo?

Porque el borde se estruja a partir de la diferencia de grises que deja el desenfoque. Un color translúcido o muy claro, al desenfocarse, deja una diferencia de grises mínima entre zonas vecinas, y al amplificarla con el contraste el borde sale a trozos, como una línea discontinua o ruido. Un color macizo, oscuro y saturado conserva un degradado de grises claro tras el desenfoque, y por eso el borde aguanta continuo. En el código entregado se usa `background: currentColor` precisamente para que los hijos hereden un color macizo.

¿Este efecto tiene coste de rendimiento?

Sí, y no es pequeño. El `filter` del contenedor obliga al navegador a renderizar antes todo el contenedor (con sus hijos) en una capa fuera de pantalla, desenfocarla y contrastarla, y volver a componerla — y en cuanto se mueve un elemento de dentro, esa capa se rehace entera. Así que: no lo pongas en un contenedor grande ni con muchos elementos, no dejes que el contenedor se desplace con el scroll y no metas contenido complejo dentro. Va bien para un grupo pequeño y concentrado.

¿Se puede usar en texto?

Sí, pero ten en cuenta que el texto también se desenfoca y se vuelve a estrujar, con lo que el trazo engorda, se pierde detalle y las letras finas se convierten en una mancha. Por eso solo va bien en titulares grandes y de trazo grueso, y con un contraste más bajo que el de las formas (si no, los trazos se pegan unos a otros). Además el texto tiene que ir en un elemento hijo (el propio contenedor no puede contener el texto), porque si no, se estruja el contenedor junto con él.