Moiré Flow Free WebGPU shader

Light between the lines.

Two sheer curtains fold in the wind before a window, and their threads interfere into moiré bands that follow every fold. A WebGPU moiré background for React.

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 Moiré Flow.

Two sheer curtains hang one behind the other before a window. Each folds the way cloth does: its surface tilts along its own length and never stretches, so its screen position and depth have closed forms in Bessel functions, solved for each pixel by Newton's method. The threads are spaced evenly along the cloth, so on screen they crowd where a fold turns away, and the cloth there reads denser and more coloured, as sheer fabric does. Light from the window passes through both sheets: the product of their two thread gratings, expanded so each carrier is filtered to the pixel while their slow difference survives. That difference is the moiré: broad bands that follow the folds and drift as the wind moves them. Room light shades one side of every fold, the valleys sit farther back, a satin sheen runs along the crests, and the front curtain's hem passes in front of the back one, catching the window light on its edge and shading the cloth behind it. Moving the pointer shifts the back curtain by a hair, as moving your head would; moiré magnifies that into bands sweeping across the folds. Pressing near the front curtain gathers its threads.

This is a cloth-and-light model, not a cloth simulation: the folds follow authored waves rather than solved dynamics, the curtains do not collide, and cloth never folds back over itself except at the hem. Threads finer than a pixel are averaged to their mean rather than kept sharp, so on small screens only the moiré remains.

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

Window position

Where the light behind the curtains is centred.

Fold scale

Width of the folds.

Thread density

Threads per screen height. Finer threads leave only the moiré.

Weave angle

Angle between the two curtains' threads, in degrees: smaller angles give broader bands.

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 MoireFlow.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

MoireFlow usage

"use client";

import MoireFlow from "./MoireFlow";

export default function Hero() {
  return (
    <MoireFlow
      className="hero-shader"
      scale={1} colorA="#b9d4dd"
      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, fashion or interiors brand, a music release or a gallery with a quiet, dimensional background. Lower Thread visibility for a soft voile, raise Fold depth for dramatic drapery, and keep type over the darker side away from the window.