LM-18Music

Lacquer

A vinyl pre-order site where the groove is cut from the music.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A pre-order site for Overprint, a made-up 12-inch EP by the fictional Tilde Harbour, printed like a riso poster over a live three.js scene. Visitors pick one of six coloured pressings and the whole page re-inks to match, then scroll as a lathe cuts side A into a lacquer from the EP's own audio, the camera closes on the groove and a press turns pellets in their colour into the record. On the deck, hovering a groove (or tapping it on a phone) plays that track from that spot, with the tonearm swinging there and the record turning in time with the sound. Below sit a test-pressing tracklist with each track's real waveform, a pre-order form that sends nothing and says so, and a page on how a pre-order becomes a record. The music, the machines, the record and the jacket art are all made in code. For record labels, pressing plants, record shops and bands selling vinyl.

How it's made

  1. An EP written as code

    Six original tracks, 84 to 96 seconds each at 80 to 128 bpm, are scores played by a deterministic Web Audio synthesiser: oscillators, filters, envelopes, FM and seeded noise through a generated hall reverb, a compressor and a limiter. No samples, and nothing sounds until the visitor turns sound on.

  2. The groove cut from the audio

    A script renders each track offline at 44.1 kHz in headless Chromium, filters it below 800 Hz and stores it at 2,000 samples a second as 8-bit data, 1.08 MB for all six. Each side is laid out as a real spiral at 45 rpm: 0.36 mm a turn, three turns at 1.1 mm between tracks and a locked groove at 54.5 mm.

  3. One shader for every disc

    A single vinyl shader draws all six pressings (solid, clear, split, marble, splatter and smoke), the lacquer, the stampers, the hot biscuit and the flash. Up close it shades the V-shaped groove swinging with the music; further out, loud turns break the light into rings.

  4. Three machines and a jacket

    A riso-blue cutting lathe with VU meters that read the music under the cutter, swarf and a microscope; a pink hydraulic press with an extruder, instanced pellets in the picked colour, labels and a flash trimmer; a direct-drive deck with a 229 mm tonearm; and a printed jacket and inner sleeve. A studio of glowing cards in the page's inks is baked into their reflections and re-baked when the page changes ink.

  5. Drop the needle anywhere

    The pointer is cast onto the record, and the groove under it gives the track and the second. Resting 150 ms plays from there: the arm swings on its real arc, and the record's angle locks to the audio clock so the stylus sits on the groove being heard.

  6. A page printed in riso inks

    Nine sheets, each in its own ink, with headlines printed in two plates a few pixels out of register. Picking a pressing floods the page with its inks from the click over 700 ms, and the pick rides along in the link.

  7. A frame on a budget

    The pixel ratio is capped at 1.5, with up to 4x MSAA on desktop and 2x on phones, one shadow map, bakes only when something moves, an adaptive quality ladder and no drawing at all when nothing moves. Below 768 px or on touch screens the reflection cube, shadow map and label textures drop to half size.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • scripts/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • eslint.config.js

  • README.md

    Start here. What's inside and how to run it.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • HOW-IT-WAS-MADE.md

    How it was made. The build step by step, and a recipe to make your own.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite 8.3 · React 18.3 · React Router 6.30 · three.js 0.171 · Tailwind CSS 3.4 · JavaScript (JSX) · GLSL shaders · Web Audio (synthesised music) · Procedural geometry · View Transitions API · Google Fonts (Unbounded / DM Sans / DM Mono)
File size
2.2 MB
Triangles
134,572
Load time
2.0 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2 for the 3D. Without it every 3D beat shows a flat print and the rest still works: the pick, the tracklist's sound and the pre-order form. Sound plays only after the visitor turns it on, clicks the record or plays a track. Phones get a lighter scene, and reduced motion stills the sway and the colour flood. Tested in headless Chrome with software WebGL at 1440 x 900 and 390 x 844: every sheet, a pick and the pre-order, with no page errors and no sideways scroll. Safari, Firefox, sound output and real phones not tested yet.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license

Everything on screen is made in code: the six tracks are scores played by a Web Audio synthesiser with no samples, the groove data is rendered from that same audio by a script, the record, jacket, lathe, press and deck are three.js geometry and shaders, and the jacket and label art is drawn on a canvas. The six pressing stills, the share image and the pre-printed jacket plates are rendered from the same scene by a second script, and the fonts load from Google Fonts.

Buy LM-18 Lacquer

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.