# Stardust Tide

Aperveil / Light, shaped for the web.

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

A WebGPU swell of glowing dust for React: millions of fine grains ride long, slow waves, burning bright along the crests, the nearest soft out of focus.

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

## What it does

Stardust Tide builds a rolling swell out of dust, seen from high and far off through a long lens, so three or four curling crests cross the frame. Millions of fine grains ride the long, slow waves: dim on the slopes facing you, crowding into bright lines along the crests where you see the surface edge-on, with a soft haze over them. A few grains glint brighter than the rest, a few drift in the dark above, and the nearest open into soft discs out of focus. Move the pointer and the swell rises under it.

## Choose it for

Set a cinematic mood for a launch, a music release or a space and science page: the swell across the lower frame, the headline in the dark above.

## Limits

Stardust Tide draws its own grains; it is not a particle system you can feed, and it does not react to sound or scroll.

## Current look

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

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

## Install

Stardust Tide 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

- Dust (`colorA`, color): The grains' color on the slopes, away from the light.
- Crests (`colorB`, color): The color the crests burn to, where the grains crowd edge-on.
- Glints (`colorC`, color): The brighter grains that glint, and those drifting in the air.
- Background (`background`, color): The dark the swell rolls through.
- Density (`density`, slider): How many grains make up the surface.
- Grain size (`grainSize`, slider): How large each grain is.
- Crest glow (`rim`, slider): How brightly the crests burn where the grains crowd edge-on.
- Drifting grains (`floaters`, slider): How many grains drift in the air above the swell.
- Wave height (`height`, slider): How high the waves rise.
- Wave size (`waveSize`, slider): How long the waves are.
- Focus (`focus`, slider): How far away the lens is focused, from near to far.
- Blur (`aperture`, slider): How strongly what is out of focus blurs.
- Speed (`speed`, slider): How fast the swell rolls.
- Pointer response (`interaction`, slider): How high the pointer raises 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

6.16 ms GPU timestamp median; p95 6.291 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 make the dust finer or denser?

Yes. Density sets how many grains there are, Grain size how large, Crest glow how brightly the crests burn and Drifting grains how many float above.

### How do I change the blur?

Focus sets which distance is sharp and Blur how soft the rest becomes; at zero every grain is crisp.

### What does the pointer do?

It raises the swell under itself; Pointer response sets how high.

### 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 Swell](https://www.aperveil.com/shaders/dot-swell)
- [Starfield](https://www.aperveil.com/shaders/starfield)
- [Cymatic Dust](https://www.aperveil.com/shaders/cymatic-dust)