TITLE: Midnight Grooves — A Turntable That Synthesises Its Own Record

PROMPT: Build a single-file skeuomorphic DJ deck on a warm wood ground #14100d with platter #d9d4c8, vinyl #1b1b1b, brass #c9a227 and a red record light #ef4444. A 1180px deck slab with a brass hairline inner frame holds a two-column body: platter left, controls right. The platter is a radial-gradient aluminium disc with a heavy drop shadow; inside it a circular record carries a repeating-radial-gradient of 1px groove rings layered over a conic-gradient of nine dark stops so the grooves shimmer as the disc turns, plus a brass-ringed label reading MG-01 / 33 1/3 and a chrome spindle. A 47-radius SVG ring around the platter is the groove readout: stroke-dasharray 295.3 with the offset driven by playback progress. A tonearm pivots from a 1px invisible marker at the platter's top-right: a 0-height div with transform-origin right center rotated by a CSS custom property, carrying a brushed shaft, a dark headshell and a counterweight; it eases to a progress-derived angle while playing and parks at -36deg when stopped. The right column holds an amber LCD display (track, position, rate, and a cached waveform bitmap with a red playhead), PLAY/STOP buttons, a horizontal pitch fader with a brass cap, and four one-shot pads. Audio is fully synthesised: a 2-second 120 BPM loop is rendered sample by sample into a Float32Array at boot (sine kick with a 150-to-45 Hz pitch envelope, noise hats and snare through a one-pole highpass, and a bass line of eight notes with a naive saw through a one-pole lowpass), soft-clipped with tanh, then copied into an AudioBuffer when the AudioContext is created inside the first user gesture and wrapped in try/catch. A second buffer of 820 randomly placed crackle impulses loops through a highpass at 1.5 kHz. The music source's playbackRate follows a smoothed rate value that eases toward the pitch target, so STOP produces a real spin-down pitch bend. Dragging the record with pointer capture computes angular velocity, writes the record angle directly, maps it to playbackRate (clamped to ±3.5x), advances the loop position by degrees, and lifts the crackle gain while ducking the music — a genuine scratch brake and stutter. Dragging the tonearm seeks: the pointer angle around the pivot maps to progress, and on release the buffer source is recreated at the new offset. Pads fire short oscillator/noise one-shots (kick, hat, bass, minor-triad stab) with exponential gain envelopes. Space toggles play, keys 1-4 fire pads. prefers-reduced-motion stops the LED pulse and CSS transitions.

DESCRIPTION: A love letter to the physical turntable, built from gradients, shadows and oscillators. Everything about it is tactile: a brushed platter with a record that shimmers as it turns, a tonearm that glides to its groove, an amber readout with a live waveform and a red light that pulses with the beat. Nothing is a sample — the loop, the crackle and every pad are synthesised in the browser from oscillators, noise and envelopes. Grab the record and the whole deck bends: pitch drops, the crackle roars, the music stutters, and letting go throws it back up to speed. It is the most fun you can have with a mouse on a design showcase.

TECHNIQUES:
- Sample-by-sample synthesis of a 2-second 120 BPM loop into a Float32Array (pitch-enveloped sine kick, noise hats/snare, saw bass with a one-pole lowpass) then tanh soft-clip, copied into an AudioBuffer on first gesture
- AudioContext created and resumed inside the first user gesture, wrapped in try/catch, with a master lowpass, a music bus and a separate vinyl-crackle bus
- playbackRate driven by a smoothed rate value (pitch target and scratch angular velocity), giving spin-up, spin-down and stutter for free
- Pointer-capture drag on the record mapping angular velocity to rate and to loop position; tonearm drag maps pointer angle around the pivot to progress and reseeks the buffer source
- Conic-gradient plus repeating-radial-gradient grooves rotating via transform, with skeuomorphic inset and drop shadows
- SVG progress ring via stroke-dasharray/dashoffset; cached waveform bitmap with a red playhead
- One-shot pads synthesised from oscillators, a shared noise buffer and exponential envelopes
- clamp() sizing, two-column grid collapsing below 880px, prefers-reduced-motion handling

INTERACTION:
- Drag the record to scratch: it follows the pointer, pitch bends with drag velocity, the music stutters and the crackle rises; releasing snaps it back to speed
- Drag the tonearm to seek; on release the loop restarts at the new groove position
- PLAY starts the record (it spins up to 33 1/3 rpm) and lights the red record light; STOP brakes it to a standstill with a pitch-down
- Move the pitch fader from -8% to +8%; the readout, rpm counter, record speed and audio rate all follow
- Click the KICK / HAT / BASS / STAB pads (or press 1-4) to fire synthesised one-shots that flash the pad and pulse a red dot
- Press Space to toggle playback; the display shows position, rate, and a moving waveform playhead