# Lumen Folds Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A WebGPU glossy surface of ridges on rolling swells for React: vivid lines of light close into loops and split into color where the swells turn them. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Lumen Folds is a glossy, lacquer-dark surface of fine parallel ridges riding on broad swells, seen in perspective. One panel of light lies on every ridge as a glowing line, one on each flank; where a swell tilts a ridge away, its two lines meet and close in a rounded loop that fills with light and splits into color at its tip. Between the lines the gloss reflects a second light and the horizon in another color, so every ridge shows its form. The swells roll on, so the loops reach toward you and draw back; the pointer raises a soft mound in the surface. ## Choose it for Set a quiet, premium mood behind a headline: the lines in the upper part of the frame, the darker surface below for text. ## Limits Lumen Folds draws its own surface and light; it does not reflect your page or render 3D models. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/lumen-folds/edit?look=default&scene=landing) ## Landing scene This preview uses `horizon`: 0.8. The editor link carries these settings with your Look. Direct editor visits use the product defaults; Reset all restores those defaults. ## Install Lumen Folds 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 - Light (`lineColor`, color): The lines of light, running to white in their cores. - Glow (`glowColor`, color): The panel's glow: round the lines, inside the loops and spilling over the ridges. - Split 1 (`colorA`, color): One color the line splits into where it turns hardest. - Split 2 (`colorB`, color): The other color it splits into. - Reflection (`colorC`, color): What the gloss reflects besides the panel: the horizon and a second soft light standing opposite. - Background (`background`, color): The surface's dark ground. - Ridge spacing (`spacing`, slider): How far apart the fine ridges are. - Ridge height (`ridge`, slider): How tall the fine ridges are. - Swell height (`swell`, slider): How high the broad swells roll; they make the lines close into loops. - Swell size (`swellSize`, slider): How long the broad swells are. - Reach (`reach`, slider): How far toward you the ridges run before they die away and their lines close. - Horizon (`horizon`, slider): Where the surface meets the sky, above the frame. - Angle (`angle`, slider): How the surface is turned across the frame (radians). - View (`yaw`, slider): How far the view turns across the ridges; their vanishing point moves off to the side. - Ridge direction (`heading`, slider): Which way the ridges run across the surface (radians). - Light angle (`lean`, slider): Where the light panel stands: it moves the lines across the ridges, and how far they reach before they close. - Sharpness (`sharpness`, slider): How fine the lines of light are. - Fill (`fill`, slider): How much soft light fills each loop, inside its line. - Color split (`dispersion`, slider): How far the lines part into color where they turn. - Gloss (`sheen`, slider): How strongly the glossy surface reflects its surroundings; this is what shows its form between the lines. - Grain (`grain`, slider): An optional fine stipple in the light, as on a print. - Grain size (`grainSize`, slider): How coarse the grain is, in pixels. - Speed (`speed`, slider): How fast the swells roll. - Pointer response (`interaction`, slider): How high a mound the pointer raises. - Opacity (`opacity`, slider): Opacity of the whole effect, including its background. - Background opacity (`backgroundOpacity`, slider): Fade the background on its own, for a transparent overlay. ## 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 1.901 ms GPU timestamp median; p95 2.949 ms. 1440x900 @ dpr 1.5; 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 do the lines close into loops? They are reflections of one panel of light. Its edge shows as a line on each flank of a ridge; where a swell tilts the ridge too far, the two lines meet and close, and the panel's face fills the loop with a softer light. ### How do I change the waves? Swell height and Swell size shape the broad waves, Ridge spacing and Ridge height the fine ridges, and Reach how far toward you the ridges run. ### What does the pointer do? It raises a soft mound in the surface, bending the lines round it; Pointer response sets how high. ### 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 - [Line Waves](https://www.aperveil.com/shaders/line-waves) - [Topo Lines](https://www.aperveil.com/shaders/topo-lines) - [Ocean Swell](https://www.aperveil.com/shaders/ocean-swell)