Waterdrops — fall, splash, ripple

Rain is the sparks recipe pointed downward — plus one extra idea: a particle's death is an event you can use. When a drop lands, it spawns two children: a burst of tiny splash droplets, and an expanding, fading ripple ring. Three effects, one hand-off.

let RATE = 10;            // drops per second
const GRAVITY = 700;
const FLOOR = H * 0.78;   // the water surface
let drops = [], splash = [], rings = [];
let due = 0;

onFrame((dt, t) => {
  ctx.clearRect(0, 0, W, H);
  // the water surface
  ctx.strokeStyle = "rgba(120,150,220,0.5)";
  ctx.beginPath(); ctx.moveTo(0, FLOOR); ctx.lineTo(W, FLOOR); ctx.stroke();

// spawn new drops on a timer
  due += dt * RATE;
  while (due > 1) {
    due -= 1;
    drops.push({ x: rand(15, W - 15), y: -10, vy: rand(60, 160) });
  }

// drops: fall, and on landing hand off to splash + ring
  for (const d of drops) {
    d.vy += GRAVITY * dt;
    d.y += d.vy * dt;
    if (d.y >= FLOOR) {
      d.dead = true;
      rings.push({ x: d.x, r: 2, a: 0.9 });
      for (let i = 0; i < 5; i++) {
        splash.push({ x: d.x, y: FLOOR, vx: rand(-70, 70),
                      vy: rand(-170, -50), life: rand(0.2, 0.5), max: 0.5 });
      }
      continue;   // it has become splash + ring now
    }
    // a falling drop reads best as a short streak, not a dot
    ctx.strokeStyle = "rgba(170,200,255,0.9)";
    ctx.beginPath(); ctx.moveTo(d.x, d.y - 7); ctx.lineTo(d.x, d.y); ctx.stroke();
  }

// splash droplets: sparks physics, tiny and brief
  for (const p of splash) {
    p.vy += GRAVITY * dt;
    p.x += p.vx * dt;  p.y += p.vy * dt;  p.life -= dt;
    ctx.globalAlpha = Math.max(0, p.life / p.max);
    ctx.fillStyle = "#BFD4FF";
    ctx.beginPath(); ctx.arc(p.x, p.y, 1.6, 0, 7); ctx.fill();
  }
  ctx.globalAlpha = 1;

// ripple rings: an ellipse growing while its alpha tweens down
  for (const g of rings) {
    g.r += 65 * dt;
    g.a -= 1.1 * dt;
    if (g.a <= 0) continue;
    ctx.strokeStyle = "rgba(150,190,255," + g.a + ")";
    ctx.beginPath();
    ctx.ellipse(g.x, FLOOR, g.r, g.r * 0.3, 0, 0, 7);  // squashed = perspective
    ctx.stroke();
  }

// housekeeping: forget the finished ones
  drops = drops.filter(d => !d.dead);
  splash = splash.filter(p => p.life > 0);
  rings = rings.filter(g => g.a > 0);
});

The ripple is two lines — a radius growing while an alpha shrinks — and it carries most of the "water" feeling. The squashed ellipse fakes perspective for free.

Try tweaking: RATE 10 → 1 (a cave drip — suddenly the wait is the effect) → 40 (a storm) · ring growth 65 → 200 (energetic plops) · splash count 5 → 20 · give drops sideways wind: d.x += 40 * dt in the fall step.

In Godot: the death-as-an-event hand-off written out plainly — download waterdrops.gd; the node version is a downward CPUParticles2D spawning a ripple scene on landing. In Unity: Particle System with Sub Emitters — the "on death, spawn these" checkbox is exactly this hand-off. In Unreal: Niagara event handlers (collision/death events spawning a second emitter). Chapter 06.