# Spun Drape

Aperveil / Light, shaped for the web.

Soft, irregular WebGPU satin folds on a light ground. Subtle micro-weave, directional sheen and slowly evolving folds create a restrained fabric background.

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

## What it does

Spun Drape preserves an irregular folded sheet, with analytic surface slopes and a fibre-aligned sheen. Fine crossing threads are filtered to the pixel footprint and kept low-contrast, so the material reads through light and broad folds rather than dark grain lines. The pointer moves the studio light.

## Choose it for

Use it where the page is already light and a dark hero would be wrong: editorial covers, beauty and fashion, stationery, a product page with a lot of white space. Set the copy on the open ground beside the sweep and let the sheet run out of frame.

## Limits

An art-directed procedural cloth surface, not a measured fabric BRDF or a cloth physics simulation. It does not resolve yarn geometry, self-shadowing, collisions or multiple scattering.

## Current look

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

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

## Landing scene

This preview uses `coverage`: 0.34, `sweep`: 0.62. 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 SpunDrape from "./SpunDrape";

export default function Hero() {
  return (
    <SpunDrape
      className="hero-shader"
      scale={2.4} colorSheet="#eef0f4"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `scale`, `sweep`, `coverage`, `edgeSoftness`, `warp`, `detail`, `relief`, `filament`, `filamentDepth`, `sheen`, `sheenWidth`, `shadeDepth`, `lightAngle`, `lightHeight`, `drift`, `interaction`, `colorSheet`, `colorSheen`, `colorShade`, `background`, `opacity`, `backgroundOpacity`, `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

- Fold scale (`scale`, slider): Density of the folds; higher values make them smaller and more numerous.
- Sheet sweep (`sweep`, slider): Which way the sheet crosses the frame before it leaves it.
- Coverage (`coverage`, slider): How much of the frame the drape covers.
- Edge softness (`edgeSoftness`, slider): How softly the drape's edge fades into the ground.
- Fold warp (`warp`, slider): How much the folds bend and twist.
- Fold detail (`detail`, slider): Amount of finer folds riding on the broad ones.
- Relief (`relief`, slider): How steeply the height field tilts the surface normal, which sets how hard the folds read.
- Weave density (`filament`, slider): Contours of the height field per unit. They crowd where the sheet steepens, exactly as contour lines do.
- Micro-weave contrast (`filamentDepth`, slider): Contrast of the fine woven texture.
- Sheen (`sheen`, slider): Brightness of the satin highlights.
- Sheen tightness (`sheenWidth`, slider): How narrow and sharp the highlights are; higher values tighten them.
- Shade depth (`shadeDepth`, slider): How far the folds fall below the ground. On a light ground this carries the form, not the highlight.
- Light angle (`lightAngle`, slider): Direction of the light, in degrees.
- Light height (`lightHeight`, slider): How high the light sits; low lights rake across the folds.
- Drift (`drift`, slider): How fast the folds travel; 0 holds them still.
- Pointer light (`interaction`, slider): How far the pointer walks the studio light around the sheet.
- Sheet (`colorSheet`, color): Colour of the fabric.
- Sheen (`colorSheen`, color): Colour of the satin highlights.
- Fold shade (`colorShade`, color): Colour of the deep fold shadows.
- Background (`background`, color): Colour of the ground around the drape.
- Opacity (`opacity`, slider): default 1
- Background opacity (`backgroundOpacity`, slider): default 1

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

4.751 ms GPU timestamp median; p95 6.029 ms. 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-18. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Why does this work on a light background?

The sheet uses shaded folds and a restrained highlight instead of additive glow on black. A soft highlight shoulder retains detail on pale palettes.

### Can I still make it dark?

Yes. Background, Sheet, Sheen and Fold shade are all Look colours, so a dark ground with a bright sheet is one palette away. The shading model does not change; only what it is shading.

### Why is the weave so subtle?

The weave supplies a small material variation, not dark contour lines. Fine threads fade into their average when the pixel footprint can no longer resolve them. Use Micro-weave contrast to adjust their strength.

### Why is the highlight a streak and not a spot?

A fibre scatters light in a cone about its own axis rather than about a surface normal, so the reflection spreads across the filaments instead of pooling. That is also why moving the light slides the streak along the folds rather than dragging a dot.

### What does the cursor do?

It walks the studio light around the sheet. On an anisotropic material that is the control that matters, because the sheen moves across the folds rather than brightening in place. Set Pointer light to zero for a fixed key.

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

- [Silk Bands](https://www.aperveil.com/shaders/silk-bands)
- [Brushed Titanium](https://www.aperveil.com/shaders/brushed-titanium)
- [Velvet Atelier](https://www.aperveil.com/shaders/velvet-atelier)