Vitrina Lab · Presentación interactiva
Cómo se construyó Vitrina
Demo de visor de presentación sobre tablero infinito: diez pantallas de una campaña ficticia en formatos de red social (portada 16:9, posts 1:1 y 4:5, story y reel 9:16) flotan sobre un lienzo gris sin marcos ni paneles de edición, como un software que fuera solo tablero. Se navega arrastrando y con zoom hacia el cursor; el modo presentación recorre las diapositivas con la transición elegida — viaje de cámara por el tablero, slider horizontal, slider vertical o fundido. Cada pantalla tiene un hueco de medio sustituible: haz clic o arrastra encima una imagen o un vídeo tuyos y la campaña se re-viste al instante, sin subir nada a ningún servidor. El fondo del tablero también admite tu propia imagen, con un parallax sutil. Todo en un único HTML sin librerías.
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
- Tablero infinito sin chrome de edición: solo el visor, con pan (arrastrar / rueda) y zoom hacia el cursor (Ctrl+rueda, pellizco táctil, botones ±)
- Diez pantallas de una campaña ficticia («Boreal») en formatos reales de red social: portada 16:9, posts 1:1 y 4:5, story y reel 9:16
- Modo presentación con cuatro transiciones a elegir: viaje de cámara por el tablero, slider horizontal, slider vertical y fundido
- Sustitución del medio de cada diapositiva con tus propias imágenes o vídeos: botón en el panel contextual o arrastrar y soltar encima
- Los vídeos se reproducen en bucle y silenciados dentro de la diapositiva, también durante la presentación
- Todo local: los archivos se cargan con objectURL en el navegador, nada se sube a ningún servidor
- Fondo del tablero personalizable con una imagen propia, con parallax sutil al hacer pan
- Arte procedural SVG seedeado (mulberry32): barras degradadas, ecualizador ajedrezado y escalera de crecimiento, nítidos a cualquier zoom
- Autoplay, contador y avance por clic (mitad derecha avanza, izquierda retrocede) en las transiciones de slider
- Atajos de teclado: +/− zoom, 0 encuadra todo, P presenta, flechas navegan, Esc sale
- Sin librerías ni backend: un único HTML con vanilla JS y SVG generado