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

Ether Flow: Make room for atmosphere.

A soft, interactive haze background built with WebGPU. Shape Ether Flow's domain-warped color field and export a self-contained React component.

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 Ether Flow.

Ether Flow uses layered noise and domain warping to form a soft field of haze. Pointer movement pulls the field; display-paced rendering retains fractional frame deadlines, and its runtime remains capped at device pixel ratio 1.

The haze is procedural, not volumetric weather or a video. DPR 1 is this shader's explicit runtime setting, not a guarantee of a particular frame rate.

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

01

Scale

Size of the wisps. Lower is broader and calmer.

02

Contrast

Narrows the band between shadow and haze, sharpening the wisp edges.

03

Warp

How far each noise layer displaces the next. Zero leaves plain fbm.

04

Edge feather

Fades the layer toward the edges so it melts into what sits underneath.

Color Looks preserve these settings. Open the editor for all 13 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.

Set a gentle atmosphere behind a SaaS introduction. Use a low-contrast look and keep cards and headings as separate, crisp HTML.

Ether Flow used behind an example interface
NORTH / STUDIOEXAMPLE COMPOSITION
A clearer view
of what comes next.
Real HTML above a decorative shader surface.
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.

Its blurred surface is designed around a DPR 1 cap to limit pixel work. The cap is part of the exported runtime too. Measure it in your own layout before choosing a full-screen deployment.

The haze is procedural, not volumetric weather or a video. DPR 1 is this shader's explicit runtime setting, not a guarantee of a particular frame rate.

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 gradients shaders
Aurora Drift shader previewAurora DriftMesh Gradient shader previewMesh GradientSmoke Ring shader previewSmoke Ring

YOUR COLORS. YOUR CONTEXT.

Make Ether Flow yours.

Open editor