Plasma Field Free WebGPU shader

Let the current lead.

Layered flow-noise currents with luminous edges and deep colour. Explore a creative WebGPU background with evolving motion and local hover illumination.

Open editor Meet the surface

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.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Plasma Field.

Rotating gradient noise evolves at different speeds across several spatial scales. Broad warped currents, fine luminous transitions and darker pockets create depth without a repeating sine grid. Colour transitions ease smoothly; the pointer illuminates nearby currents without twisting the whole field.

Plasma is a visual metaphor here. The shader does not model ionized gas, electromagnetic fields or scientific measurements.

2.228 ms GPU timestamp median; p95 3.277 ms. 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-05. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Scale

Frequency of the noise currents. Higher packs more ridges into the frame.

Contrast

How dark the troughs sit between the ridges.

Flow speed

How fast the currents flow; 0 holds them still.

Hover light

Soft local illumination that follows the existing currents. Zero disables the hover response; the field never rotates.

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

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

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.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

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.

Open editor & export

Markdown guide

Usage example — download PlasmaField.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

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

PlasmaField usage

"use client";

import PlasmaField from "./PlasmaField";

export default function Hero() {
  return (
    <PlasmaField
      className="hero-shader"
      scale={8} colorDeep="#0a0d24ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT

Made for a real interface.

Create an energetic identity for a digital art launch. Pair the organic movement with a wide, geometric heading and a short action rather than dense text.