Fragmented trails — a comet made of pieces

The first trails demo smears the whole canvas. This one is the other family: the moving thing drops individual fragments behind it, and each fragment lives its own tiny life. Change what a fragment is — fire, star, waterdrop, sparkle — and the same trail becomes a different spell. Move your pointer over the canvas to steer the comet yourself.

let STYLE = "fire";   // ← try "stars", "drops", "sparkle"

let ex = W / 2, ey = H / 2;      // the comet head…
let hvx = 0, hvy = 0;            // …and its velocity: the head has MASS, so it overshoots and curls back

// one fragment is born — what it IS depends on the style
function spawn(x, y) {
  if (STYLE == "fire")
    parts.push({ x, y, vx: rand(-20, 20), vy: rand(-70, -20),
                 life: rand(0.4, 0.9), max: 0.9, size: rand(4, 9) });
  if (STYLE == "stars")
    parts.push({ x, y, vx: rand(-12, 12), vy: rand(-12, 12),
                 life: rand(0.8, 1.6), max: 1.6, size: rand(3, 6), tw: rand(0, 7) });
  if (STYLE == "drops")
    parts.push({ x, y, vx: rand(-15, 15), vy: rand(0, 30),
                 life: rand(0.5, 1.1), max: 1.1, size: 2 });
  if (STYLE == "sparkle")
    parts.push({ x, y, vx: rand(-40, 40), vy: rand(-40, 40),
                 life: rand(0.2, 0.6), max: 0.6, size: rand(1.5, 3), tw: rand(0, 7) });
}

onFrame((dt, t) => {
  ctx.fillStyle = "#14111F";
  ctx.fillRect(0, 0, W, H);

// the head wanders on its own — or chases your pointer. a spring pulls it
  // toward the target and only drag slows it, so a flick makes it overshoot
  // and loop back through its own trail: that overshoot is what makes a
  // trail read as SPEED rather than as a line
  const tx = mouse ? mouse.x : W / 2 + Math.cos(t * 1.3) * W * 0.30;
  const ty = mouse ? mouse.y : H / 2 + Math.sin(t * 2.1) * H * 0.28;
  hvx += ((tx - ex) * 60 - hvx * 7) * dt;
  hvy += ((ty - ey) * 60 - hvy * 7) * dt;
  ex += hvx * dt;  ey += hvy * dt;
  for (let i = 0; i < 3; i++) spawn(ex + rand(-3, 3), ey + rand(-3, 3));

ctx.globalCompositeOperation = STYLE == "drops" ? "source-over" : "lighter";
  for (const p of parts) {
    p.x += p.vx * dt;  p.y += p.vy * dt;  p.life -= dt;
    if (STYLE == "drops") p.vy += 500 * dt;      // only water falls
    const u = Math.max(0, p.life / p.max);       // 1 newborn … 0 gone
    let alpha = u;
    if (p.tw !== undefined)                      // twinkle, out of sync
      alpha = u * (0.5 + 0.5 * Math.sin(t * 12 + p.tw));
    ctx.globalAlpha = alpha;
    if (STYLE == "fire") {
      ctx.fillStyle = u > 0.6 ? "#FFE9A8" : (u > 0.3 ? "#FF9E4A" : "#B5432E");
      ctx.beginPath(); ctx.arc(p.x, p.y, p.size * u, 0, 7); ctx.fill();
    }
    if (STYLE == "stars") {                      // a 4-point cross
      ctx.strokeStyle = "#CFE0FF"; ctx.lineWidth = 1.5;
      const s = p.size * u;
      ctx.beginPath();
      ctx.moveTo(p.x - s, p.y); ctx.lineTo(p.x + s, p.y);
      ctx.moveTo(p.x, p.y - s); ctx.lineTo(p.x, p.y + s);
      ctx.stroke();
    }
    if (STYLE == "drops") {
      ctx.fillStyle = "#9CC1F7";
      ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, 7); ctx.fill();
    }
    if (STYLE == "sparkle") {
      ctx.fillStyle = Math.random() < 0.5 ? "#FFFFFF" : "#FFD9F0";
      ctx.beginPath(); ctx.arc(p.x, p.y, p.size * u, 0, 7); ctx.fill();
    }
  }
  ctx.globalAlpha = 1;
  ctx.globalCompositeOperation = "source-over";
  parts = parts.filter(p => p.life > 0);
});

Notice what stayed identical across all four styles: born at the head, drift, fade, die. Only the fragment's costume changed. This is also the whole mechanism of "cursor trail" effects — the head is simply your pointer.

Try tweaking: STYLE — all four · fragments per frame 3 → 12 (opulent) → 1 (understated) · mix two styles by calling spawn twice with different STYLE values temporarily set · fire's vy range to rand(20, 70): falling embers · the head's spring 60 / drag 7 → 200 / 4 (twitchy, loops a lot) → 60 / 16 (no overshoot at all — notice how much deader it looks).

In Godot: spawn by distance moved, one costume per fragment style — download trails_fragments.gd (keys 1–4 switch ember/star/drop/sparkle); or attach a CPUParticles2D to the moving node. In Unity: a Particle System with Rate over Distance emission — fragments appear only while moving, which feels wonderful. In Unreal: a Niagara emitter using spawn-per-unit. Chapter 06 · chapter 12 deploys this as a cursor trail.