Dither effect: 1-bit dots from smooth tones

<canvas id="dither" style="display:block;margin:auto;image-rendering:pixelated"></canvas>
<script>
const W = 240, H = 135 // the dither works on these pixels; CSS only enlarges them
const canvas = document.getElementById('dither')
canvas.width = W; canvas.height = H
const g = canvas.getContext('2d')
const img = g.createImageData(W, H)
const INK = [20, 20, 24], PAPER = [238, 232, 218]
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
// 8x8 Bayer matrix, built by repeating the 2x2 pattern inside itself
let M = [[0, 2], [3, 1]]
while (M.length < 8) {
  const n = M.length
  M = Array.from({ length: 2 * n }, (_, y) => Array.from({ length: 2 * n },
    (_, x) => 4 * M[y % n][x % n] + [[0, 2], [3, 1]][(y / n) | 0][(x / n) | 0]))
}
// The picture to dither: a soft gradient with a lit ball rolling across it, 0 dark to 1 light
function tone(x, y, t) {
  const cx = W * (0.5 + 0.3 * Math.sin(t * 0.4)), cy = H * 0.52, r = H * 0.34
  const dx = (x - cx) / r, dy = (y - cy) / r, d2 = dx * dx + dy * dy
  if (d2 < 1) return Math.max(0.04, -0.55 * dx - 0.5 * dy + 0.65 * Math.sqrt(1 - d2))
  return 0.12 + 0.62 * (x / W) * (1 - 0.4 * y / H)
}
// Whole device pixels per dot, or the pattern smears into moire
function fit() {
  const k = Math.max(1, Math.floor(Math.min(innerWidth, 960) * devicePixelRatio / W))
  canvas.style.width = W * k / devicePixelRatio + 'px'
  canvas.style.height = H * k / devicePixelRatio + 'px'
}
fit(); addEventListener('resize', fit)
const v = new Float32Array(W * H), half = W >> 1
function frame(ms) {
  const t = still ? 0 : ms / 1000
  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) v[y * W + x] = tone(x, y, t)
  for (let y = 0; y < H; y++) {
    for (let x = 0; x < W; x++) {
      const i = y * W + x
      let on
      if (x < half) {
        on = v[i] > (M[y & 7][x & 7] + 0.5) / 64 // left: ordered, a fixed threshold per pixel
      } else {
        on = v[i] > 0.5 // right: Floyd-Steinberg, round and pass the error on
        const e = v[i] - (on ? 1 : 0)
        if (x + 1 < W) v[i + 1] += e * 7 / 16
        if (y + 1 < H) {
          if (x > half) v[i + W - 1] += e * 3 / 16
          v[i + W] += e * 5 / 16
          if (x + 1 < W) v[i + W + 1] += e / 16
        }
      }
      const c = on ? PAPER : INK, p = i * 4
      img.data[p] = c[0]; img.data[p + 1] = c[1]; img.data[p + 2] = c[2]; img.data[p + 3] = 255
    }
  }
  g.putImageData(img, 0, 0)
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>