# Moiré Flow

Aperveil / Light, shaped for the web.

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.

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

## What it does

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.

## Choose it for

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.

## Limits

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.

## Current look

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

[Open editor](https://www.aperveil.com/shaders/gyroid-bloom/edit?look=default&scene=landing)

## Landing scene

This preview uses `position`: [0.5,0.5], `scale`: 1. The editor link carries these settings with your Look. Direct editor visits use the product defaults; Reset all restores those defaults.

## 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 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; }
```

Component props: `position`, `colorA`, `colorB`, `colorC`, `background`, `opacity`, `backgroundOpacity`, `scale`, `frequency`, `angle`, `bend`, `contrast`, `detail`, `glow`, `motion`, `interaction`, `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

- Window position (`position`, xy): Where the light behind the curtains is centred.
- Front curtain (`colorA`, color): Colour of the front curtain.
- Back curtain (`colorB`, color): Colour of the back curtain.
- Window light (`colorC`, color): Colour of the window light behind the curtains.
- Background (`background`, color): Colour of the dark room behind the curtains.
- Opacity (`opacity`, slider): default 1
- Background opacity (`backgroundOpacity`, slider): default 1
- Fold scale (`scale`, slider): Width of the folds.
- Thread density (`frequency`, slider): Threads per screen height. Finer threads leave only the moiré.
- Weave angle (`angle`, slider): Angle between the two curtains' threads, in degrees: smaller angles give broader bands.
- Fold depth (`bend`, slider): How deeply the curtains fold. Steep folds crowd the threads and bend the bands.
- Band contrast (`contrast`, slider): Strength of the moiré between the two sheets.
- Thread visibility (`detail`, slider): How visible the individual threads are.
- Window light (`glow`, slider): Light behind the curtains.
- Wind (`motion`, slider): How fast the folds billow and drift.
- Pointer parallax (`interaction`, slider): Moving the pointer shifts the back curtain by a hair, which the moiré magnifies into sweeping bands, and presses into the front one.

## 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

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

## Questions

### Where do the moving bands come from?

From the two curtains' threads. Light passing both sheets is the product of their two thread patterns, and that product contains a slow difference term: the moiré. Because each curtain's threads are spaced along its own folded cloth, the bands bend and crowd with the folds and drift as the wind moves them. Weave angle, Thread density and Fold depth change their structure; Color Looks change only colours.

### Why do the bands sweep across when I move the pointer?

The pointer shifts the back curtain by about a hundredth of the screen, as if you moved your head. Moiré magnifies small displacements: a shift of one thread spacing moves a band by a whole band width, so a tiny parallax sweeps the bands across the folds.

### What makes it look three-dimensional?

The folds are real surfaces. Where the cloth turns away its threads crowd and it reads denser; room light lights one side of each fold and leaves the other in shade; valleys sit farther back; the hem of the front curtain passes in front of the back one and catches the window light.

### Can I soften the fine lines?

Lower Thread visibility. The moiré between the two curtains stays, because it is the slow difference of the threads, not the threads themselves. Threads finer than a pixel are averaged automatically.

### 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

- [Metaballs](https://www.aperveil.com/shaders/metaballs)
- [Glazed Porcelain](https://www.aperveil.com/shaders/glazed-porcelain)
- [Glass Facets](https://www.aperveil.com/shaders/glass-facets)