# Ether Flow Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A soft, interactive haze background built with WebGPU. Shape Ether Flow's domain-warped color field and export a self-contained React component. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does 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. ## Choose it for Set a gentle atmosphere behind a SaaS introduction. Use a low-contrast look and keep cards and headings as separate, crisp HTML. ## Limits 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. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/ether-flow/edit?look=default) ## Install Ether 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 - Shadow (`shadowColor`, color): Color of the deepest parts of the haze. - Haze (`hazeColor`, color): Color of the bright haze. - Light (`lightColor`, color): Glow the pointer draws into the haze around it. - Scale (`scale`, slider): Size of the wisps. Lower is broader and calmer. - Contrast (`contrast`, slider): Narrows the band between shadow and haze, sharpening the wisp edges. - Warp (`warp`, slider): How far each noise layer displaces the next. Zero leaves plain fbm. - Edge feather (`vignette`, slider): Fades the layer toward the edges so it melts into what sits underneath. - Flow speed (`flowSpeed`, slider): How fast the haze drifts and folds; 0 holds it still. - Pointer pull (`pointerPull`, slider): How strongly the cursor stirs the field. - Opacity (`opacity`, slider): Opacity of the complete effect, including its background. - Hover (`hover`, select): What the pointer does: Lens magnifies under it, Focus makes it finer, Ripple sends rings out, Drag pulls the surface along with it, Swirl twists it, Spotlight makes the pointer the light. - Hover radius (`hoverRadius`, slider): How far the pointer reaches, as a share of the canvas height. - Hover strength (`hoverStrength`, slider): How strongly the pointer acts. ## 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 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. ## Questions ### Why does Ether Flow render at DPR 1? 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. ### What should I not use Ether Flow for? 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. ### 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 - [Aurora Drift](https://www.aperveil.com/shaders/aurora-drift) - [Mesh Gradient](https://www.aperveil.com/shaders/mesh-gradient) - [Smoke Ring](https://www.aperveil.com/shaders/smoke-ring)