# Dot Swell Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. A WebGPU field of glowing points on a rolling swell for React: soft out-of-focus discs up close, crisp points beyond, crests burning toward the horizon. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Dot Swell sets a field of glowing points on a slow, rolling swell and looks low across it toward the horizon, as a camera would. The points nearest you open into soft discs out of focus, the ones at the focus distance are crisp, and the far ones crowd together into a glow. A light from behind catches every crest, so the swell's edges burn as lines of light while the slopes facing you stay dim. Each point takes its color from across the frame, one color on the left and another on the right. Move the pointer and rings run out across the swell. ## Choose it for Open a technology, data or music page on a dark hero: the swell low in the frame, the headline in the dark sky above it. ## Limits Dot Swell draws its own field of points; it does not plot your data, follow your scroll or react to sound. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/dot-swell/edit?look=default) ## Install Dot Swell 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 - Color, left (`colorA`, color): The points' color on one side of the frame. - Color, right (`colorB`, color): Their color on the other side; between, it blends. - Crest light (`crestColor`, color): The light the crests catch from behind. - Background (`background`, color): The dark beyond the swell. - Wave height (`height`, slider): How high the swell rolls. - Wave size (`waveSize`, slider): How long the waves are. - Point spacing (`spacing`, slider): How far apart the points sit on the swell. - Point size (`dotSize`, slider): How large a point is against its spacing. - Horizon (`horizon`, slider): Where the horizon sits, from the top of the frame. - Focus distance (`focus`, slider): How far off the points are sharpest. - Depth of field (`aperture`, slider): How much the points out of focus open into soft discs. - Distance fade (`fog`, slider): How quickly the far swell fades into the dark. - Brightness (`glow`, slider): How bright the points are. - Crest light (`crest`, slider): How strongly the crests catch the light from behind. - Speed (`speed`, slider): How fast the swell rolls. - Pointer response (`interaction`, slider): How strongly the pointer sends rings across the swell. - 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 4.85 ms GPU timestamp median; p95 7.471 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 ### Can I change how blurred the near points are? Yes. Focus distance sets which points are sharp and Depth of field how soft the rest become; at zero every point is crisp. ### How do I make the waves calmer? Wave height and Wave size shape the swell, and Speed sets how fast it rolls; Horizon raises or lowers where it meets the sky. ### What does the pointer do? It sends rings across the swell from where it is; Pointer response sets how strong they are. ### 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 - [Dot Grid](https://www.aperveil.com/shaders/dot-grid) - [Ocean Swell](https://www.aperveil.com/shaders/ocean-swell) - [Stardust Tide](https://www.aperveil.com/shaders/stardust-tide)