Molten Chrome Hero
A 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.
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.
Props
"use client";
import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* MoltenChromeHero — a first screen whose title is molten chrome.
*
* The title is a WebGL2 heightfield: each letter's distance to its edge,
* rounded into a pillow, reflecting a lit room (sky, a hot horizon seam, a
* dark floor, liquid contour bands, red and blue split at the band edges).
* Each line is bent a little, so letter tops face the sky and bottoms the
* floor. The room turns with the pointer anywhere over the hero, the metal
* swells toward it, fast moves and clicks send ripples through the
* letters, and the title stands on a gloss floor that mirrors it. A line
* break in the title stacks it. The calls to action are the kit's
* ChromePillButton.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
The first screen of the Liquid Chrome kit, and its proof that chrome needs a room to reflect. The title is drawn into a mask, and an exact distance transform turns every letter into a rounded pillow of height: a heightfield the shader lights as polished metal. What it reflects is a studio: a bright sky, a hot seam of horizon, a dark floor, and slow liquid contour bands, with red and blue split a hair apart where the bands meet, the way real chrome disperses. Each line of the title is bent slightly, so letter tops face the sky and bottoms the floor: the classic chrome-type read, done with light instead of a painted gradient. Move the pointer anywhere over the hero and the room turns with it, the horizon sliding through the letters as if you had tilted them; the metal swells a little toward the pointer. Move fast, or click on the title, and ripples run through the letters. The title stands on a dark gloss floor that mirrors it. The calls to action are the kit's ChromePillButton. The real title stays in the DOM, transparent over the canvas; without WebGL2 it is painted with a CSS chrome gradient.
Curator’s note
The Liquid Chrome kit's signature entry (slot 1, hero), cut from liquid-chrome-site. Pro: a WebGL2 heightfield built from the title with an exact distance transform, an env-mapped chrome shader with dispersion, analytic ripples and a mirror floor, composing the kit's ChromePillButton.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
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.
Holo Foil Field
backgroundsA full-bleed sheet of crumpled holographic foil in WebGL: its thin-film colours follow Newton's series, each face flashes silver or falls dark as it turns, and tilting it with the pointer sweeps the colour across the sheet.
Mirror Pool Footer
sectionsA footer whose giant chrome wordmark stands on the waterline of a dark pool that mirrors it: a real wave simulation rings under the pointer and takes a drop every ten seconds, bending the reflection as it ripples.