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.
DOM + CSS0 deps1 file · 26 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
