Continuity, not a campaign
Runs indefinitely, with no maintenance or content pipeline.
Case 04 / 06Creative engineeringGenerativeCanvas 2D
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, export a print-sharp PNG. Zero dependencies, zero build step, no backend.
ULTRASWAN Live · the production algorithm, ported Six parameters, tuned so any combination looks intentional
Try it. You can’t make it ugly.
Distortion and film grain are left out of this port. The real tool: abhir.es/wallpaper
- Period
- 2026live
- Client
- ULTRASWAN — Abhirdebut album
- Role
- Design engineer, soloconcept, interface, motion and code
- Stack
- Vanilla JS (ES5+) · Canvas 2D · Path2D · SVG shapes · no bundler
01 — The brief
Keep the album alive after launch — without depending on anyone.
Seven proposals were on the table. This one won on impact over effort: it needs no third-party material, reuses the album’s visual system, and every shared wallpaper is free reach.
The ask
The bet
Fans as distribution
Every wallpaper a fan shares carries the album’s identity.
The reference
brik.space, with fewer knobs
Canvas plus a side panel — deliberately fewer controls.
02 — Architecture
Built as a standalone tool, not a page inside the CMS.
Outside WordPress
No CMS boot on every load. It survives any theme change.
No libraries
p5.js was evaluated and dropped: a ~1 MB library just to draw paths wasn’t justified.
Vector, not images
Shapes reused from the album’s SVG morph system. Exports at 1170 × 2532 (iPhone) or 2560 × 1440 (desktop).
03 — Under the hood
Four decisions that make the download match the preview.
- 01DeterminismSeeded randomness with mulberry32 instead of Math.random(), so the download matches the preview.
- 02Blur compositionThe trail can be up to 25 copies, drawn off-screen and blurred once.
- 03Golden ratioCopies spaced on a φ (1.618) progression.
- 04Export pipelineA reduced-resolution preview; then a full-size hidden canvas saved via toBlob.
04 — Effects & controls
Cut the controls until the result is good without the user understanding what each one does.
Motion
Trail · dispersion · rotation 0–360°
Texture
Blur · distortion · film grain
Glitch-style horizontal slices; per-pixel grain from the seeded RNG.
Style
Solid or outline · two palettes
White on black or the inverse — four combinations.
“The restraint is the feature.”
05 — Mobile
The real problem was the fold, not the layout.
Preview pinned to the top
Controls in an accordion
Only the image picker is open on load.
30px hit areas
Adjacent sliders were firing together.
06 — Results
Small footprint, live in production.
Dependencies0The only http in the source is the SVG namespace.
957Hand-written lines — 69 HTML, 433 CSS, 455 JS, plus the shapes data file.
44 KBOf code, plus 328 KB of vector data.
15Shapes from the record’s visual world.
7 proposals → 1 shipped, livePromotion at zero marginal cost, with no upkeep.
07 — Reflection
The hard part wasn’t adding features. It was leaving them out.
That’s taste encoded as constraints, not as options. The data-driven UI makes a new control a one-line change, so later singles can add shapes and effects.
“Reach doesn’t come from a bigger tool. It comes from a tool simple enough that a fan finishes it and shares it.”
