Continuidad, no una campaña
Algo vivo a lo que los fans vuelven — no un drop puntual de assets. Tenía que funcionar indefinidamente sin mantenimiento y sin un pipeline de contenido detrás.
Caso 04 / 05Creative engineeringGenerativaCanvas 2D
Un generador de wallpapers donde cada descarga es promoción
Una herramienta en el navegador para el disco ULTRASWAN — eliges una de las 15 formas del imaginario del disco, escribes una frase, aplicas efectos y descargas un PNG nítido para móvil o escritorio. Cero dependencias, cero build, sin backend.
ULTRASWAN En vivo · el algoritmo de producción, portado Seis parámetros, afinados para que cualquier combinación parezca intencionada
Pruébalo. No puedes dejarlo feo.
La distorsión y el grano de película quedan fuera de este port. La herramienta real: abhir.es/wallpaper
- Periodo
- 2026En vivo
- Cliente
- ULTRASWAN — AbhirÁlbum debut
- Rol
- Design Engineer — soloConcepto, interfaz, motion y código
- Stack
- Vanilla JS (ES5+) · Canvas 2D · Path2D · Formas vectoriales SVG · Sin bundler
01 — El encargo
Dar continuidad al disco tras el lanzamiento — sin depender de nadie
El equipo del artista quería algo que mantuviera ULTRASWAN presente más allá del día del lanzamiento. Había siete propuestas sobre la mesa. Esta se eligió por una sola relación: impacto sobre esfuerzo.
No depende de que terceros entreguen material. Reutiliza el sistema visual que el disco ya tenía. Y cada fondo que un fan crea, descarga y comparte es difusión orgánica con la identidad del disco — distribución que el artista no tiene que pagar ni producir.
La petición
La apuesta
Los fans como distribución
Cada wallpaper exportado es una pantalla de inicio con la dirección de arte de ULTRASWAN. El alcance se compone solo, gratis, en el lenguaje visual exacto del disco.
La referencia
brik.space, con menos mandos
El patrón de lienzo con panel lateral fue el punto de partida — pero se redujo deliberadamente el número de controles, para que el resultado quede bien sin que el usuario tenga que entender qué hace cada parámetro.
02 — Arquitectura
Montado como herramienta aparte, no como página dentro del CMS
Fuera de WordPress
Meterlo en WordPress habría añadido el ciclo de arranque del CMS a cada carga sin aportar nada. Al ir aparte se despliega e itera sin tocar la web, sobrevive a cualquier cambio de tema y se enlaza desde el menú como una URL más.
Sin librerías
p5.js es la elección habitual para esto. Pero la API nativa de Canvas 2D con Path2D ya cubría todo lo necesario — cargar una librería de ~1 MB solo para dibujar paths y exportar un PNG no se justificaba.
Vectorial, no imágenes
Las formas se reutilizan del sistema de morphs SVG del disco — ya eran paths vectoriales. El mismo código exporta nítido a cualquier tamaño: 1170×2532 para iPhone o 2560×1440 para escritorio, sin pixelar.
03 — Por dentro
Cuatro decisiones para que la descarga coincida con la vista previa
- 01DeterminismoAleatoriedad con semilla fija (mulberry32) en vez de Math.random(), así el archivo descargado coincide con la pantalla, porque la exportación es una pasada aparte a resolución completa.
- 02Composición del blurLa estela puede tener hasta 25 copias de la forma, dibujadas en un canvas fuera de pantalla y desenfocadas una sola vez al componer.
- 03Número áureoLas copias se separan en una progresión basada en φ (1.618): nacen pegadas a la figura y los huecos se abren hacia la cola.
- 04ExportaciónUna vista previa a resolución reducida; al pulsar Descargar se renderiza en un canvas oculto a tamaño real y se guarda vía toBlob.
04 — Efectos y controles
Recortar los controles hasta que el resultado quede bien sin que el usuario entienda qué hace cada uno
Movimiento
Estela · dispersión · rotación 0–360°
Textura
Difuminado · distorsión · grano
La distorsión corta cortes glitch horizontales; el grano de película se genera píxel a píxel con el RNG con semilla.
Estilo
Sólido o contorno · dos paletas
Blanco sobre negro o su inverso — cuatro combinaciones que siempre quedan on-brand porque el imaginario del disco ya es monocromo.
“La contención es la funcionalidad.”
05 — Móvil
El problema real era el pliegue, no el layout
Vista previa fijada arriba
Controles plegados en acordeón
Con solo el selector de imagen abierto al cargar, así el panel nunca empuja la vista previa fuera de pantalla.
Zonas táctiles de 30px
Se ampliaron a 30px de alto porque con el dedo se activaban dos sliders a la vez.
06 — Resultados
Huella mínima, en producción
Dependencias0El único http del código fuente es el namespace de SVG.
957Líneas escritas a mano — 69 HTML, 433 CSS, 455 JS, más el archivo de datos de las formas.
44 KBDe código, más 328 KB de datos vectoriales.
15Formas del imaginario del disco.
Siete propuestas → una en producciónPromoción a coste marginal cero, sin mantenimiento.
07 — Reflexión
Lo difícil no era añadir funciones. Era dejarlas fuera.
Eso es gusto codificado como restricciones, no como opciones. La UI desde datos ya hace que un control nuevo sea un cambio de una línea — así que la próxima iteración puede añadir formas y efectos para futuros singles sin tocar la arquitectura.
“El alcance no viene de una herramienta más grande. Viene de una herramienta lo bastante simple como para que un fan la termine y la comparta.”
