# Bloom Sweep Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A layered satin background for React: rounded layers stacked like opening petals sweep out of the corner of a light ground, with soft shadows, in WebGPU. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Bloom Sweep stacks rounded satin layers round a point just off the lower right of the frame, each a little smaller than the one behind it, so they show as nested crescents that open like the petals of a bloom. Each layer is barely domed with a rim that rolls under; a soft key light from the upper left sends a broad satin sheen round its rim, and a fine bright line runs along its edge. Where one layer lies on the next it lays a soft plum shade, so every layer reads as its own sheet. The rims ripple gently and the layers breathe one after another. ## Choose it for Open a beauty, fragrance or lifestyle launch on a light ground: the bloom rises from the corner and leaves the upper left clear for the heading. ## Limits Bloom Sweep is authored satin layers with a fixed studio light, not a physical cloth or flower simulation, and it does not wrap your own images. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/bloom-sweep/edit?look=default) ## Install Bloom Sweep 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 - Back layer (`colorA`, color): The color of the largest layer, at the back. - Second color (`colorB`, color): The next layers forward take this color. - Third color (`colorC`, color): The layers further forward. - Front color (`colorD`, color): The smallest, front layer, and the wash along the foot of the frame. - Shadow (`shadowColor`, color): What the tucks between layers, and the faces turned from the light, fall into. - Sheen (`sheenColor`, color): The color of the satin highlight and the bright line along each hem. - Background (`background`, color): The ground behind the layers. - Layers (`sheets`, slider): How many rounded layers are stacked in the bloom. - Spacing (`width`, slider): How far apart the layers' rims sit. - Radius (`radius`, slider): The size of the back layer, in frame heights; the others follow it. - Centre (`origin`, xy): The point the layers are stacked round, across and down the frame; just off its lower right by default. - Sheen (`sheen`, slider): How strongly the satin catches the light. - Gloss (`gloss`, slider): Broad satin at 0, a tight, glassy highlight at 1. - Twist (`twist`, slider): How much each layer's rim tilts along its length, which sends the satin highlight round it. - Creases (`folds`, slider): Soft creases running round the layers. - Depth of field (`softness`, slider): How soft the back layers' rims are, as if out of focus. - Speed (`flowSpeed`, slider): How fast the layers breathe and their highlights slide. - Undulation (`undulation`, slider): How much the layers' rims ripple. - Pointer press (`interaction`, slider): How far the pointer presses the layer it is over, tilting its sheen. - Opacity (`opacity`, slider): default 1 - Background opacity (`backgroundOpacity`, slider): Fade the background independently for transparent overlays. ## 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.26 ms GPU timestamp median; p95 8.716 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 ### How many layers are there? Five by default; Layers sets from one to seven. Spacing sets how far apart their rims sit and Radius the size of the bloom. ### Can I move the bloom away from the corner? Yes. Center moves the point the layers are stacked round; by default it sits just off the lower right, leaving the upper left clear for copy. ### What does the pointer do? It presses the layer it is over inward and tilts its sheen; Pointer press 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 - [Chiffon](https://www.aperveil.com/shaders/chiffon) - [Silk Bands](https://www.aperveil.com/shaders/silk-bands) - [Spun Drape](https://www.aperveil.com/shaders/spun-drape)