Zócalo Lab · Cristal líquido / Composición
Cómo se construyó Zócalo
Un pie de página de «liquid glass» apoyado sobre un vídeo que ocupa toda la pantalla y no se mueve al hacer scroll. Lo interesante no es el desenfoque —eso es una línea de CSS— sino el filete luminoso de 1,4 px que recorre el borde: no es un border, es un degradado vertical pintado a sangre y recortado al perímetro con dos máscaras compuestas en xor. El panel de mandos permite mover desenfoque, grosor y brillo del filete, radio y velado del vídeo, comparar contra un plano opaco y, sobre todo, «ver la máscara»: quitar el recorte para que aparezca el degradado entero y se entienda de dónde sale el brillo de las esquinas.
Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.
Qué demuestra
- El bloque .liquid-glass del spec reproducido tal cual y luego tokenizado: desenfoque, tinte, grosor y brillo del filete y radio salen de variables CSS que el panel mueve en caliente
- Filete de 1,4 px por mask-composite: dos linear-gradient compuestos en xor recortan al borde un degradado que va de 45 % arriba a 0 % en el centro y vuelve a 45 % abajo
- Conmutador «Ver la máscara»: quita el recorte y enseña el degradado completo que hay debajo del filete
- Conmutador «Sin cristal» para comparar el mismo pie contra un plano opaco equivalente
- Vídeo del spec descargado de CloudFront y autoalojado, fijo con object-fit: cover y velado radial regulable para que el texto conserve contraste
- La entrada del motion.footer (opacidad 0→1, y 40→0, 1 s, retardo 0,4 s) resuelta con IntersectionObserver y una transición CSS, repetible desde el panel
- Rejilla de 12 columnas del spec: marca en 5 y tres listas de enlaces en 7, apiladas en móvil
- Los cinco iconos de lucide-react del spec redibujados a mano como SVG de 16 px y trazo 1.5
- Marca ficticia española (Lumbre, observatorio de divulgación) y copy en español
- Cero dependencias: el spec pedía React, Tailwind v4, motion/react y lucide-react — aquí es un único HTML con CSS y JS a mano