At the centre of the site is a three-dimensional procession of record sleeves built in Three.js. The releases are not reduced to thumbnails in a shop grid. They occupy depth. They overlap, move, tilt, recede and come forward. The visitor navigates through them by swiping, scrolling, using arrow keys or clicking directly on a sleeve.

Selecting the central record causes the vinyl itself to slide out of its cover and begin rotating, while the Bandcamp player appears over the scene.

The interface does not merely tell you that these are records. It makes the record (square sleeve, black disc, physical handling) the organising principle of the software.

It is a catalogue made from the behaviour of its subject.

Not The Final Vinyl desktop view

Browsing as handling

Most label websites inherit the visual grammar of ecommerce: a logo, a grid of releases, cover art, a short description, a buy button.

Not The Final Vinyl rejects that. Its basic interaction is closer to rifling through records in a shop, moving along a shelf or watching sleeves pass through a mechanical display.

The site gives every release a spatial relationship to the others. There is a centred record, neighbouring records and records waiting beyond the edge of the visible field. Navigation is circular, so the catalogue wraps around rather than terminating like a conventional sequence of pages.

The release data is shuffled when it loads. The website does not always begin with the same record or imply that the catalogue has a single authoritative ordering. Each visit becomes a new dig through the crate.

That favours discovery over hierarchy. For a collective catalogue, it avoids unconsciously ranking one artist above another through a static homepage order.

The record as interface

The most memorable interaction is the vinyl sliding out of the sleeve.

The cover and record are separate Three.js meshes grouped together as one album object. The sleeve is a square plane textured with the release artwork. The record is a circular geometry using a transparent vinyl image. It begins hidden behind the cover and moves horizontally when the release is selected.

The record accelerates into rotation rather than abruptly starting. Its spin speed increases gradually to a maximum and decays when playback ends. Objects tilt and lift rather than merely changing size. Positions, rotations and vinyl movement are interpolated over time, producing a soft mechanical response rather than the hard switching of ordinary page elements.

The effect is not photorealism. It is object-belief. The user knows it is a browser illusion, but the application gives the illusion consistent rules: a record has a sleeve, it can be pulled out, it can spin, it occupies depth and it can be returned.

Bandcamp without surrendering the experience

When a record is selected, the site constructs a Bandcamp iframe dynamically. Only the required embed is inserted, and it is removed when the overlay closes. The player appears as the culmination of the physical metaphor: first the user approaches a sleeve, then the record comes out, then the music interface opens.

Commerce is delegated to Bandcamp. The site does not attempt to reproduce Bandcamp's account system, checkout, tax handling or file delivery. It adds an authored discovery layer on top of an established platform.

That is sensible independent-label engineering: build the part that creates identity, do not unnecessarily rebuild the infrastructure that already works.

Data pipeline

A Python scraper gathers and transforms the Bandcamp catalogue into a normalised JSON structure:

Bandcamp catalogue → Python scraping and extraction → Normalised releases.json → Local artwork and structured metadata → Three.js gallery → Embedded Bandcamp listening and purchasing

The JSON boundary provides resilience. The site does not need to scrape Bandcamp every time someone visits. Data is generated periodically, then served as a static asset. The public-facing application remains quick and simple.

Engineering architecture

The JavaScript is divided into distinct areas: scene management, album objects, vinyl control, navigation, event handling, UI display, animation utilities and data loading. The central AlbumGallery class acts as an orchestrator, creating components in a required order, beginning loading, constructing album objects, starting the animation loop and coordinating cleanup if initialization fails.

That modularity was not merely good taste. It was a survival strategy. Built during the early period of AI-assisted programming, when coding models could process only roughly a thousand lines at a time, the application had to be broken into pieces that could be reasoned about, edited and reintroduced without the model seeing the whole thing at once.

The human developer remained the only participant who held the whole application in mind. The model could contribute pieces, patterns, repairs and local solutions, but architectural continuity had to be maintained manually.

Multi-device interaction

The catalogue supports mouse hover, click, horizontal trackpad and mouse-wheel navigation, touch taps, touch swipes, arrow keys, Escape to close, and responsive resizing. Touch input tracks start position, duration and whether the finger moved. A short stationary touch is interpreted as a tap; a sufficiently large horizontal movement becomes navigation.

