# Pleat Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A pleated satin background for React: sharp folds under two traveling lights, the colored one catching the folds' edges and following the pointer, in WebGPU. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Pleat folds a satin sheet into sharp, parallel creases that lean across the frame. Two lights cross it in turn: a white one from high above, under which the satin is one quiet tone and each crease falls into a narrow dark V, and a colored one that comes in low, so the flat satin catches little of it while the edge of every fold lights up as a bright line with soft shoulders. The creases swell and taper along their length and drift slowly sideways. The pointer draws the colored light toward itself. ## Choose it for Give a fashion, interiors or luxury launch a tactile, quiet hero: the folds read as material, and the colored light gives the page a slow pulse without competing with the copy. ## Limits Pleat is shading on a pleated surface, not a cloth simulation: the folds do not hang, collide or respond to gravity, and it does not drape your own images. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/pleat/edit?look=default) ## Install Pleat is part of Aperveil Shaders and Aperveil Pro, coming soon. Its live demo is open; installation and downloads open in a later release. Free shaders install today: see the [Aperveil integration guide](https://www.aperveil.com/docs). ## Controls - Satin (`satinColor`, color): The satin where the white light falls full on it. - Colored light (`litColor`, color): The satin where the colored light falls full on it. - Shadow (`shadowColor`, color): The satin where neither light reaches; the creases go darker still. - Pleat width (`pleatWidth`, slider): The distance from crease to crease, across the frame, in frame heights. - Lean (`lean`, slider): How far the creases lean from vertical, in degrees; positive leans them right going down. - Crease depth (`depth`, slider): How steeply the satin falls into each crease. - Crease width (`creaseWidth`, slider): How wide each crease's fold is. - Taper (`taper`, slider): How much the creases sharpen toward the bottom of the frame. - Sheen (`sheen`, slider): How brightly the folds' edges catch the colored light. - Light size (`lightSize`, slider): How broad the two lights are and how high they stand over the satin. - Speed (`flowSpeed`, slider): How fast the lights travel and the creases drift. - Pointer light (`interaction`, slider): How strongly the colored light follows the pointer. - Opacity (`opacity`, slider): default 1 ## Compatibility WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). 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. ## Performance 0.786 ms GPU timestamp median; p95 3.015 ms. 1440x900 @ dpr 2; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-16. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee. ## Questions ### Can I change the angle and size of the pleats? Yes. Lean sets how far the creases lean from vertical, Pleat width the distance between them, Crease depth and Crease width the shape of each fold and Taper how much they sharpen toward the bottom. ### Why do the folds look dark in one light and bright in the other? The white light comes from high above, so the crease walls turn away from it and fall dark. The colored light comes in low, so it misses the flat satin and catches the edge of each fold. Sheen sets how brightly the edges catch it. ### What does the pointer do? It draws the colored light toward itself, like a torch over the folds; Pointer light sets how strongly. ### 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 Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## License Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## Related shaders - [Silk Bands](https://www.aperveil.com/shaders/silk-bands) - [Spun Drape](https://www.aperveil.com/shaders/spun-drape) - [Chiffon](https://www.aperveil.com/shaders/chiffon)