# Liquid Chrome

Aperveil / Light, shaped for the web.

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.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

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

## Choose it for

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

## Limits

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

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/liquid-chrome/edit?look=default)

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

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

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.

```tsx
"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; }
```

Component props: `metalTint`, `environmentTint`, `roughness`, `reflectionContrast`, `flowScale`, `surfaceTension`, `flowSpeed`, `lightDirection`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Metal tint (`metalTint`, color): Colour of the chrome itself.
- Studio tint (`environmentTint`, color): Colour of the studio reflected in the chrome.
- Roughness (`roughness`, slider): Softness of the reflections; higher values give brushed, blurry chrome.
- Reflection contrast (`reflectionContrast`, slider): Contrast between the bright and dark parts of the reflection.
- Flow scale (`flowScale`, slider): Controls the size of the three broad liquid modes.
- Surface tension (`surfaceTension`, slider): Raises or relaxes the analytic chrome folds.
- Flow speed (`flowSpeed`, slider): How fast the liquid surface flows; 0 freezes it.
- Light direction (`lightDirection`, xy): Direction of the studio's key light across the surface.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography.

## Performance

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.

## Questions

### Is Liquid Chrome a physical fluid simulation?

No. Its analytic flow and reflection model create a fluid-metal appearance without solving a full fluid simulation. The editor exposes the artistic surface controls directly.

### What should I not use Liquid Chrome for?

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

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Iridescent Foil](https://www.aperveil.com/shaders/iridescent-foil)
- [Glass Facets](https://www.aperveil.com/shaders/glass-facets)
- [Silk Bands](https://www.aperveil.com/shaders/silk-bands)