Moiré Flow Free for Aperveil 1.0 WebGPU shader

Light between the lines.

Two sheer curtains fold before a window, each a fine square weave of round fibres that window light glows through. A WebGPU fabric background for React.

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.

Free for Aperveil 1.0React · Vue · HTMLRaw WGSL

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. Each curtain is a woven mesh: warp and weft threads cross in a square weave, passing over and under each other in turn, each a round fibre that catches the light along its middle. Where the screen can resolve them they are drawn thread by thread; where they are finer than a pixel they blend into smooth, sheer cloth, so they never shimmer. Light from the window passes through both meshes, and the back curtain shows through the front one's open weave. 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 against the front one, as moving your head would. 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 blend into smooth cloth rather than being kept sharp, so on small screens the weave reads as a soft texture.

5.571 ms GPU timestamp median; p95 5.767 ms. 1440x900 @ dpr 1.5; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-12. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Window position

Where the light behind the curtains is centred.

Fold scale

Width of the folds.

Thread density

Threads per screen height. Finer threads blend into smooth, sheer cloth.

Weave angle

Angle between the two curtains' weaves, in degrees.

Color Looks preserve these settings. Open the editor for all 16 controls.

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.1.tgz ./vendor/aperveil-react-0.1.1.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.

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.

Moiré Flow used behind an example interface
INTERVAL / OPTICAL STUDIESExample composition

Form is only half the story

A study in the space between.

A quiet study of layered cloth, window light and the patterns that emerge between them.

Perspective

Cloth, light and the space between.

Collection

Studies in sheer fabric.

Illustrative layout, not a customer project. The image is a still preview of the selected Look.

An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.

Try this surface in the editor

Before you ship.

What this surface does, where it fits, and where it stops.

All shaders

Make Moiré Flow yours.

Open editor