Selling a sound
with no sound file.

The imagined client: an independent Ghanaian highlife and afro-jazz label operating continuously since 1975 — old enough to carry genuine 1970s sleeve-design DNA, still active enough to justify a working demo-submission pipeline today. Within the 26-site collection, this is the slot explicitly reserved for "music and sound plus generative cover art" — the brief asked for six releases, each cover a seeded generative artwork, and a turntable that plays a short Web-Audio-synthesized highlife loop when a visitor opts in.

The deliverable is the label's public site: a crate of six releases, a working turntable, the artist roster, the label's fifty-year story, and a demo submission form for new acts — everything a real working label's homepage would need, built without a single audio file, photograph, or downloaded image anywhere in the repository.

Music labels sell mood before they sell songs — sleeve art and the promise of "press play" are most of the job. Strip away photography, stock sleeve mockups and actual recordings, and three real problems remain:

• Six covers that feel pressed, not generated. Generative art has a well-earned reputation for looking like generative art — cool, but sterile. The covers needed to look like something a real 1970s Accra pressing plant would have printed: warm, slightly grainy, worn at the edges.
• Sound that is genuinely opt-in, not merely muted-by-default. The collection's accessibility rule forbids autoplay; browsers forbid it too without a user gesture. The design had to make "press play" feel like part of the ritual of putting on a record, not a workaround for a technical restriction.
• A reason the visuals and the audio belong to the same idea. Building a generative cover system and a synth engine as two unrelated features would have technically satisfied the brief while missing its point — the brief's own phrase is "riff on highlife rhythm patterns," which asks the visuals to be musically literate, not merely colorful.

Rejected: fully abstract generative art, no rhythm logic

An early sketch generated covers from pure noise fields and Perlin-style flow — visually pleasant, completely disconnected from "highlife rhythm patterns" in the brief. It would have been the easiest system to build and the least honest to the brand. Killed once it was clear the ring of dots needed to be an actual timeline pattern, not a decorative circle of random dots.

Rejected: pre-rendered cover "photos" via CSS gradients

A tempting shortcut: hand-design six static gradient compositions that merely look generative. This would have been faster and arguably prettier per-cover, but it breaks the collection's code-drawn thesis in spirit (nothing would actually be seeded or reproducible) and forecloses the guide page's entire "try it yourself" section. Rejected in favor of a genuinely deterministic, seed-driven canvas algorithm.

Rejected: a sample-based loop player

The most "realistic"-sounding option was to record or source six short highlife loops and play them back as audio files. This was rejected outright — it would violate the environment's zero-external-assets constraint, raise real licensing questions even for a fictional brand, and remove the most interesting engineering problem the brief offered: synthesizing an original, highlife-flavored loop live, in the browser, from oscillators alone.

Rejected: a full DAW-style mixer UI

A per-voice mixer (separate volume for bell/bass/guitar/shaker) was prototyped and cut. It made the turntable feel like a synthesizer demo rather than a record player, worked against the "press play, hear a record" ritual the brief wants, and added four more controls to keep accessible for a marginal gain. One volume slider and one stop button survived; both do exactly what a real turntable's controls would do.

Chosen: one seed, two senses

Every release's catalog number seeds both the Sleeve Engine (canvas cover art) and the audio engine (the synthesized loop) — and critically, the same seeded bell-pattern array is read by both, so the ring of dots on the sleeve and the bell hits in the loop are the same 12 numbers rendered two ways. That single shared data structure is what makes "generative covers" and "Web Audio turntable" one signature idea instead of two features sharing a page.

Four colors, procedurally recombined

Burnt orange, cream, deep brown and mustard are never assigned by hand per release — paletteFamily() rotates their order per seed instead. The trade-off is less individual-cover art direction (a human couldn't hand-tune sleeve #4's palette specifically) in exchange for a guarantee that all six sleeves, and any future release, visibly belong to the same imprint.

Dark panels for the working parts, cream for the reading parts

Hero, turntable and the label-story section sit on deep brown; the crate, roster and demo sections sit on cream. This was a contrast decision as much as a mood one — mustard and cream on deep brown clear AA comfortably, while burnt orange never has to carry small body text (its contrast against cream is closer to 3:1, fine for large display type and icons, not for prose) — so the palette is used at the register each color can actually support.

A crate you flip, not a carousel that auto-advances

The six sleeves sit in a horizontally scrollable, snap-aligned track with drag, wheel and keyboard support, rather than an auto-rotating carousel. Record shopping is an active, hands-on gesture — the interaction should feel like flipping through a physical crate, and nothing on the page should move without the visitor doing something first, which also keeps the page still and calm before any interaction happens.

Sound stays fully separate from motion

Under reduced motion, the disc and platter stop spinning and the tonearm snaps instead of easing — but audio playback is untouched, because the brief and the shared foundation treat sound and motion as two independent opt-ins. A visitor with vestibular sensitivity who still wants to hear the release can; nothing forces sound and motion to be coupled.

Framed as design goals, since a fictional label has no real metrics to report:

• Prove generative systems can carry real cultural specificity. The bell-pattern ring isn't decoration borrowed from "generative art" as a genre — it's the actual rhythmic logic a highlife rhythm section plays, rendered honestly in two media from one seed.
• Demonstrate audio engineering as a design discipline. A tasteful, well-scheduled Web Audio loop with a real stop control and a real volume control is a harder, more complete deliverable than a louder demo with no restraint — the goal was a loop you'd actually want to let finish.
• Show restraint under a rich brief. Six sections, one algorithm, one audio engine, zero libraries — proving the "signature interaction" bar can be hit without stacking unrelated gimmicks on top of each other.

The full mechanics — the PRNG, the bell-pattern math, the audio scheduler, and the iteration log — are documented generously in the build guide. Or go back and put a record on.