---
title: "Retablo — rejilla bento con cristal líquido y marquesinas | Logic2b Lab"
description: "Demo técnica: sección de portfolio en rejilla bento a pantalla completa con cristal líquido, tres vídeos en bucle, contador animado, testimonios rotatorios y marquesinas arrastrables. HTML, CSS y JS sin dependencias."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/retablo/
  md: https://logic2b.com/lab/retablo/index.md
---

# Retablo Lab · Composición bento / Portfolio

lab.logic2b.com/retablo

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

## Cómo se construyó Retablo

Sección de presentación de un creativo independiente resuelta como un retablo: cinco tarjetas de distinto peso encajadas en tres columnas que llenan el viewport exacto. La de la izquierda cuenta la trayectoria sobre un vídeo en bucle; la central sube una cifra de cero a diez millones con easing y va rotando testimonios; la derecha reúne dos marquesinas de herramientas —iconos de cristal líquido que se paran al pasar el ratón y se pueden arrastrar como una rueda— y una tarjeta de contacto que copia el correo o el teléfono al portapapeles. Los filetes de cristal, el grano de las tarjetas sólidas y el desvanecido de los bordes son CSS puro: máscaras, feTurbulence en un SVG embebido y un solo bucle de rAF para las dos filas.

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

- Rejilla bento del spec respetada: 3 columnas en escritorio, 2 en tableta y 1 en móvil, con las tarjetas de la derecha partidas en dos filas
- Composición de un viewport exacto en ≥1024px (lg:h-screen del spec); por debajo crece y scrollea
- Cristal líquido reproducido tal cual: filete degradado de 1,4px resuelto con mask-composite y desenfoque de fondo
- Grano de las tarjetas sólidas con feTurbulence en un SVG embebido como data URI, en mix-blend-mode: soft-light
- Tres vídeos del spec descargados de CloudFront y autoalojados en ida y vuelta para que el bucle cierre sin corte (600 KB los tres)
- Dos marquesinas de iconos movidas con requestAnimationFrame (22 s y 26 s por vuelta): se paran al pasar el ratón y se arrastran con Pointer Events
- Los 12 iconos de lucide-react del spec, redibujados a mano como SVG de trazo 1.5
- Contador que sube de 0 a 10 M€ con easing cúbico, repetible desde la píldora inferior
- Tres testimonios que rotan cada 6 s con navegación por puntos y transición de opacidad
- Correo y teléfono copiables al portapapeles con señal de confirmación
- Cero dependencias: el spec pedía React, TypeScript, Tailwind y lucide-react — aquí es un único HTML con CSS y JS a mano

### Detalles

**Categoría**

Composición bento / Portfolio

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG

### Categorías

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

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