Pour Tracklist Section
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.
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.
Tracklist
Twelve songs, poured in one take.
- 01QuicksilverSingle3:12
- 02Mirror Floor3:48
- 03Molten TideTitle track4:05
- 04Afterimage3:21
- 05Cold Open2:58
- 06Surface Tension3:44
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, RefObject } from "react";
/**
* PourTracklist — an album tracklist where every row is a progress bar.
*
* Press play and liquid chrome pours across the row as the preview runs,
* its front a moving wave; the labels it covers turn dark, clipped to it.
* Drag the playing row to scrub, or use the arrow keys on its button.
* Hovering a row lets the metal reach in; a finished preview drains out.
* Plays a real clip when a track has `src` (an https URL or a same-site
* path), else a silent preview. The heading is the kit's PourFillHeading.
* Two columns from a medium container up.
*
* Part of the Liquid Chrome kit: a graphite room, a four-band chrome ramp
* (#08090b, #4b4f58, #c9ced6, #ffffff) multiplied by a finish (chrome, gold,
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
The part of an album site people actually use, made the showpiece. Every row of the tracklist is its own progress bar. Press play and liquid chrome pours across the row as the preview runs, its front a wave that keeps moving, and the index, title and time it covers turn dark: a second copy of the row clipped to the metal, so the inversion travels with the pour. Drag along the playing row to scrub, or use the arrow keys on its button to seek five seconds. Hovering a row lets the metal reach a little way in. When a preview ends, or another track starts, the chrome drains back out. Tracks with a `src` play a real clip (capped at the preview length); without one, the row runs a silent preview on a clock and says so under the title, so the page can be built before the audio exists and never ships a dead button unnoticed. The time readout updates once a second, so the list is not re-rendered every frame. Two columns from a medium container up; the heading is the kit's PourFillHeading.
Curator’s note
The Liquid Chrome kit's feature section (slot 7), cut from liquid-chrome-site. Pro: a stateful audio system (real clips or a silent clock), scrubbing and keyboard seeking, one rAF loop easing every row, and a masked chrome fill; its heading is the kit's PourFillHeading.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Chrome Vinyl Preorder
sectionsA 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.
Liquid Chrome Site
templatesA 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.
Molten Chrome Hero
heroesA first screen whose title is molten chrome in WebGL: the lit room it reflects turns with the pointer, the metal swells toward it, fast moves and clicks send ripples through the letters, and it stands on a mirror floor.