# Silk Bands

Aperveil / Light, shaped for the web.

A satin-like fabric background for React with flowing folds, fine weave and directional sheen. Tune the folds, motion and palette in WebGPU.

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

## What it does

Silk Bands shapes broad, irregular folds with analytic slopes and directional satin reflection. A fine weave adds restrained texture while pointer tug bends the local surface.

## Choose it for

Give a fashion or personal-care launch a tactile opening. Use a generous serif heading and let the wide folds remain visible beside the copy.

## Limits

The shader approximates a fabric appearance. It does not simulate cloth mechanics, garment meshes, gravity or collisions.

## Current look

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

[Open editor](https://www.aperveil.com/shaders/silk-bands/edit?look=default)

## 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 SilkBands from "./SilkBands";

export default function Hero() {
  return (
    <SilkBands
      className="hero-shader"
      bands={10} background="#0a0812ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `background`, `colorA`, `colorB`, `sheenColor`, `bands`, `warp`, `warpScale`, `sheen`, `contrast`, `flowSpeed`, `tug`, `tugReach`, `opacity`, `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

- Background (`background`, color): Colour faintly mixed into the fabric's darkest folds.
- Shadow (`colorA`, color): Deeper of the two dye colours the satin is woven from.
- Light (`colorB`, color): Lighter of the two dye colours.
- Sheen (`sheenColor`, color): Colour of the satin's sheen along the fibres.
- Band count (`bands`, slider): Number of satin bands across the fabric.
- Fold amount (`warp`, slider): How strongly the folds bend the bands.
- Fold scale (`warpScale`, slider): Size of the folds; higher values make them smaller and more frequent.
- Sheen (`sheen`, slider): Brightness of the sheen.
- Contrast (`contrast`, slider): How deep the shadows in the folds are.
- Drift speed (`flowSpeed`, slider): How fast the folds drift; 0 holds them still.
- Cursor tug (`tug`, slider): Displaces where the warp is sampled, so the folds gather toward the cursor.
- Tug reach (`tugReach`, slider): How far around the pointer the fabric is tugged.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

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

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

## Questions

### Is the fabric simulated as a moving cloth mesh?

No. The folds and directional sheen are procedural shading. Band count, Fold amount, Fold scale, Sheen and Drift speed control the appearance without a cloth solver.

### Can I make the satin background less reflective?

Reduce Sheen, then balance the Shadow, Light and Sheen colors in the palette. Band count, Fold amount and Fold scale shape the folds. The fine weave is built into the shading rather than exposed as a separate texture upload.

### What should I not use Silk Bands for?

The shader approximates a fabric appearance. It does not simulate cloth mechanics, garment meshes, gravity or collisions.

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

- [Grain Gradient](https://www.aperveil.com/shaders/grain-gradient)
- [Iridescent Foil](https://www.aperveil.com/shaders/iridescent-foil)
- [Aurora Drift](https://www.aperveil.com/shaders/aurora-drift)