---
title: "Tríptico — escaparate de app móvil en tres pantallas | Logic2b Lab"
description: "Demo técnica: tres pantallas de móvil sin marco en escalera — hero con cuenta atrás real, galería arrastrable con fotos procedurales y formulario interactivo. HTML, CSS y SVG sin dependencias. Míralo en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/triptico/
  md: https://logic2b.com/lab/triptico/index.md
---

# Tríptico Lab · Presentación interactiva / Mobile

lab.logic2b.com/triptico

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

## Cómo se construyó Tríptico

Escaparate de diseño mobile-first: tres pantallas de 375×812 colocadas en escalera sobre un lienzo gris, sin marcos de teléfono — solo el contenido. La izquierda es el hero de la web personal de un futbolista, con su dorsal dibujado en SVG, una cita en tipografía display y una tarjeta de próximo partido con cuenta atrás real segundo a segundo. La central es una galería oscura que se arrastra con el ratón como en un móvil, con seis «fotos» duotono generadas proceduralmente a partir de una semilla. La derecha es el formulario de colaboración sobre rojo de marca: checkbox propio que sacude la fila si intentas enviar sin aceptar, y estado de «enviado» simulado. Cada pantalla tiene su menú hamburguesa a pantalla completa con la hamburguesa animándose a X. Las entradas escalonadas (fade-up, fade-in) se pueden repetir con la píldora inferior. Sin React, sin Tailwind y sin una sola imagen externa: HTML, CSS y SVG.

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

- Composición del spec respetada: tres pantallas de 375×812 sin marco sobre fondo #BBB8B9, la central 75px más alta y las laterales 45px más bajas, con 40px de separación
- Tipografía display Hammersmith One + Inter, con el rojo #E30A17 como único acento de marca
- Camiseta con nombre y dorsal dibujada en SVG con fundido inferior por CSS mask — la foto hotlinkeada del spec, reconstruida sin cargar ninguna imagen
- Tarjeta de «próximo partido» con escudos vectoriales y cuenta atrás real hasta las 19:00, corriendo segundo a segundo
- Galería horizontal arrastrable con el ratón (Pointer Events + scroll nativo en táctil) y scrollbar oculta
- Seis «fotos» duotono generadas proceduralmente en SVG con un RNG seedeado (mulberry32): misma semilla, misma foto
- Menú hamburguesa por pantalla: barras que se convierten en X y overlay a pantalla completa con enlaces display e iconos sociales trazados a mano
- Formulario con checkbox propio: si envías sin aceptar los términos, la fila se sacude; al aceptar, el botón pasa a «Mensaje enviado ✓»
- Entradas escalonadas fade-up/fade-in con la curva cubic-bezier(.22,1,.36,1) del spec, repetibles con la píldora «Repetir animación», y respeto de prefers-reduced-motion
- Cero dependencias: el spec pedía React, Vite, Tailwind, react-router, Lucide y Supabase — aquí es un único HTML con CSS y JS a mano

### Detalles

**Categoría**

Presentación interactiva / Mobile

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG

### Categorías

[Interfaces y composición](https://logic2b.com/sistemas/interfaces-composicion) [Generadores y presentación](https://logic2b.com/sistemas/generadores-presentaciones) Mobile Showcase SVG Microinteracciones

### Lo ofrecemos con webs de

[Coaches y entrenadores](https://logic2b.com/diseno-web/coaches)

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Sumario** Interfaces y composición](https://logic2b.com/lab/sumario) [**Boceto** Generadores y presentaciones](https://logic2b.com/lab/boceto) [**Carrete** Generadores y presentaciones](https://logic2b.com/lab/carrete)

---

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)