Skip to content
Pro · Coming soon for Aperveil 1.0 WebGPU shader

Mercury Flow: Metal that pours and parts.

A WebGPU liquid metal background for React: thick, glossy streams that merge, neck and part, mirroring long studio lights in streaks that burn white.

Open editorMeet the surface

Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now.

Color Looks

A surface, not a screenshot.
Pro · Coming soon for Aperveil 1.0React · Vue · HTML · WordPress · FramerRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Mercury Flow.

Mercury Flow pours liquid metal across the frame in thick, glossy streams. Each stream swells and thins as it flows; where two meet they merge into one pool and neck apart again, and the flow curls over itself. The metal is mirror-bright: a dark studio's long lights lie along every curve as streaks that burn to white, and a colored glow rises from the floor beneath. Behind, a deeper, darker stream moves more slowly. Move the pointer and the metal parts round it, like a finger drawn through mercury.

Mercury Flow draws its own metal in its own studio; it does not reflect your page or load 3D models.

4.522 ms GPU timestamp median; p95 6.554 ms. 1440x900 @ dpr 1.25; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-20. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

01

Streams

How many streams of metal flow across the frame.

02

Thickness

How thick the streams are.

03

Merging

How readily streams flow into one another where they meet.

04

Wave

How much the streams wind as they flow.

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

APERVEIL PRO

Coming soon.

The live demo is open above and in the editor. Editing its settings and downloading it open with Aperveil Pro in a later release. Free shaders and blocks are available now.

Explore shaders
Markdown guide

THE SURFACE IN CONTEXT

Made for a real interface.

Hold a premium product launch, an automotive page or a fintech hero: the metal behind the headline, its dark gaps for the words.

Mercury Flow used behind an example interface
ALLOYExample composition

Engineered in motion

Cast in liquid light.

An illustrative product page with the liquid metal behind the headline.

Finish

Mirror chrome

Edition

Series One

Illustrative layout, not a customer project. The image is a still preview of the selected Look.

An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.

Try this surface in the editor

A FEW USEFUL DETAILS

Before you ship.

What this surface does, where it fits, and where it stops.

Yes. Metal sets its color, Lights the color of the studio's lights it mirrors and Floor glow the light from below; the Looks include Gold, Cobalt and Rose gold.

Streams sets how many there are, Thickness how full, Merging how readily they join, Wave how much they swell, and Back stream how strongly the dark stream behind shows.

It parts the metal round itself; Pointer response sets how far.

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.

Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects.

ANOTHER WAY TO SEE IT

All metal & ceramic shaders
Liquid Chrome shader previewLiquid ChromeMetaballs shader previewMetaballsArmillary shader previewArmillary

YOUR COLORS. YOUR CONTEXT.

Make Mercury Flow yours.

Open editor