Safari-specific wheel normalization and increased touch cooldowns suggest the site was tested against real browser behaviour rather than only against a desktop Chrome happy path.

What the project demonstrates

As design: a catalogue can inherit the properties of the thing it catalogues.

As frontend engineering: asynchronous asset loading, WebGL rendering, stateful animation, raycast interaction and multi-input navigation.

As a data project: extraction, normalization and transformation of Bandcamp material into a local JSON model.

As a platform: discovery, playback, outbound commerce, mailing-list capture, analytics, social metadata and administrative tools.

As an historical object: the early period of AI-assisted programming, when the model could contribute meaningfully to a complex build but the developer had to act as its external memory and integration layer.

Records should be encountered as records. That is the site's argument, and it is expressed structurally, not just stated in copy.

Originally posted on Contra: https://contra.com/p/OcAM62MW-not-the-final-vinyl-record-label-as-instrument

I woke up at 1pm. This is not my usual relationship with sleep. I'm an insomniac. Have been for years. But I'd left something running on my laptop, and somewhere in the small hours it did what I'd hoped it might, and I was out.

The Shipping Forecast

If you grew up with Radio 4 in the house, you already know what this is. Four times a day, BBC Radio 4 broadcasts a list of weather conditions for 31 sea areas around the British Isles. It has been doing this, in roughly the same format, since 1867. The areas go clockwise from the top: Viking, North Utsire, South Utsire, Forties, Cromarty. Names that are partly geography and partly incantation. Each area gets wind direction and force, sea state, visibility, weather.

The midnight broadcast, at 00:48, is preceded by a piece of music called Sailing By: a light orchestral waltz by Ronald Binge, used as a tuning signal so ships at sea can find the frequency. It exists solely to fill the gap. It is absurd and perfect.

Most of the people listening are not on ships. They are in bed, half-asleep, in houses all over Britain, finding the rhythm of it comforting in the way that rituals are comforting: not because of what it says but because it says it the same way every time. Dogger. Fisher. German Bight. Moderate or good.

The idea

The forecast is already a kind of music. Fixed structure, specific vocabulary, read at the same pace by the same calm voices. What if you took that literally? Not illustrated by sound, not a visualiser or an ambient accompaniment, but actually converted into it. Each area's conditions become its sonic character. Wind force, sea state, visibility, weather type: all mapped directly to synthesis parameters in real time.

The whole coast, playing once every twenty minutes. Then looping. Updating when a new broadcast arrives.

How it works

A cron job runs every 30 minutes, checks an RSS feed that publishes recordings of each broadcast captured from the 198kHz longwave signal, and if there's a new one, downloads it. The audio goes to Groq's speech recognition API, which transcribes it. The transcript goes to a language model, which extracts the per-area conditions as structured data. That data is what the browser receives.

In the browser, everything is synthesised from scratch using the Web Audio API. No samples, no pre-recorded music. Each of the 31 areas generates its own sound from its conditions.

Wind direction maps to a pitch centre: north is low, south slightly higher, the full compass rose becomes a scale. Six sine wave oscillators, spaced at octave intervals, all gliding slowly upward over the area's duration, creating the sensation of perpetual ascent without ever arriving anywhere. This is called a Shepherd tone. It's the musical equivalent of an Escher staircase. It felt right for something that loops forever.

Wind force drives noise: nearly silent for calm seas, dominant for storm force. Sea state adds texture and a low rumble at 30Hz, mostly felt rather than heard. Visibility sets a filter that darkens the sound as conditions worsen. Fog is almost smothered. Good visibility is bright.

The actual BBC recording plays underneath everything: filtered to sound like a voice through walls, or from another room. It phases slowly in and out. It sounds like a memory.

What it sounds like

Reassuring. Calm areas are tonal and musical; rough areas sound like weather. The whole thing moves slowly around the coast, and by the time it's back to Viking you've probably stopped listening consciously.

It is, as I discovered, a functional sleep aid.

September

