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.
WebGL20 deps1 file · 38 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
