Mesh Gradient Free WebGPU shader

Color with somewhere to go.

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

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 Mesh Gradient.

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

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.

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

Variant

Arrangement of the colour points: a soft cloud, a flowing ribbon, or swirling confluence.

Spread

Scales every falloff together, so the blobs grow or tighten without losing their balance.

Roll-off

How gently colour compresses past full brightness. At zero it clips and posterizes.

Dither

Breaks up 8-bit banding across the smooth areas.

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

MeshGradient usage

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

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.

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.