# Iris Satin Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A WebGPU ribbon of iridescent satin for React: it twists round itself across a dark frame, its color walking through a thin film's colors as it turns. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Iris Satin winds one wide ribbon of glossy satin across a dark frame, twisting round itself as it goes: broad and lit where it turns its face to you, a fine bright line where it twists edge-on, the folds behind softly out of focus. Its surface carries a thin film over a pale, pearly base, so with every turn its color walks through your three film colors, as oil on water or a beetle's wing does, and the film's thickness varies a little along the cloth. A row of softboxes is mirrored in its gloss, which grows toward the edges and burns white along the tightest turns. The pointer twists it. ## Choose it for Give a beauty, fashion or jewellery launch a single luminous accent: the ribbon across a dark hero, the words in the space it leaves. ## Limits Iris Satin draws one ribbon of its own; it is not a cloth simulation and does not wrap your content or images. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/iris-satin/edit?look=default) ## Install Iris Satin 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 - Film color 1 (`colorA`, color): One of the three colors the film walks through as the cloth turns. - Film color 2 (`colorB`, color): One of the three colors the film walks through as the cloth turns. - Film color 3 (`colorC`, color): One of the three colors the film walks through as the cloth turns. - Background (`background`, color): The dark the ribbon turns in. - Width (`width`, slider): How wide the ribbon is, against the frame's height. - Twist (`twist`, slider): How many half turns the ribbon twists round itself along a frame's height of its length. - Coil (`coil`, slider): How far the ribbon winds round a spiral as it crosses the frame. - Wave (`wave`, slider): How far the ribbon rises and falls as it crosses the frame. - Fullness (`thickness`, slider): How full the ribbon is: its depth against its width, from a flat band to a round tube. - Film (`film`, slider): How thick the iridescent film is: thicker films walk round the colors faster as the cloth turns. - Film variation (`filmSpread`, slider): How much the film's thickness varies across the cloth. - Iridescence (`iridescence`, slider): How much of the satin's color is the film's: 0 a pale pearl, 1 the film's colors alone. - Gloss (`gloss`, slider): How strongly the satin mirrors the studio's lights. - Light direction (`lightAngle`, slider): Where the studio light comes from, in degrees round the frame. - Scale (`scale`, slider): Size of the cloth in the frame. - Rotation (`rotation`, slider): Turns the whole arrangement, in degrees. - Speed (`speed`, slider): How fast the ribbon winds and its twist travels along it. - Pointer twist (`interaction`, slider): How much the pointer twists the ribbon near it. - Opacity (`opacity`, slider): default 1 - Background opacity (`backgroundOpacity`, 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 4.784 ms GPU timestamp median; p95 5.505 ms. 1440x900 @ dpr 1.25; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-20. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee. ## Questions ### Why does the color change as it turns? The satin carries a thin film; as the ribbon turns, the light crosses the film at another angle and a different color reinforces. Film color 1 to 3 set the colors it walks through, Film and Iridescence how strongly. ### Can I change the ribbon's shape? Yes. Width, Twist, Coil and Wave shape the ribbon, Fullness how much it billows, and Scale and Rotation where it lies in the frame. ### What does the pointer do? It twists the ribbon a little more; Pointer twist sets how far. ### 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) - [Chiffon](https://www.aperveil.com/shaders/chiffon) - [Soap Film](https://www.aperveil.com/shaders/soap-film)