THE ASK
Continuity, not a campaign
Something living that fans return to — not a one-off asset drop. The tool had to run indefinitely with no maintenance and no content pipeline behind it.
++
CASE STUDY → CREATIVE ENGINEERING · GENERATIVE TOOL
A wallpaper generator where every download is promotion
An in-browser tool for the ULTRASWAN album — pick one of 15 shapes from the record's visual world, type a lyric, apply effects, and export a print-sharp PNG for phone or desktop. Zero dependencies, zero build step, no backend.
A generative tool at the intersection of art direction and engineering — where the whole product lives in the browser canvas, and every wallpaper a fan downloads and shares carries the album's identity.
01 — THE BRIEF
Keep the album alive after launch — without depending on anyone
The artist's team wanted something that kept ULTRASWAN present beyond release day. Seven proposals were on the table. This one was chosen on a single ratio: impact over effort.
It doesn't depend on third parties delivering material. It reuses the album's existing visual system. And every wallpaper a fan makes, downloads and shares is organic reach carrying the record's identity — distribution the artist doesn't have to pay for or produce.
THE BET
Fans as distribution
Every exported wallpaper is a home screen carrying ULTRASWAN's art direction. The reach compounds on its own, for free, in the album's exact visual language.
THE REFERENCE
brik.space, with fewer knobs
The canvas-with-side-panel pattern was the starting point — but the number of controls was deliberately cut, so the result looks good without the user needing to understand what any parameter does.
02 — ARCHITECTURE
Built as a standalone tool, not a page inside the CMS
There's no database, no users, no dynamic content: all the value lives in the browser canvas. Three decisions set the foundation — and each one was a decision to leave something out.
OUTSIDE WORDPRESS
No CMS boot on every load
Putting it in WordPress would have added the CMS boot cycle to every visit with nothing to gain. As a standalone app it deploys and iterates without touching the site, survives any theme change, and links from the menu like any other URL.
NO LIBRARIES
p5.js evaluated, then dropped
p5.js is the usual pick for this. But the native Canvas 2D API with Path2D already covered everything needed — loading a ~1 MB library just to draw paths and export a PNG wasn't justified. Result: zero dependencies, zero build step, zero third-party requests.
VECTOR, NOT IMAGES
Sharp at any resolution
The shapes are reused from the album's SVG morph system — already vector paths. Drawn as vectors instead of PNGs, the same code exports crisp at any size: 1170×2532 for iPhone or 2560×1440 for desktop, no pixelation.
03 — UNDER THE HOOD
Four decisions that make the download match the preview
Export renders at full resolution in a second, independent pass. Making that pass produce exactly what the user saw on screen — fast preview and all — is where the real engineering is.
DETERMINISM
Seeded randomness, not Math.random()
Random effects (grain, glitch) use a fixed-seed pseudo-random generator (mulberry32). Without it, the downloaded file wouldn't match the screen, because export is a separate full-resolution pass.
BLUR COMPOSITION
One blur, off-screen
The trail can be up to 25 copies of the shape. Blurring each one live is unviable, so all copies are drawn to an off-screen canvas and blurred once on compositing — which also keeps the main figure sharp while only the trail softens.
GOLDEN RATIO
A trail spaced by φ
Copies aren't spaced linearly but on a progression based on φ (1.618): they're born tight to the figure and the gaps open toward the tail. That's what makes it feel organic instead of a uniform staircase.
EXPORT PIPELINE
Preview fast, export true
Preview renders at reduced resolution so dragging a slider stays fluid; Download re-renders to a hidden full-size canvas and saves via toBlob. Every measurement is relative to the canvas, so the result is proportionally identical.
04 — EFFECTS & CONTROLS
Six parameters, tuned so any combination looks intentional
Trail intensity, golden dispersion, real-degree rotation (0–360°), blur, distortion (glitch-style horizontal slice offset) and film grain — plus two stroke modes and two palettes. Few enough that a fan can't make it look bad.
The restraint is the feature: cut the controls until the result is good without the user understanding what each one does.
MOTION
Trail, dispersion, rotation
The three parameters that shape the figure's presence — density of the echo, how it spreads along φ, and orientation in real degrees.
TEXTURE
Blur, distortion, grain
Blur softens the trail; distortion cuts horizontal glitch slices; film grain is generated per-pixel with the seeded RNG so it survives export unchanged.
STYLE
Two strokes, two palettes
Solid silhouette or outline, on white-over-black or its inverse. Four combinations that all stay on brand because the album's world is monochrome to begin with.
05 — MOBILE
The real problem was the fold, not the layout
On mobile the controls sat below the fold: the user dragged a slider and never saw the effect. A generative tool where you can't see what you're generating isn't a tool.
PREVIEW
Pinned to the top
The canvas stays fixed at the top of the viewport so the result is always in sight while the fingers work the controls below it.
CONTROLS
Collapsed into an accordion
Sections fold away with only the image picker open on load, so the panel never pushes the preview off screen.
TOUCH
30px hit areas
Touch zones were raised to 30px tall because at finger size two adjacent sliders were firing at once. A small number that decided whether the tool felt broken or precise.
06 — RESULTS
Small footprint, live in production
Hand-written lines
960
69 HTML, 433 CSS, 455 JS — plus a data file with the vector paths of all 15 shapes.
Dependencies
0
No framework, no bundler, no backend. The only http in the source is the SVG namespace.
Code weight
44 KB
The code is 44 KB; the vector data, 328 KB. It loads instantly and runs entirely client-side.
Why it matters
The tool needs no upkeep and no content pipeline — it will keep working long after launch, through any redesign of the main site, because it's decoupled from it.
Every wallpaper a fan exports is a home screen or lock screen carrying ULTRASWAN's visual identity. The album's promotion compounds through its own audience, at zero marginal cost, in the exact art direction of the record.
The most verifiable result
Seven proposals
One shipped, live
It's public and running at abhir.es/wallpaper — the best demo of the tool is the tool itself.
Open the live tool07 — REFLECTION
The hard part wasn't adding features. It was leaving them out.
Every technical decision here was a subtraction: no CMS, no library, no build step, and — the one that mattered most for the result — fewer controls. The reference tool had more knobs; this one has fewer on purpose.
A fan opening it for the first time isn't a designer. If the surface area is small enough, they can't produce an ugly result — and every output stays on brand. That's taste encoded as constraints, not as options.
Reach doesn't come from a bigger tool. It comes from a tool simple enough that a fan finishes it and shares it.
What I'd do next
The data-driven UI already makes new controls a one-line change — so the next iteration can add shapes and effects for later singles without touching the architecture. The tool was built to keep giving the release a second life, again and again.