# Mesh Gradient

Aperveil / Light, shaped for the web.

An animated mesh gradient for React with drifting color anchors, soft blending and pointer influence. Tune the palette and export the WebGPU source.

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

## What it does

A multiscale flow bends four color territories. Cloud, Ribbon and Confluence use perceptual color blending, while local pointer motion draws and releases the surface.

## Choose it for

Build a brand-led product page with an animated mesh gradient behind short feature statements. Keep the color anchors broad, preserve a dark ground, and use Roll-off to soften brightness transitions.

## Limits

This is a procedural color field, not a fluid simulation. A static gradient can be approximated in CSS; the local evolving motion is the GPU feature.

## Current look

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

[Open editor](https://www.aperveil.com/shaders/mesh-gradient/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 MeshGradient from "./MeshGradient";

export default function Hero() {
  return (
    <MeshGradient
      className="hero-shader"
      spread={1} background="#0f1224ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `composition`, `background`, `colorA`, `colorB`, `colorC`, `colorD`, `accentColor`, `spread`, `bloom`, `dither`, `flowSpeed`, `orbitScale`, `pointerGrab`, `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

- Variant (`composition`, select): Arrangement of the colour points: a soft cloud, a flowing ribbon, or swirling confluence.
- Background (`background`, color): Colour that shows where the points' colours are thin.
- Point 1 (`colorA`, color): First colour point.
- Point 2 (`colorB`, color): Second colour point.
- Point 3 (`colorC`, color): Third colour point.
- Point 4 (`colorD`, color): Fourth colour point.
- Accent (`accentColor`, color): Colour that briefly blooms around a fast-moving pointer.
- Spread (`spread`, slider): Scales every falloff together, so the blobs grow or tighten without losing their balance.
- Roll-off (`bloom`, slider): How gently colour compresses past full brightness. At zero it clips and posterizes.
- Dither (`dither`, slider): Breaks up 8-bit banding across the smooth areas.
- Flow speed (`flowSpeed`, slider): How fast the colours drift; 0 holds them still.
- Orbit size (`orbitScale`, slider): How far each colour point travels. Zero pins them in place.
- Pointer pull (`pointerGrab`, slider): How strongly the pointer drags the colours along with it.
- 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

No published timing sample. Profile this effect on your target devices.

## Questions

### Can I keep the same movement while trying another palette?

Yes. Color Looks change only color controls. Spread, orbit scale, pointer grab and flow speed stay unchanged until you adjust them in the editor.

### What should I not use Mesh Gradient for?

This is a WGSL-rendered gradient, not CSS mesh syntax or a downloadable video generator. Exported non-text parameters are saved into the component.

### 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

- [Grain Gradient](https://www.aperveil.com/shaders/grain-gradient)
- [Ether Flow](https://www.aperveil.com/shaders/ether-veil)
- [Plasma Field](https://www.aperveil.com/shaders/plasma-field)