Lienzo · Lab · Canvas interactivo

Cómo se construyó Lienzo

Demo de canvas infinito al estilo Figma: ocho artboards con los bloques de un design system ficticio (portada, navegación, métricas, botones, formulario, tipografía, paleta y footer) flotan sobre una trama de puntos en movimiento — olas y anillos concéntricos generados con una semilla determinista. Se navega como en Figma: arrastrar para hacer pan, Ctrl+rueda o pellizco para zoom, panel de capas, selección con asas y frames que se pueden mover. El modo presentación oculta el chrome y encuadra cada artboard con un travelling de cámara suave, con avance manual o automático. 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

• Canvas infinito con pan (arrastrar / rueda) y zoom hacia el cursor (Ctrl+rueda, pellizco táctil, botones ±)
• Ocho artboards con mini-bloques de UI reales: portada, navegación, métricas, botones, formulario, tipografía, paleta y footer
• Fondo vivo: trama de puntos animada (olas que derivan y anillos concéntricos que giran) sincronizada con el pan/zoom del canvas
• Trama seedeada con mulberry32: regenerar con la misma semilla reproduce el mismo campo de puntos
• Chrome tipo Figma: toolbar con zoom, panel de capas, etiquetas de frame que no escalan y selección con asas
• Frames arrastrables por el lienzo, como en la herramienta real
• Modo presentación: el chrome se oculta y la cámara viaja de artboard en artboard (flechas, contador y autoplay)
• Ornamentos de puntos de los artboards generados como SVG vectorial: nítidos a cualquier zoom
• Atajos de teclado: espacio para pan, +/− zoom, 0 encuadra todo, P presenta, Esc sale
• Sin librerías ni backend: un único HTML con vanilla JS, <canvas> y SVG