Skip to content

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.

ProLiquid Chromeplayfulglass

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview
Flick the record

Vinyl · Pre-order

Molten Tide on 180g vinyl.

Pressed three ways and cut at half speed, with a gatefold printed in silver ink and a lyric sheet.

Pressing
Pre-order · $42

Ships the week of 14 November.

Props

No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

An album tracklist where each row is its own progress bar: liquid chrome pours across the row as the preview plays, the labels under the metal turn dark, and you scrub by dragging the row.

sectiontracklistmusic
NewPro

A complete album and tour drop for a recording artist in molten chrome: a mercury nav, a WebGL chrome title on a mirror floor, a pour-to-play tracklist, a holographic foil statement, tour tickets cast in chrome, a spinnable vinyl pre-order, a rippling pre-save field and a pool footer.

templatelanding pagemusic
Pro

An endlessly pannable board that recycles a fixed set of tiles via modulo wrapping.

draginfinitecanvas