Liquid Chrome Free WebGPU shader

A surface that never settles.

Flowing chrome reflections for React and Next.js. Tune Liquid Chrome's roughness, tension and studio light, then take the WGSL source into your project.

Open editor Meet the surface

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Liquid Chrome.

Liquid Chrome combines analytic stream modes with surface slopes and procedural studio reflections. Surface tension changes the shape while roughness broadens the reflective response.

It is a reflective procedural surface, not a Navier–Stokes fluid solver. It does not coat uploaded logos or reflect the live DOM.

0.549 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 1.5; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-03. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Roughness

Softness of the reflections; higher values give brushed, blurry chrome.

Reflection contrast

Contrast between the bright and dark parts of the reflection.

Flow scale

Controls the size of the three broad liquid modes.

Surface tension

Raises or relaxes the analytic chrome folds.

Color Looks preserve these settings. Open the editor for all 9 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

Open editor & export

Markdown guide

Usage example — download LiquidChrome.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz

LiquidChrome usage

"use client";

import LiquidChrome from "./LiquidChrome";

export default function Hero() {
  return (
    <LiquidChrome
      className="hero-shader"
      roughness={0.18} metalTint="#b8bec1ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT

Made for a real interface.

Give a hardware announcement a restrained metal surface. Use a small left-aligned headline and leave the opposite side open for the strongest reflections.