Lienzo
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 os interesa algo parecido para vuestro producto, hablamos.

Qué demuestra

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