Liquid Chrome Site
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.
WebGL20 deps1 file · 155 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, FormEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* LiquidChromeSite — the album and tour drop of a recording artist, set in
* the Liquid Chrome register: heavy forms of molten, env-mapped chrome on a
* graphite room, a thin iridescent film where colour is allowed, and one
* device everywhere: the reflection is a whole lit room that reorganises
* around the pointer, as if you were tilting the object in your hand.
*
* - A nav whose indicator is a capsule of mercury that pours between links.
* - A hero whose title is molten chrome (WebGL): the room it reflects turns
* with the pointer, the metal swells toward it, and moving fast or
* clicking sends ripples through the letters. It stands on a mirror floor.
* - A heading that fills with liquid chrome as it scrolls into view.
* - A tracklist where each row is its own progress bar: chrome pours across
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
A whole album drop for a recording artist, designed as one piece and then cut into the Liquid Chrome kit. A floating nav marks the section you are in with a capsule of mercury that pours between links. The first screen is the album title in molten chrome rendered in WebGL, standing on a mirror floor: the room it reflects turns with the pointer, and fast moves send ripples through the letters. The tracklist is headed by a heading that fills with chrome as it scrolls in, and each row is its own progress bar that chrome pours across as the preview plays; drag to scrub. The artist's statement sits on a crumpled sheet of holographic foil that tilts with the pointer. The tour runs a ribbon of chrome city names that answers scroll speed, over tickets cast in liquid chrome as they arrive. The vinyl pre-order lets you flick the record and pick a pressing. The pre-save field ripples its chrome rim with every key and pours itself into a drop when your handler resolves. The footer ends on a pool that mirrors the artist's name and rings under the pointer. Every date, venue, price and name lives in one typed content object, LC_DEMO, marked as placeholder. It scrolls the page by default, or itself inside a fixed-height frame. Before launch, wire onPresave, the ticket, store and footer links (demo hrefs are bare #), add clip URLs to the tracks, and replace the content with your own.
Curator’s note
The Liquid Chrome kit, drop 5: the site the kit's assets are cut from. Pro: a full page composing every device of the kit (the WebGL chrome title, the mercury springs, the pour fills, the foil shader, the chrome casting, the record physics, the rim ripples, the pool simulation) around one typed, placeholder-marked content object.
