---
title: "Damero — sección de capacidades en zigzag | Logic2b Lab"
description: "Demo técnica: sección de features en damero sobre negro con cristal líquido y dos miniaturas de web animadas en CSS, con mandos de ritmo, pausa e inversión. HTML, CSS y JS sin dependencias."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/damero/
  md: https://logic2b.com/lab/damero/index.md
---

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

lab.logic2b.com/damero

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

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

### Detalles

**Categoría**

Composición / Cristal líquido

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG

### Categorías

[Interfaces y composición](https://logic2b.com/sistemas/interfaces-composicion) Glassmorphism Container queries Animación CSS Scroll

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