Spun Drape Free WebGPU shader

Light pages deserve one too.

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

Open editor Meet the surface

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.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Spun Drape.

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.

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.

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.

Fold scale

Density of the folds; higher values make them smaller and more numerous.

Sheet sweep

Which way the sheet crosses the frame before it leaves it.

Coverage

How much of the frame the drape covers.

Edge softness

How softly the drape's edge fades into the ground.

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

KEEP THE SOURCE. KEEP THE CONTROL.

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 SpunDrape.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.0.tgz ./vendor/aperveil-react-0.1.0.tgz

SpunDrape usage

"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; }

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.

THE SURFACE IN CONTEXT

Made for a real interface.

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.