Damero · Lab · Composición / Cristal líquido

Cómo se construyó Damero

La composición en damero —texto a un lado, imagen al otro, y a la vuelta al revés— resuelta sobre negro con cristal líquido: una insignia, un titular en serif itálica y dos filas que alternan el sentido. Lo que en el spec original eran dos GIF de 10,6 MB alojados fuera aquí son dos miniaturas de web construidas a mano: un panel de crecimiento con barras seedeadas, línea de tendencia trazada por stroke-dashoffset y contadores que arrancan al entrar en pantalla, y una portada de agencia con manchas de color a la deriva y tarjetas de cristal flotando desfasadas. Todo se mide en unidades de contenedor, así que las miniaturas se leen igual a cualquier ancho, y una barra fija permite cambiar el ritmo, congelar la escena o invertir el damero entero.

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

• Damero del spec al pie de la letra: fila 1 texto-imagen, fila 2 imagen-texto en ≥1024 px, apiladas por debajo con el texto siempre arriba
• Conmutador «Invertir damero»: cambia el sentido de las dos filas a la vez para comparar las dos lecturas
• Los dos GIF externos (10,6 MB, creatividades de terceros) sustituidos por miniaturas de web hechas a mano: cero peso descargado y cero dependencia de un host ajeno
• Miniatura 1: nueve barras con alturas generadas por RNG seedeado (mulberry32), tendencia al alza, latido desfasado y línea trazada con stroke-dasharray/dashoffset
• Contadores de KPI que suben con easing cúbico cuando el panel entra en pantalla, formateados en español
• Miniatura 2: tres manchas de color radiales a la deriva bajo blur y tres tarjetas de cristal flotando con desfases negativos
• Todo el interior de las miniaturas medido en cqw sobre container-type: inline-size, así que se leen igual a cualquier ancho de columna
• Bloques .liquid-glass y .liquid-glass-strong copiados literales del spec, incluidos los dos niveles de desenfoque (4 px y 50 px)
• Mando de ritmo (0,4×–3×) que reescala todas las duraciones a la vez con una sola variable CSS, y pausa global por animation-play-state
• Entrada por scroll con IntersectionObserver y retardo escalonado entre texto y marco, repetible desde la barra
• ArrowUpRight de lucide-react redibujado a mano; Instrument Serif y Barlow del spec conservadas
• Cero dependencias: el spec pedía React, Vite, Tailwind y lucide-react