# Fractal Glass

Aperveil / Light, shaped for the web.

Fine WebGPU glass channels fragment vivid moving colours against a dark ground. Tune reed density, refraction and gentle colour flow.

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

## What it does

A continuous reeded glass surface refracts a slowly moving colour field. Smooth channel joins and pixel-filtered reflections avoid hard seams. Move the pointer to bend and ripple the glass locally; choose Solid, Gradient or Color Bloom behind it.

## Choose it for

Frame a studio introduction, a collection launch or an editorial cover with luminous colour behind fine reeded glass. Keep interface text in HTML above the surface.

## Limits

This is a procedural colour-and-glass surface, not physical fractal geometry or path tracing. It does not accept text, images or arbitrary HTML behind the canvas.

## Current look

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

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

export default function Hero() {
  return (
    <FractalGlass
      className="hero-shader"
      waviness={0.55} background="#050913"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `backdrop`, `waviness`, `backgroundMotion`, `backgroundAngle`, `scale`, `detail`, `thickness`, `refraction`, `roughness`, `motion`, `interaction`, `opacity`, `background`, `colorA`, `colorB`, `colorC`, `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

- Background style (`backdrop`, select): What sits behind the glass: a solid colour, a soft two-colour gradient band, or drifting blooms of colour.
- Flute waviness (`waviness`, slider): How much the reeds bend and wave instead of running straight.
- Background movement (`backgroundMotion`, slider): How fast the colours behind the glass move.
- Gradient direction (`backgroundAngle`, slider): Turns the gradient or blooms behind the glass, in degrees.
- Flute frequency (`scale`, slider): Number of reeds across the surface; higher values make them finer.
- Colour flow detail (`detail`, slider): How much the colours behind the glass warp and flow.
- Thickness (`thickness`, slider): Thickness of the glass: stronger bending and a slightly deeper tint.
- Refraction (`refraction`, slider): How strongly each reed bends the colours behind it.
- Frost (`roughness`, slider): Frosting of the glass, which softens the colours seen through it.
- Drift (`motion`, slider): Speed of the reeds' slow wave; 0 holds them still.
- Pointer response (`interaction`, slider): How strongly the pointer bends the reeds near it.
- Opacity (`opacity`, slider): default 1
- Background (`background`, color): default "#050913"
- First colour (`colorA`, color): First colour behind the glass.
- Second colour (`colorB`, color): Second colour behind the glass.
- Third colour (`colorC`, color): Third colour, used by the blooms backdrop.

## Compatibility

WebGPU rendering requires a supported browser and secure context. Without WebGPU this landing shows a static colour fallback. 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

### What sits behind the glass?

Choose a solid colour, a two-colour gradient or the moving three-colour Color Bloom. Background motion and Color Looks remain independent of glass motion.

### How does the pointer affect it?

The pointer bends nearby glass channels into soft waves. The response fades outside the canvas. Pointer response at zero disables it.

### Can I place text on the page?

Place normal HTML headings above the canvas. Text is not an input to this shader and is not refracted by it.

### What happens without WebGPU?

Without WebGPU this landing shows a static colour fallback. Live rendering requires WebGPU; supply 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

- [Glass Flutes](https://www.aperveil.com/shaders/glass-flutes)
- [Liquid Orb](https://www.aperveil.com/shaders/liquid-orb)
- [Glass Morph](https://www.aperveil.com/shaders/glass-morph)