# Plasma Field

Aperveil / Light, shaped for the web.

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

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

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.

## Choose it for

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.

## Limits

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

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/plasma-field/edit?look=default)

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

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

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.

```tsx
"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; }
```

Component props: `colorDeep`, `colorMid`, `colorBright`, `colorPeak`, `accentColor`, `scale`, `contrast`, `flowSpeed`, `twist`, `twistReach`, `paletteDrift`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Deep (`colorDeep`, color): Colour of the darkest parts of the field.
- Mid (`colorMid`, color): Colour of the mid-bright currents.
- Bright (`colorBright`, color): Colour of the bright currents.
- Peak (`colorPeak`, color): Colour of the brightest ridges.
- Accent (`accentColor`, color): Colour of the light the cursor casts on nearby ridges.
- Scale (`scale`, slider): Frequency of the noise currents. Higher packs more ridges into the frame.
- Contrast (`contrast`, slider): How dark the troughs sit between the ridges.
- Flow speed (`flowSpeed`, slider): How fast the currents flow; 0 holds them still.
- Hover light (`twist`, slider): Soft local illumination that follows the existing currents. Zero disables the hover response; the field never rotates.
- Light reach (`twistReach`, slider): Radius of the local illumination, in canvas-height units. The field is unchanged outside this area.
- Palette drift (`paletteDrift`, slider): Slowly walks the whole image along the colour ramp.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. 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. Text exports also retain readable HTML typography.

## Performance

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.

## Questions

### What does Scale change in the plasma?

Scale changes the spatial frequency and framing of the procedural field. It does not upscale a bitmap; the shader continues to calculate the surface for the current canvas.

### What should I not use Plasma Field for?

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

### 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 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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Mesh Gradient](https://www.aperveil.com/shaders/mesh-gradient)
- [Neuro Noise](https://www.aperveil.com/shaders/neuro-noise)
- [Kaleidoscope](https://www.aperveil.com/shaders/kaleidoscope)