Pixel sorting: how it works, with code

<canvas id="sort" style="display:block;width:100%;max-width:960px;margin:auto;background:#120c1f"></canvas>
<script>
const W = 480, H = 300 // sort a small buffer once, let CSS scale it up
const THRESHOLD = 0.3 // pixels brighter than this (0 to 1) get sorted
const VERTICAL = true // false sorts along rows instead of columns
const canvas = document.getElementById('sort')
canvas.width = W; canvas.height = H
const g = canvas.getContext('2d')
const still = matchMedia('(prefers-reduced-motion: reduce)').matches

// A picture to sort, painted here so there is no image to load
function paint(c) {
  const horizon = H * 0.6
  const sky = c.createLinearGradient(0, 0, 0, horizon)
  sky.addColorStop(0, '#1d1543'); sky.addColorStop(1, '#ff8a5c')
  c.fillStyle = sky; c.fillRect(0, 0, W, horizon)
  for (let i = 0; i < 18; i++) { // thin bands of lit cloud
    c.fillStyle = 'rgba(255,200,170,' + (0.15 + Math.random() * 0.35) + ')'
    c.fillRect(Math.random() * W - 60, H * (0.08 + Math.random() * 0.4), 60 + Math.random() * 200, 2 + Math.random() * 4)
  }
  c.fillStyle = '#ffe2b8'
  c.beginPath(); c.arc(W * 0.62, horizon - H * 0.12, H * 0.1, 0, Math.PI * 2); c.fill()
  const lake = c.createLinearGradient(0, horizon, 0, H)
  lake.addColorStop(0, '#d9645a'); lake.addColorStop(1, '#1d1543')
  c.fillStyle = lake; c.fillRect(0, horizon, W, H - horizon)
  c.fillStyle = '#ffe2b8'
  for (let y = horizon + 4; y < H; y += 7) c.fillRect(W * 0.62 - 30 + Math.random() * 20, y, 22, 2)
  const hills = ['#a8506a', '#6e2f5e', '#3d1d45']
  hills.forEach((color, i) => {
    c.fillStyle = color
    c.beginPath(); c.moveTo(0, horizon)
    for (let x = 0; x <= W; x += 8) {
      const y = horizon - 18 - i * 14 - Math.sin(x * (0.012 + i * 0.006) + i * 2) * (14 + i * 6)
      c.lineTo(x, y)
    }
    c.lineTo(W, horizon); c.closePath(); c.fill()
  })
  const img = c.getImageData(0, 0, W, H)
  for (let p = 0; p < img.data.length; p += 4) { // a little grain gives the sort something to order
    const n = (Math.random() - 0.5) * 24
    img.data[p] += n; img.data[p + 1] += n; img.data[p + 2] += n
  }
  return img
}

function sortSpans(img) {
  const d = img.data, out = new Uint8ClampedArray(d)
  const lines = VERTICAL ? W : H, len = VERTICAL ? H : W
  const at = (line, i) => (VERTICAL ? i * W + line : line * W + i) * 4
  const lum = (p) => (0.2126 * d[p] + 0.7152 * d[p + 1] + 0.0722 * d[p + 2]) / 255
  for (let line = 0; line < lines; line++) {
    let i = 0
    while (i < len) {
      if (lum(at(line, i)) <= THRESHOLD) { i++; continue } // 1. mask: dark pixels stay put
      let end = i // 2. find where this bright span ends
      while (end < len && lum(at(line, end)) > THRESHOLD) end++
      const span = []
      for (let k = i; k < end; k++) { const p = at(line, k); span.push([lum(p), d[p], d[p + 1], d[p + 2]]) }
      span.sort((a, b) => b[0] - a[0]) // 3. sort it, brightest first
      span.forEach((s, k) => { const p = at(line, i + k); out[p] = s[1]; out[p + 1] = s[2]; out[p + 2] = s[3] }) // 4. write back
      i = end
    }
  }
  return new ImageData(out, W, H)
}

const layer = (img) => { const c = document.createElement('canvas'); c.width = W; c.height = H; c.getContext('2d').putImageData(img, 0, 0); return c }
const source = paint(g)
const before = layer(source), after = layer(sortSpans(source)) // the sort runs once, not every frame

const CYCLE = 7 // seconds: sweep in, hold, sweep out, hold
const ease = (x) => x < 0 ? 0 : x > 1 ? 1 : x * x * (3 - 2 * x)
function frame(t) {
  const s = (t / 1000) % CYCLE
  const k = still ? 1 : s < 3.5 ? ease((s - 0.3) / 1.5) : 1 - ease((s - 5) / 1.5)
  const x = Math.round(W * k)
  g.drawImage(before, 0, 0)
  if (x > 0) g.drawImage(after, 0, 0, x, H, 0, 0, x, H)
  if (x > 0 && x < W) { g.fillStyle = 'rgba(255,240,220,0.8)'; g.fillRect(x - 1, 0, 1, H) }
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>