On 26 September 2026, BBC Radio 4 longwave shuts down permanently. The Shipping Forecast has been broadcast on longwave since 1925: a hundred years of the same ritual on the same frequency. After September, it will still exist, but not on longwave. Not the thing you could receive with a radio at sea, four hundred miles from shore.

There's a countdown in the corner of the page.

The installation will keep running after shutdown. The data pipeline uses archived recordings and an RSS feed, not the longwave signal directly. But it felt important to acknowledge that something is ending.

I built this partly as a sleep aid and partly as an act of remembering. The forecast at 00:48, the voice in the dark, the names of places that are mostly sea. I wanted to sit with it for a while before it changes.

You can leave it on all night. That's what it's for.

Originally posted on Contra: https://contra.com/p/XqocvBPm-shipping-forecast-generative-sleep-music

But it's not just a band site. It's an interactive laboratory of browser-based audio experiments, each one a playable instrument or toy built from scratch.

The experiments

LAB — A full modular arp rig running in the browser. Drums with kick/snare/hat patterns, a bass sequencer, a stylus theremin, an FX pedalboard (dirt, wah, chorus, phaser, echo, verb), a looper with glitch and crush controls, and a master transport with tempo, record, and save/recall slots. This is not a demo. It's a production tool.

Palmsynth — A hand-gesture synthesiser that uses the webcam to turn your hands into a musical instrument. Left hand controls volume and FX sweep; fist to start recording, open to play the loop. Right hand maps X to pitch across 3 octaves, Y to brightness. Pinch fingers for tremolo, rotate for overdrive, spread for chorus. Six modes: theremin, chord, lead, bass, arp, and pad. Scale and root selection built in.

HEXATRIX — A hex-grid sequencer with MIDI output and Launchpad support. Sequencing reimagined on a hexagonal grid.

CADENCE — Chords first, then play progressions step by step. A compositional tool that inverts the usual sequencer workflow.

Experimental Synth — A cuboid touch synth with multiple waveforms (sine, triangle, saw, square, piano), drum sounds, attack/decay/filter/reverb controls, and a two-octave chromatic keyboard. Designed for touch screens.

Sequencer Web Toy — A browser-based beat sequencer for creating patterns from scratch.

Interactive Visualizer — A music visualizer that responds to audio input in real time.

SPURT — Draw glowing, colourful ribbons in 3D space. Touch and drag to create. A visual toy with audio.

Spherical SoundCloud Player — A novel spatial interface for browsing and playing SoundCloud tracks, reimagining the playlist as a navigable 3D object.

Why this matters

