Surface study no. 04
A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold.
A live WebGL background of liquid chrome: slow folding metal with a rainbow film on its edges that swells toward the cursor. Colors, speed, fold size, film, pull, grain and vignette are all props. Adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to a CSS gradient without WebGL.
The import and the props worth knowing about, in one place.
import { LiquidChrome } from "@/components/beste/component/liquid-chrome";
// As a layer behind content
<section className="relative min-h-[40rem]">
<LiquidChrome className="absolute inset-0" />
<div className="relative">...</div>
</section>
// Or wrapping content, with its own look
<LiquidChrome
className="min-h-[32rem]"
shadowColor="var(--foreground)" // any CSS color, tokens included
highlightColor="#f4d7b0"
iridescence={0.4} // 0 to 1
hue={0.2} // shifts the rainbow film
speed={0.6} // 1 is the default pace
scale={2.2} // more, smaller folds
pull={0.8} // swell under the cursor, 0 to 1
>
<h2>...</h2>
</LiquidChrome>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
shadowColor | string | — | Color of the deep folds. Any CSS color, tokens included (e.g. "var(--foreground)"). |
highlightColor | string | — | Color the surface reflects at its brightest. |
iridescence | number | — | Strength of the rainbow film on the edges, 0 to 1. |
hue | number | — | Rotates the rainbow film's hues, 0 to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
scale | number | — | Size of the folds; higher packs more folds in. |
interactive | boolean | — | Swell toward the cursor. |
pull | number | — | How strongly the surface rises under the cursor, 0 to 1. |
grain | number | — | Film grain, 0 to 1. |
vignette | number | — | Darkening toward the edges, 0 to 1. |
paused | boolean | — | Freeze the surface on its current frame. |
className | string | — | |
children | ReactNode | — |