---
title: "Zócalo — pie de cristal líquido sobre vídeo | Logic2b Lab"
description: "Demo técnica: footer «liquid glass» sobre vídeo a pantalla completa con filete degradado de 1,4 px por mask-composite, ajustable en vivo. HTML, CSS y JS sin dependencias."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/zocalo/
  md: https://logic2b.com/lab/zocalo/index.md
---

# Zócalo Lab · Cristal líquido / Composición

lab.logic2b.com/zocalo

Ruta: [Lab](https://logic2b.com/lab) › [Interfaces y composición](https://logic2b.com/sistemas/interfaces-composicion)

## 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

### Detalles

**Categoría**

Cristal líquido / Composición

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- Vídeo HTML5
- SVG

### Categorías

[Interfaces y composición](https://logic2b.com/sistemas/interfaces-composicion) Glassmorphism Vídeo Máscaras CSS Microinteracciones

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Sumario** Interfaces y composición](https://logic2b.com/lab/sumario) [**Pespunte** Comercio / Configuradores de producto](https://logic2b.com/lab/pespunte) [**Zaguán** Interfaces y composición](https://logic2b.com/lab/zaguan)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)