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

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