# Chromatic Drift

Aperveil / Light, shaped for the web.

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

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

## What it does

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.

## Choose it for

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.

## Limits

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

## Current look

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

[Open editor](https://www.aperveil.com/shaders/chromatic-drift/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 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; }
```

Component props: `baseColor`, `toneColor`, `fringeColor`, `scale`, `bandSharpness`, `brightness`, `fringeStrength`, `flowSpeed`, `dispersion`, `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

- Base (`baseColor`, color): Colour of the darkest parts of the field.
- Tone (`toneColor`, color): Colour of the soft field itself.
- Fringe (`fringeColor`, color): Colour added where the three channels split apart.
- Field scale (`scale`, slider): Density of the soft shapes; higher values make them smaller and more numerous.
- Edge hardness (`bandSharpness`, slider): Chromatic aberration is only visible on an edge — a soft field shifted three ways still looks like the same soft field.
- Brightness (`brightness`, slider): Brightness of the field.
- Fringe strength (`fringeStrength`, slider): How strongly the colour fringes show away from the cursor.
- Flow speed (`flowSpeed`, slider): How fast the field drifts; 0 holds it still.
- Dispersion (`dispersion`, slider): Grows linearly with distance from the cursor, which stands in for the optical axis.
- 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

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.

## Questions

### Can I apply the color fringe to my own image?

Not in the current shader. Dispersion operates on the built-in procedural field. An image filter would require an additional texture input.

### Can I keep the chromatic aberration subtle?

Yes. Lower the dispersion and soften the field edges in the editor. The pointer moves the optical center of the generated field; it does not distort the HTML text or images you place above it.

### What should I not use Chromatic Drift for?

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

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

- [Iridescent Foil](https://www.aperveil.com/shaders/iridescent-foil)
- [Plasma Field](https://www.aperveil.com/shaders/plasma-field)
- [Glass Flutes](https://www.aperveil.com/shaders/glass-flutes)