Not The Final Vinyl: Record Label as Instrument

NotTheFinalVinyl.net does not treat a record label catalogue as a list of products. It treats it as a space, an object and a performance.

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.

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 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.

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.

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.

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.

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.

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.