Each experiment is a self-contained browser application using Web Audio API, WebGL, WebRTC (for Palmsynth's hand tracking), and Canvas. No plugins, no installs. They load on a phone at a gig or a laptop in a studio.

The site is simultaneously a musician's portfolio, a playground for visitors, and a proving ground for the audio and interaction techniques that feed back into the music itself. The tools and the art are the same practice.

Originally posted on Contra: https://contra.com/p/PFEZcEOo-procrastinatrixnet-band-site-as-instrument-lab

Music gets scattered across Bandcamp, SoundCloud, Spotify, YouTube, and a dozen other platforms. Every band has the same problem: there's no single place to send someone that has everything. ListenUp.to solves that with a form, not a website builder.

How it works

A musician answers an intuitive series of format-agnostic questions: what's your name, where's your music, have you got gigs coming up, where's your merch? The questions glean and gather output from across platforms into one well-formatted page at a memorable URL: listenup.to/yourband.

No drag-and-drop. No fifty layouts. No templates to agonise over. Fill in a form, hit publish. Most bands have a live page in under ten minutes.

What's on the page

Music embeds — Bandcamp, SoundCloud, Spotify. Type your handle, ListenUp builds the embed.

Videos — drop a YouTube link, it plays in place.

Gig dates — date, venue, city, ticket link. No event-platform integration needed.

Merch links — point to your store, your Bandcamp merch page, wherever.

Booking and contact — one booking email, no public inbox. Press get an EPK; fans get the music.

A proper URL — listenup.to/yourband. Short enough to read out loud at a gig.

Why it's free

I built this because I needed it. As Procrastinatrix (444+ tracks, 13 albums, BBC Radio Wales airplay), I know how fragmented a musician's output gets across platforms. The tool I wanted didn't exist, so I made it and offered it free to other musicians. Paid tiers from £5/month cover hosting and development.

Live examples

The platform is live with artists across genres and geographies: Crow Nation (Apocalyptic Grime, London), Hedgetooth (Ritual Hauntology, Wales), Sad Cypress (arty folk-pop, Cardiff), Warrior Bones (raw and gritty, Audenge), T00TH (Experimental DnB, Swansea), and Tardigrade (Organic Techno, Hereford/Brecon — a collaboration between Omar Majeed and myself).

Technical

Full-stack build: form-driven CMS, dynamic page rendering, automatic embed generation from platform handles, OG image generation per band, and mobile-first design optimised for fast loading on phones at venues.

Originally posted on Contra: https://contra.com/p/6M2kMrsF-listen-upto-one-page-for-your-band

Why This Exists

Sending someone a music link is a weak way to share music. Half the time it disappears into a tab, or gets saved for later and never heard. Being in a room with someone while a track actually plays is different: you feel the reaction as it happens, even if nobody says much.

Listening to music together online usually means someone screen-shares a Spotify window or pastes links in a chat. I wanted a dedicated space where a group of people are genuinely synchronised on the same track, at the same moment, with a shared visual atmosphere. Something collective rather than privately fed through headphones.

The Build

I began in the usual modern way, with a heavier stack in mind: Next, Prisma, all the expected machinery. It quickly became obvious that was the wrong direction for where I wanted this to live. It never properly ran in a way worth keeping.

The real build was the lean version: Express, static pages, polling, signed cookies, one server file, no unnecessary weight. That part was satisfying because everything had to justify itself. Rooms first, then queue logic, then all the little social questions hidden inside queue logic: whose track, whose right to remove it, what happens when nobody adds anything when the current one ends.

Ghost Tracks

That last question was the one I liked solving most. For the Procrastinatrix room, I didn't want anyone arriving into silence, so it now quietly pulls from my own Headphone Candy playlist and drops in ghost tracks when the queue is empty. They arrive without an owner attached and anyone can skip them instantly. It means the room is already doing something before anyone decides what comes next.

Authoritative Server-Side Sync

The Node.js/Express server maintains the authoritative room state: current track, queue, play/pause state and start timestamp. Every browser seeks to the correct playback point on connect and stays synchronised throughout the session. The SoundCloud Widget API handles actual audio playback.

Real-Time Everything

Socket.IO carries chat, presence, reactions, queue changes and skip votes over the same live connection. The room feels immediate because everything is.

Queue and Voting

Anyone in the room can queue tracks from SoundCloud. Skip votes let the room collectively move on from a track without giving any single person veto power.

The Visualiser Rabbit Hole

Then I got dragged sideways into the visualiser and lost hours there. A blob first, then a torus knot, then flame, then another version because the flame looked wrong, then a separate shader page because once you start editing fragment code directly it becomes dangerous to do it inside the live room. Bass, mids, highs, hue, fullscreen, mouse tilt, chat over the top. A WebGL2 orb that became the shared visual atmosphere: the thing you stare at while you listen, a campfire for the room.

Everything Underneath

Scheduled events, admin controls, presence snapshots, skip votes, creator permissions, visitor graphs: all the practical parts that make a room behave properly once people are inside it. Cursor and Claude Code helped with velocity, but only under strict supervision: prompting, rejecting, steering, checking what they wrote, making them strip things back when they got bloated or made bad assumptions. It still feels less like pressing a button and more like conducting a very fast, slightly unruly assistant.

Who It's For

Musicians who want to play their SoundCloud tracks to an audience without the awkwardness of just throwing links around. People who want to hang out remotely and chat while playing bangers. And for the orb ponderers, there are visuals.

After six tracks you unlock creator status, which means you can make your own room, schedule events, and start shaping the place yourself. The whole point is that it grows by being used.

Visit at zoneout.net

Originally posted on Contra: https://contra.com/p/vvgFkMPO-zoneout-shared-rooms-for-real-time-listening