Chrome Vinyl Preorder
A vinyl pre-order you can play with: flick the canvas record and it spins with inertia under a sheen that stays with the light, the chrome tonearm swings on when it spins fast, and the pressings sit beside it as a radio group.
Canvas 2D0 deps1 file · 28 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from "react";
/**
* ChromeVinylPreorder — a vinyl pre-order you can play with.
*
* The record is drawn on a canvas: grooves, the gaps between songs, a
* run-out and a label. Flick it and it spins with inertia and real
* friction; hold it and it stops under your hand. Its sheen stays where
* the light is while the grooves turn through it, and the light swings
* toward the pointer. Spin it fast and the chrome tonearm swings on; it
* lifts as the disc slows. Beside it, the pressings as a radio group, the
* price and the pre-order button (the kit's ChromePillButton). A Spin
* button gives keyboard users the same flick.
*
* Part of the Liquid Chrome kit: a graphite room, a four-band chrome ramp
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
The merch table, made tactile. The record is drawn once per pressing on a canvas: fine grooves of varying depth, the smoother gaps between songs, a lead-in edge, a run-out and a label with the artist and title. Grab it and it turns under your hand; flick it and it spins with inertia, slowing on real friction; let go of a still hand and it stays still. Like a real record, its sheen does not turn with it: two opposed wedges of light stay where the light is while the grooves run through them, and the light swings toward the pointer. Spin it fast enough and the chrome tonearm swings onto the record; it lifts as the disc slows. Beside it, the pressings are a radio group (mirror chrome, smoke, oil slick), each with a swatch and a price; changing one redraws the disc. The price is in the pre-order button, the kit's ChromePillButton. A Spin button gives keyboard users the same flick.
Curator’s note
The Liquid Chrome kit's proof/CTA section (slot 8), cut from liquid-chrome-site. Pro: a Canvas 2D record (grooves, run-out, label) with drag and fling physics, a fixed anisotropic sheen, an eased SVG tonearm and a pressing radio group, composing the kit's ChromePillButton.
