# Pulse Grid

Aperveil / Light, shaped for the web.

Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon.

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

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

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.

## Choose it for

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

## Limits

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.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/pulse-grid/edit?look=default)

## Install

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

- Inner light (`innerColor`, color): One end of each pulse's lit side.
- Outer light (`outerColor`, color): The other end of each pulse's lit side.
- Rims (`rimColor`, color): The cells' rims and the middle of each ring.
- Background (`background`, color): The dark ground.
- Cell size (`cell`, slider): How far apart the cells are, against the frame height.
- Roundness (`corner`, slider): How round the cells' corners are.
- Gap (`gap`, slider): The space between neighboring cells.
- Pulses (`pulses`, slider): How many cells are pulsing at once.
- Color split (`dispersion`, slider): How far the ring's colors separate.
- Glow (`glow`, slider): The soft glow beside rims and rings.
- Speed (`speed`, slider): How fast the pulses run.
- Light reach (`reach`, slider): How many cells round the pointer light up.
- Pointer response (`interaction`, slider): How brightly the pointer lights the cells near it.
- 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

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.

## Questions

### Can I make the cells larger or square?

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

### How do I make the grid calmer or busier?

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.

### What does the pointer do?

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

### 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)
- [LED Bloom](https://www.aperveil.com/shaders/led-bloom)
- [Hex Tiles](https://www.aperveil.com/shaders/hex-tiles)
