---
title: "Vitrina — tablero de presentación con tus propios medios | Logic2b Lab"
description: "Demo técnica: un tablero infinito tipo Figma para presentar campañas de redes sociales — pan, zoom, transiciones de slider y sustitución de imágenes y vídeos en vivo, sin backend. Mira cómo lo construimos en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/vitrina/
  md: https://logic2b.com/lab/vitrina/index.md
---

# Vitrina Lab · Presentación interactiva

lab.logic2b.com/vitrina

Ruta: [Lab](https://logic2b.com/lab) › [Generadores y presentación](https://logic2b.com/sistemas/generadores-presentaciones)

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

### Detalles

**Categoría**

Presentación interactiva

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG generado
- Imagen y vídeo

### Categorías

[Generadores y presentación](https://logic2b.com/sistemas/generadores-presentaciones) Canvas Presentación Media Branding

### Lo ofrecemos con webs de

[Fotógrafos y creativos](https://logic2b.com/diseno-web/fotografos) [Turismo y agencias de viajes](https://logic2b.com/diseno-web/turismo) [Estudios y agencias](https://logic2b.com/diseno-web/estudios-creativos) [Eventos y congresos](https://logic2b.com/diseno-web/eventos)

## Labs relacionados

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

[**Boceto** Generadores y presentaciones](https://logic2b.com/lab/boceto) [**Carrete** Generadores y presentaciones](https://logic2b.com/lab/carrete) [**Lienzo** Canvas interactivo](https://logic2b.com/lab/lienzo)

---

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)