Particle effect for a website: how it works, with code

<canvas id="dots" style="position:fixed;inset:0;width:100%;height:100%;background:#071014"></canvas>
<script>
const TEXT = 'Particles' // the word the particles build
const GAP = 6, REACH = 90 // CSS px between particles, pointer radius
const canvas = document.getElementById('dots')
const g = canvas.getContext('2d')
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
let w, h, dpr, parts = []
const pointer = { x: -1e4, y: -1e4 }

function build() {
  dpr = Math.min(devicePixelRatio, 2)
  w = canvas.width = innerWidth * dpr
  h = canvas.height = innerHeight * dpr
  // 1. draw the word off screen and read its pixels
  const off = document.createElement('canvas'), o = off.getContext('2d')
  off.width = w; off.height = h
  o.font = '800 ' + Math.min(w / (TEXT.length * 0.62), h * 0.4) + 'px system-ui, sans-serif'
  o.textAlign = 'center'; o.textBaseline = 'middle'
  o.fillText(TEXT, w / 2, h / 2)
  const px = o.getImageData(0, 0, w, h).data, step = Math.round(GAP * dpr)
  // 2. one particle per filled grid cell, starting scattered
  parts = []
  for (let y = 0; y < h; y += step)
    for (let x = 0; x < w; x += step)
      if (px[(y * w + x) * 4 + 3] > 128) parts.push({
        hx: x, hy: y, // home
        x: still ? x : Math.random() * w, y: still ? y : Math.random() * h,
        vx: 0, vy: 0, hue: 160 + (x / w) * 60,
      })
}
build(); addEventListener('resize', () => { build(); if (still) frame() })

const aim = (e) => { pointer.x = e.clientX * dpr; pointer.y = e.clientY * dpr }
const away = () => { pointer.x = pointer.y = -1e4 }
addEventListener('pointermove', aim); addEventListener('pointerdown', aim)
addEventListener('pointercancel', away) // a finger that starts scrolling
addEventListener('pointerup', (e) => { if (e.pointerType !== 'mouse') away() })
document.addEventListener('pointerout', (e) => { if (!e.relatedTarget) away() })

let last = performance.now()
function frame(now = last) {
  const dt = Math.min(0.033, Math.max(0, now - last) / 1000) * 60; last = now // 1 = one 60 Hz frame
  g.fillStyle = still ? '#071014' : 'rgba(7,16,20,0.3)' // a faint trail behind moving particles
  g.fillRect(0, 0, w, h)
  const r = REACH * dpr, size = Math.max(1, GAP * dpr * 0.45)
  for (const p of parts) {
    if (!still) {
      // 3. a spring pulls each particle home...
      p.vx += (p.hx - p.x) * 0.012 * dt
      p.vy += (p.hy - p.y) * 0.012 * dt
      // 4. ...and the pointer pushes it away
      const dx = p.x - pointer.x, dy = p.y - pointer.y, d2 = dx * dx + dy * dy
      if (d2 < r * r && d2 > 0.01) {
        const d = Math.sqrt(d2), push = (1 - d / r) * 2.4 * dt
        p.vx += (dx / d) * push; p.vy += (dy / d) * push
      }
      p.vx *= Math.pow(0.88, dt); p.vy *= Math.pow(0.88, dt) // friction
      p.x += p.vx * dt; p.y += p.vy * dt
    }
    const speed = Math.min(1, Math.hypot(p.vx, p.vy) / 8)
    g.fillStyle = 'hsl(' + (p.hue - speed * 120) + ',90%,' + (60 + speed * 25) + '%)'
    g.fillRect(p.x - size / 2, p.y - size / 2, size, size)
  }
  if (!still) requestAnimationFrame(frame)
}
frame()
</script>