Chrome Vinyl Preorder 2.0
A vinyl pre-order on a working turntable: a WebGL record whose groove light stays with the lamp, strobe dots that lock at 33 1/3, a tonearm you can drag to cue, needle drops per track, a pitch fader, and a generated score you can scratch.
WebGL20 deps1 file · 87 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from "react";
/**
* ChromeVinylPreorder2: a vinyl pre-order on a working turntable.
*
* The deck is drawn by a WebGL2 shader: a record with real anisotropic
* groove light (the bowtie streak stays with the lamp while the grooves turn
* through it), smooth gaps between the songs, a printed label with foil, a
* brushed platter, and strobe dots that stand still only when the platter
* runs at exactly 33 1/3 or 45. Four pressings (mirror chrome, smoke, oil
* slick, splatter) are shaded differently; changing one re-presses the disc
* from the spindle out.
*
* It plays. Start spins the platter up and the arm cues itself onto the
* lead-in; click a track to drop the needle on it; drag the headshell to cue
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
The merch table as a listening booth. The record is shaded per pixel: its grooves catch the lamp in the bowtie streak real vinyl shows, and the streak stays put while the grooves turn through it; the gaps between songs sit exactly where the tracklist says they should. Four pressings shade differently (mirror chrome, smoke you can see the mat through, an oil-slick film, a cobalt splatter), and changing one re-presses the disc from the spindle out. Press Start and the platter spins up, the strobe lamp lights and the dots on the rim stand still at 33 1/3; touch the pitch fader and they drift. The arm cues itself onto the lead-in, or click a track to drop the needle there, or drag the headshell anywhere on the side. The music follows the record, not a clock: hold the disc and it stops while the platter turns under the slipmat, push it to speed it up, pull it back to rewind. Turn on Snd for a generated sketch of side A with surface crackle, so a scratch bends real pitch. At the end of the side the needle rides the run-out groove, then the arm returns and the motor stops. Beside the deck: the pressings as a radio group, side A as needle drops with progress, the price in the chrome pre-order pill and an edition meter.
Curator’s note
Chrome Vinyl Preorder, rebuilt as a premium 2.0 beside the original. Pro: a WebGL2 deck (anisotropic groove light, a printed and foiled label, a brushed platter with real strobe dots), slipmat physics, a tonearm with cue, play, run-out and return, and an optional Web Audio score clocked by the record itself. One file, no dependencies.
