Retablo · Lab · Composición bento / Portfolio

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