# Mercury Flow Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A WebGPU liquid metal background for React: thick, glossy streams that merge, neck and part, mirroring long studio lights in streaks that burn white. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does 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. ## Choose it for Hold a premium product launch, an automotive page or a fintech hero: the metal behind the headline, its dark gaps for the words. ## Limits Mercury Flow draws its own metal in its own studio; it does not reflect your page or load 3D models. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/mercury-flow/edit?look=default) ## Install Mercury Flow is part of Aperveil Shaders and Aperveil Pro, coming soon. Its live demo is open; installation and downloads open in a later release. Free shaders install today: see the [Aperveil integration guide](https://www.aperveil.com/docs). ## Controls - Metal (`metalColor`, color): The metal's own tint: white for chrome, warm for gold, cool for steel. - Lights (`lightColor`, color): The studio's long lights the metal mirrors. - Floor glow (`accentColor`, color): A faint colored glow from below, in the metal's lower curves. - Background (`background`, color): The dark the metal flows through. - Streams (`streams`, slider): How many streams of metal flow across the frame. - Thickness (`thickness`, slider): How thick the streams are. - Merging (`merge`, slider): How readily streams flow into one another where they meet. - Wave (`wobble`, slider): How much the streams wind as they flow. - Back stream (`depth`, slider): How strongly a deeper, darker stream shows behind. - Light angle (`angle`, slider): How the studio's lights are turned round the metal, in degrees. - Brightness (`lights`, slider): How bright the studio's lights are. - Speed (`speed`, slider): How fast the metal flows. - Pointer response (`interaction`, slider): How far the pointer parts the metal. - Opacity (`opacity`, slider): Opacity of the whole effect, including its background. - Background opacity (`backgroundOpacity`, slider): Fade the background on its own, for a transparent overlay. ## Compatibility WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). 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. ## Performance 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. ## Questions ### Can the metal be gold or colored? 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. ### How do I change how the streams flow? 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. ### What does the pointer do? It parts the metal round itself; Pointer response sets how far. ### 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 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. ## License 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. ## Related shaders - [Liquid Chrome](https://www.aperveil.com/shaders/liquid-chrome) - [Metaballs](https://www.aperveil.com/shaders/metaballs) - [Armillary](https://www.aperveil.com/shaders/armillary)