LA PETICIÓN
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 DE ESTUDIO → CREATIVE ENGINEERING · HERRAMIENTA GENERATIVA
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.
Una herramienta generativa en la intersección entre dirección de arte e ingeniería — donde todo el producto vive en el canvas del navegador, y cada fondo que un fan descarga y comparte lleva la identidad del disco.
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 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
No hay base de datos, ni usuarios, ni contenido dinámico: todo el valor vive en el canvas del navegador. Tres decisiones sentaron la base — y cada una fue una decisión de dejar algo fuera.
FUERA DE WORDPRESS
Sin arranque del CMS en cada carga
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 evaluado, luego descartado
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. Resultado: cero dependencias, cero build, cero peticiones a terceros.
VECTORIAL, NO IMÁGENES
Nítido a cualquier resolución
Las formas se reutilizan del sistema de morphs SVG del disco — ya eran paths vectoriales. Dibujadas como vectores en vez de PNG, 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
La exportación se renderiza a resolución completa en una segunda pasada, independiente. Que esa pasada produzca exactamente lo que el usuario vio en pantalla — con la preview rápida incluida — es donde está la ingeniería de verdad.
DETERMINISMO
Aleatoriedad con semilla, no Math.random()
Los efectos con azar (grano, glitch) usan un generador pseudoaleatorio con semilla fija (mulberry32). Sin esto, el archivo descargado no coincidiría con la pantalla, porque la exportación es una pasada aparte a resolución completa.
COMPOSICIÓN DEL BLUR
Un solo desenfoque, fuera de pantalla
La estela puede tener hasta 25 copias de la forma. Difuminar cada una en tiempo real es inviable, así que se dibujan todas en un canvas fuera de pantalla y el desenfoque se aplica una sola vez al componer — lo que además mantiene nítida la figura principal y solo difumina la estela.
NÚMERO ÁUREO
Una estela separada por φ
Las copias no se separan de forma lineal sino en una progresión basada en φ (1.618): nacen pegadas a la figura y los huecos se abren hacia la cola. Es lo que le da la sensación orgánica frente al efecto de escalera uniforme.
EXPORTACIÓN
Preview fluida, export fiel
La vista previa renderiza a resolución reducida para que arrastrar un slider vaya fluido; al pulsar Descargar se renderiza en un canvas oculto a tamaño real y se guarda vía toBlob. Todas las medidas son relativas al lienzo, así que el resultado es idéntico en proporción.
04 — EFECTOS Y CONTROLES
Seis parámetros, afinados para que cualquier combinación parezca intencionada
Intensidad de estela, dispersión áurea, rotación en grados reales (0–360°), difuminado, distorsión (desplazamiento de cortes horizontales estilo glitch) y grano de película — más dos modos de trazo y dos paletas. Los justos para que un fan no pueda dejarlo feo.
La contención es la funcionalidad: recortar los controles hasta que el resultado quede bien sin que el usuario entienda qué hace cada uno.
MOVIMIENTO
Estela, dispersión, rotación
Los tres parámetros que dan presencia a la figura — densidad del eco, cómo se reparte según φ, y orientación en grados reales.
TEXTURA
Difuminado, distorsión, grano
El blur suaviza la estela; la distorsión corta cortes glitch horizontales; el grano de película se genera píxel a píxel con el RNG con semilla, así que sobrevive a la exportación sin cambiar.
ESTILO
Dos trazos, dos paletas
Silueta sólida o contorno, sobre blanco-sobre-negro o su inverso. Cuatro combinaciones que siempre quedan on-brand porque el imaginario del disco ya es monocromo.
05 — MÓVIL
El problema real era el pliegue, no el layout
En móvil los controles quedaban debajo del pliegue: el usuario arrastraba un slider y no veía el efecto. Una herramienta generativa en la que no ves lo que generas no es una herramienta.
VISTA PREVIA
Fijada arriba
El canvas queda fijo en la parte superior del viewport, así el resultado está siempre a la vista mientras los dedos trabajan los controles de debajo.
CONTROLES
Plegados en acordeón
Las secciones se pliegan con solo el selector de imagen abierto al cargar, así el panel nunca empuja la vista previa fuera de pantalla.
TÁCTIL
Zonas táctiles de 30px
Las zonas táctiles se ampliaron a 30px de alto porque con el dedo se activaban dos sliders a la vez. Un número pequeño que decidía si la herramienta se sentía rota o precisa.
06 — RESULTADOS
Huella mínima, en producción
Líneas escritas a mano
960
69 HTML, 433 CSS, 455 JS — más un archivo de datos con los paths vectoriales de las 15 formas.
Dependencias
0
Sin framework, sin bundler, sin backend. El único http del código fuente es el namespace de SVG.
Peso del código
44 KB
El código pesa 44 KB; los datos vectoriales, 328 KB. Carga al instante y corre entero en el cliente.
Por qué importa
La herramienta no necesita mantenimiento ni pipeline de contenido — seguirá funcionando mucho después del lanzamiento, a través de cualquier rediseño de la web principal, porque está desacoplada de ella.
Cada wallpaper que un fan exporta es una pantalla de inicio o de bloqueo con la identidad visual de ULTRASWAN. La promoción del disco se compone a través de su propia audiencia, a coste marginal cero, en la dirección de arte exacta del disco.
El resultado más verificable
Siete propuestas
Una en producción
Está pública y funcionando en abhir.es/wallpaper — la mejor demo de la herramienta es la herramienta misma.
Abrir la herramienta07 — REFLEXIÓN
Lo difícil no era añadir funciones. Era dejarlas fuera.
Cada decisión técnica aquí fue una resta: sin CMS, sin librería, sin build, y — la que más importó para el resultado — menos controles. La herramienta de referencia tenía más mandos; esta tiene menos a propósito.
Un fan que la abre por primera vez no es un diseñador. Si la superficie es lo bastante pequeña, no puede producir un resultado feo — y cada salida queda on-brand. Eso es gusto codificado como restricciones, no como opciones.
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.
Qué haría después
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. La herramienta se construyó para seguir dándole al lanzamiento una segunda vida, una y otra vez.