# Grain Gradient

Aperveil / Light, shaped for the web.

A directional grain gradient for React with subtle, evolving texture. Set the angle, balance four colors, and export the WebGPU background.

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

## What it does

Grain Gradient combines a directional color field with temporal grain that evolves in place. Gradient direction, grain amount, focus and rate are independent controls.

## Choose it for

Add tactile color to an editorial product page. Keep grain restrained behind body copy and use the gradient direction to guide attention toward the primary action.

## Limits

This is a procedural texture, not a scanned film stock or a CSS-only gradient. It does not add grain to your uploaded photographs.

## Current look

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

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

export default function Hero() {
  return (
    <GrainGradient
      className="hero-shader"
      scale={1.2} colorA="#141729ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `colorA`, `colorB`, `colorC`, `colorD`, `scale`, `gradientDirection`, `grainAmount`, `grainFocus`, `glow`, `glowReach`, `vignette`, `flowSpeed`, `grainRate`, `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 (`colorA`, color): Deepest colour of the gradient, also pooled into its darker areas.
- Primary (`colorB`, color): Main colour blended over the base.
- Secondary (`colorC`, color): Second colour that sweeps through the gradient.
- Highlight (`colorD`, color): Highlight colour where the bands overlap, and the light that follows the cursor.
- Gradient scale (`scale`, slider): Density of the colour bands; higher values make them narrower and more numerous.
- Gradient direction (`gradientDirection`, slider): Rotate the main flow of the colour field.
- Grain (`grainAmount`, slider): Strength of the film grain.
- Grain focus (`grainFocus`, slider): Extra grain gathered around the cursor.
- Cursor light (`glow`, slider): Lifts the gradient toward its highlight under the cursor.
- Light reach (`glowReach`, slider): Size of the lit area around the cursor.
- Vignette (`vignette`, slider): How much the edges of the frame darken.
- Flow speed (`flowSpeed`, slider): How fast the colours evolve in place; 0 holds them still.
- Grain evolution (`grainRate`, slider): How quickly the stationary grain pattern evolves. Zero freezes 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

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

## Questions

### Can I rotate the gradient without changing the grain speed?

Yes. Gradient direction controls the color field's angle, while Grain evolution controls texture evolution. Color Looks preserve both settings.

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

This is a procedural texture, not a scanned film stock or a CSS-only gradient. It does not add grain to your uploaded photographs.

### 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)
- [Dither](https://www.aperveil.com/shaders/dither)
- [Aurora Drift](https://www.aperveil.com/shaders/aurora-drift)