Fractal Glass Free WebGPU shader

Colour, through another lens.

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

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 Fractal Glass.

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.

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.

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

Background style

What sits behind the glass: a solid colour, a soft two-colour gradient band, or drifting blooms of colour.

Flute waviness

How much the reeds bend and wave instead of running straight.

Background movement

How fast the colours behind the glass move.

Gradient direction

Turns the gradient or blooms behind the glass, in degrees.

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

FractalGlass usage

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

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.

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.

REFRACT / StudioExample composition

An illustrative colour study