Wave turns rolling motion into a crisp pixel grid over a transparent background. Use it as an overlay when the surrounding page colour should remain visible, rather than as an opaque full-page gradient. Its stepped edges create a pixel-art treatment distinct from the softer Waves shader. Tune the live controls at the intended display size so the grid keeps its character. Check the foreground colour against the surface underneath, especially when moving between light and dark sections.
How this shader works
Wave turns rolling motion into a crisp pixel grid on a transparent background. Use it as an overlay where the page colour should show through, rather than as an opaque full-page gradient. Wave height, Wave frequency and Fill level shape the wave, and Dither spread and Pixel size set the pixel-art treatment. Its stepped edges set it apart from the softer Waves shader.
Tips
- Fill level sets how much of the canvas the wave covers.
- Pixel size sets the size of each square. Tune it at the size it will be shown.
- Check Wave colour against the surface underneath, especially across light and dark sections.
- Dither spread sets how wide the dithered edge of the wave is.
Questions
How do I add a pixel-art wave to the bottom of a section?
Open Wave, set Fill level and Wave height, and choose a Wave colour that matches the next section. Export it as an HTML file or a React or Svelte component and place it over the page.
Is the background transparent?
Yes, in the HTML, React and Svelte exports. An MP4 video export is opaque.
Preview and customize in the browser. Exports require membership.