Zoom 1,500x from a turntable into the groove, cut from a synthesized track.
A short stereo track is synthesized in the background and then cut like a lacquer master: the RIAA recording curve, a cutter roll-off and a bass trim turn it into cutter velocity, which is integrated into wall displacement. In the 45/45 system the left channel moves the inner wall and the right channel the outer wall, so sound common to both wiggles the groove sideways and differences between them make it wider and narrower. Every pixel of the close-up finds its place on the 100 micrometer spiral, looks up the cut at that moment of the track and shades the V-shaped groove: as glossy reflections of the window at macro scale, where the wall glints break up with the music, and with secondary-electron edge contrast and grain at microscope scale, slowed down so you can watch the stylus ride. Playback reads the groove velocity under the stylus, applies the inverse RIAA curve and adds a pop wherever the stylus meets a speck of dust lying in the groove.
Try it. Scroll, or press + and -, to zoom. Drag the record to scratch: it follows your hand and the sound scrubs at exactly that speed, backward included. Space switches the motor off and on, M mutes; sound starts on the first click. Left alone, it dives from the turntable past the cartridge, lingers over the stylus in its glinting groove, goes on to the microscope and comes back out.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a zoomable vinyl record with JavaScript and the HTML canvas element, from the whole turntable down to the wiggles in the groove. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Work in millimeters. Draw a 300 mm black record with a colored label, spinning at 33 1/3 RPM, and a tonearm whose stylus rests on it.
- Add a zoom (mouse wheel and the + and - keys) that keeps the stylus in place on screen as you zoom in, up to about 1000 times.
- Generate a few seconds of a simple signal in an array, for example a melody of sine tones.
- When zoomed in, draw the groove per pixel into a small offscreen canvas and scale it up: for each pixel, find its radius and angle on the record, work out which turn of the spiral (0.1 mm apart) it is nearest, and the time in the track that point of the groove holds. Shift the groove sideways by the signal at that time and shade the V-shaped walls.
Once that works, make it beautiful:
- Give the groove two walls at 45 degrees and move them separately with a left and a right channel, the way stereo records do.
- Shade the walls like glossy plastic reflecting a window at moderate zoom, and like an electron microscope image (gray, bright edges, a little grain) at full zoom.
- Draw the stylus tip sitting in the groove, and slow the picture down at high zoom so you can watch it ride.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as playing the groove back with the Web Audio API, scratching by dragging the record, or adding dust that crackles.
