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

Pulse Grid: A grid that answers you.

A WebGPU grid of rounded cells for React that pulse with rings of light, and light up along their rims around the pointer.

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 Pulse Grid.

Pulse Grid lays a dark grid of small rounded cells across the page. Now and then a cell lets out light: a ring opening from a point to its rounded edge, two rings one after the other, or an arc running once round its rim, each split between two colors. Move the pointer and the cells near it light along their rims, merging into one glowing shape that follows you; take it away and the grid falls quiet again.

Pulse Grid is decoration behind your content; its cells are not buttons or a data visualisation, and it does not lay out your own grid.

0.524 ms GPU timestamp median; p95 0.983 ms. 1440x900 @ dpr 1.5; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-19. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

01

Cell size

How far apart the cells are, against the frame height.

02

Roundness

How round the cells' corners are.

03

Gap

The space between neighboring cells.

04

Pulses

How many cells are pulsing at once.

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

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

THE SURFACE IN CONTEXT

Made for a real interface.

Sit behind a features section, a developer tool or a pricing table, where the pointer's light rewards exploring.

Pulse Grid used behind an example interface
GRIDLINEExample composition

Developer platform

Every request, accounted for.

An illustrative product page with the grid behind its features.

Latency

12 ms

Regions

Twenty

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

A FEW USEFUL DETAILS

Before you ship.

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

Yes. Cell size sets their pitch, Roundness how round their corners are and Gap the space between them.

Pulses sets how many cells are pulsing at once and Speed how fast; at the lowest the grid stays almost still until the pointer moves.

It lights the rims of the cells near it; Light reach sets how many cells, Pointer response how brightly.

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 GridLED Bloom shader previewLED BloomHex Tiles shader previewHex Tiles

YOUR COLORS. YOUR CONTEXT.

Make Pulse Grid yours.

Open editor