Dither waves
Rolling waves drawn in chunky ordered-dither pixels, in four patterns and a palette of your choice, with a glow that follows the pointer.
- element
- dither
- retro
- pixel
- waves
- shader
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Dither waves example
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<axi0-dither-waves cover></axi0-dither-waves>import { DitherWaves } from "./motion/react/DitherWaves";
<DitherWaves /><script setup lang="ts">
import DitherWaves from "./motion/vue/DitherWaves.vue";
</script>
<template>
<DitherWaves />
</template>const fx = document.createElement("axi0-dither-waves");
document.querySelector("#hero").append(fx);The wrappers: DitherWaves.tsx (React, TypeScript) and DitherWaves.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
pixel | 3 | Size of one dither pixel |
pattern | bayer | Dither pattern |
levels | 4 | How many palette steps the waves use |
colors | auto | Colors, comma separated (empty: the palette for the page's theme) |
background | auto | Background color (empty: the theme's) |
speed | 1 | How fast it moves |
theme | auto | Light or dark palette (auto: from the page behind it) |
cover | false | Fill the nearest positioned parent, behind its content |
Accessibility
Decorative: the canvas is aria-hidden and takes no focus; with cover it ignores the pointer, so the content above it stays clickable and readable. Pick palettes with enough contrast behind any text you place over it. Drawn by the shared WebGL runner below device resolution (never more than one pixel per CSS pixel, device pixel ratio capped at 2); it starts when it comes within 300 px of the screen, the frame loop stops off screen and in hidden tabs, and reduced motion draws one still frame with no movement. Without WebGL it shows a still gradient in its own colors.
Size
dither-waves.js is 0.8 KB gzip, with gl.js 2.1 KB and backgrounds-kit.js 3.4 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.