Skip to content
Pro · Coming soon for Aperveil 1.0 WebGPU shader

Dot Swell: A swell of light, point by point.

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.

Open editorMeet the surface

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.

Color Looks

A surface, not a screenshot.
Pro · Coming soon for Aperveil 1.0React · Vue · HTML · WordPress · FramerRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Dot Swell.

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.

Dot Swell draws its own field of points; it does not plot your data, follow your scroll or react to sound.

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.

01

Wave height

How high the swell rolls.

02

Wave size

How long the waves are.

03

Point spacing

How far apart the points sit on the swell.

04

Point size

How large a point is against its spacing.

Color Looks preserve these settings. Open the editor for all 18 controls.

THE SURFACE IN CONTEXT

Made for a real interface.

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.

Dot Swell used behind an example interface
TIDELINEExample composition

Data in motion

See the whole wave.

An illustrative product page with the swell of points under the headline.

Signals

Live

Sources

Forty

Illustrative layout, not a customer project. The image is a still preview of the selected Look.

An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.

Try this surface in the editor

APERVEIL PRO

Coming soon.

The live demo is open above and in the editor. Editing its settings and downloading it open with Aperveil Pro in a later release. Free shaders and blocks are available now.

Explore shaders
Markdown guide

A FEW USEFUL DETAILS

Before you ship.

What this surface does, where it fits, and where it stops.

Yes. Focus distance sets which points are sharp and Depth of field how soft the rest become; at zero every point is crisp.

Wave height and Wave size shape the swell, and Speed sets how fast it rolls; Horizon raises or lowers where it meets the sky.

It sends rings across the swell from where it is; Pointer response sets how strong they are.

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.

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.

ANOTHER WAY TO SEE IT

All grids & tiles shaders
Dot Grid shader previewDot GridOcean Swell shader previewOcean SwellStardust Tide shader previewStardust Tide

YOUR COLORS. YOUR CONTEXT.

Make Dot Swell yours.

Open editor