# Moiré Flow

Aperveil / Light, shaped for the web.

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.

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

## 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 blend into smooth cloth rather than being kept sharp, so on small screens the weave reads as a soft texture.

## Current look

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

[Open editor](https://www.aperveil.com/shaders/moire-flow/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, except the placement: the editor keeps the shader centred. 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.1.tgz ./vendor/aperveil-react-0.1.1.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`.

### Vue and Nuxt

```sh
npm install ./vendor/aperveil-runtime-0.1.1.tgz ./vendor/aperveil-vue-0.1.1.tgz
```

```vue
<script setup lang="ts">
import MoireFlow from "./MoireFlow.vue";
</script>

<template>
  <MoireFlow class="hero-shader" :scale="1" color-a="#b9d4dd">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </MoireFlow>
</template>

<!-- .hero-shader { width: 100%; height: 560px; } -->
```

Vue 3.3 or newer. In Nuxt, render it inside <ClientOnly>: WebGPU exists only in the browser. Same props as the React component.

### Plain HTML

```html
<script type="module" src="./aperveil-moire-flow.js"></script>

<aperveil-moire-flow class="hero-shader" scale="1" color-a="#b9d4dd">
  <div slot="fallback" class="hero-shader-fallback"></div>
</aperveil-moire-flow>

<style>
  .hero-shader { display: block; width: 100%; height: 560px; }
</style>
```

No install and no build step: keep the two files of the kit's html folder together.

### WordPress

Download `aperveil-shader-moire-flow.zip` from the editor (Install, then WordPress) and upload it under Plugins, Add New, Upload Plugin. WordPress 6.5 or newer: a plugin with a block that holds your own content in front of the shader, and a shortcode for page builders. In the block editor, add the "Moiré Flow" block (Design) and place your blocks inside it; in a page builder, use the shortcode:

```html
[aperveil_moire_flow height="560px" overlay="20"]
  <h2>Your headline</h2>
  <p>Your text, in front of the shader.</p>
[/aperveil_moire_flow]
```

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 blend into smooth, sheer cloth.
- Weave angle (`angle`, slider): Angle between the two curtains' weaves, in degrees.
- Fold depth (`bend`, slider): How deeply the curtains fold. Steep folds crowd the threads into denser cloth.
- Fibre relief (`contrast`, slider): How round each fibre reads, and how clearly warp and weft pass over and under each other.
- Thread visibility (`detail`, slider): How clearly the square weave of the threads shows. Zero leaves smooth, sheer cloth.
- 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 against the front one, as moving your head would, 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

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.

## Questions

### What is the texture on the cloth?

The weave itself. Each curtain is a square mesh of warp and weft threads, each a round fibre lit along its middle, passing over and under each other as in a plain weave. Thread density sets how fine it is, Fibre relief how round the threads read, and Thread visibility how clearly the weave shows.

### What happens when I move the pointer?

The back curtain shifts a little against the front one, as if you moved your head, so it slides behind the front curtain's open weave; pressing near the front curtain gathers it.

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

Lower Thread visibility for smooth, sheer cloth, or raise Thread density so the threads blend together. Threads finer than a pixel blend 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)