Chromatic Drift Free WebGPU shader

A little outside the lines.

A chromatic aberration field for React with cursor-relative color separation. Shape the bands and dispersion, then export the WebGPU background.

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 Chromatic Drift.

Chromatic Drift samples one procedural field at separate red, green and blue offsets. Dispersion grows away from the pointer, making the field's edges reveal a colored fringe.

It does not apply lens distortion to uploaded images or the live page. The three sampled channels belong to its own generated color field.

1.772 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 1.5; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-02. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Field scale

Density of the soft shapes; higher values make them smaller and more numerous.

Edge hardness

Chromatic aberration is only visible on an edge — a soft field shifted three ways still looks like the same soft field.

Brightness

Brightness of the field.

Fringe strength

How strongly the colour fringes show away from the cursor.

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

ChromaticDrift usage

"use client";

import ChromaticDrift from "./ChromaticDrift";

export default function Hero() {
  return (
    <ChromaticDrift
      className="hero-shader"
      scale={1.2} baseColor="#0f1429ff"
      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.

Add a restrained optical accent to a photography-tool announcement. Keep the fringe in the background and the product's real images unmodified in HTML.