Zaguán · Lab · Interfaces y composición

Cómo se construyó Zaguán

Demo de interfaz para un portal inmobiliario: el vídeo del plano 3D de la vivienda ocupa toda la pantalla y la ficha se resuelve en paneles de cristal que flotan encima, sin tapar nunca el centro. Las pestañas de instalación (agua, luz, electricidad, gas, clima) cambian los datos de consumo y seguridad; la calculadora de hipoteca recalcula entrada y cuota mensual mientras se arrastra el control; el raíl derecho apila el inmueble, el simulador y los similares. Lo interesante está debajo: no hay escena escalada con bandas negras, sino un lienzo de diseño de 1448×1086 repartido en zonas ancladas a los bordes que se escalan con `zoom` para que el vídeo llene siempre la pantalla, con los filetes cuadrados al píxel de dispositivo desde JavaScript. En móvil la misma interfaz se reordena en una rejilla de 100dvh que no hace scroll, con las tres tarjetas en un carrusel imantado.

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

• Vídeo del plano 3D de la vivienda a sangre, siempre el sujeto: la interfaz no tapa el centro de la pantalla
• El plano 3D está generado con IA (Higgsfield / Seedance 2.5) y cuadra con la ficha: dos dormitorios, dos baños y terraza corrida
• Escalado por zonas ancladas a los bordes (no una escena con bandas negras): el lienzo de diseño 1448×1086 se reparte y se escala con `zoom`
• Filetes de un píxel cuadrados al píxel de dispositivo desde JS tras medir, para que no se emborronen al escalar
• Pestañas de instalación (agua, luz, electricidad, gas, clima) que cambian los datos de consumo y seguridad
• Calculadora de hipoteca en vivo: entrada arrastrable y cuota recalculada con la fórmula francesa a 15 años
• Control deslizante accesible: arrastre, clic en la barra, flechas del teclado y `role="slider"` con valores anunciados
• Paneles de cristal con `backdrop-filter` parametrizado (desenfoque, saturación, filete interior y sombra) en variables CSS
• Plano en miniatura dibujado en SVG inline con las esquinas en corchete, sin imágenes
• Rejilla móvil de 100dvh sin scroll: la fila central se deja vacía a propósito para que se vea el vídeo
• Carrusel de tarjetas imantado en móvil con las métricas verticales recompuestas para caber sin cambiar el ancho
• Empujón de reproducción del vídeo si Safari o el ahorro de energía lo dejan parado
• Sin librerías, sin build: un único HTML con su CSS y su JavaScript