Scroll Milestone Confetti — Free One-Time Progress Burst Effect

<div class="mc-bar" id="mcBar">
  <div class="mc-bar-fill" id="mcBarFill"></div>
  <div class="mc-bar-dot" data-pct="25" style="left:25%"></div>
  <div class="mc-bar-dot" data-pct="50" style="left:50%"></div>
  <div class="mc-bar-dot" data-pct="75" style="left:75%"></div>
  <div class="mc-bar-dot" data-pct="100" style="left:100%"></div>
</div>
<section class="mc-intro"><h1>Scroll ↓</h1><p>Four milestones ahead — each fires confetti the first time you pass it.</p></section>
<section class="mc-block" id="mcM25"><div class="mc-marker">25%</div><h2>Getting started</h2><p>You're a quarter of the way down the page.</p></section>
<section class="mc-block" id="mcM50"><div class="mc-marker">50%</div><h2>Halfway there</h2><p>Keep going — the next milestone is closer than the last.</p></section>
<section class="mc-block" id="mcM75"><div class="mc-marker">75%</div><h2>Almost done</h2><p>One more stretch to the finish.</p></section>
<section class="mc-block mc-final" id="mcM100"><div class="mc-marker">100%</div><h2>You made it!</h2><p>All four milestones unlocked.</p></section>
<canvas id="mcCanvas"></canvas>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0b13;color:#fff}
.mc-bar{position:fixed;top:0;left:0;right:0;height:6px;background:#161a28;z-index:10}
.mc-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#22d3ee);transition:width .1s linear}
.mc-bar-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#161a28;border:2px solid #333c58;transform:translate(-50%,-50%);transition:background .3s,border-color .3s,box-shadow .3s}
.mc-bar-dot.is-unlocked{background:#22d3ee;border-color:#22d3ee;box-shadow:0 0 10px rgba(34,211,238,.8)}
.mc-intro{min-height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:24px}
.mc-intro h1{font-size:clamp(34px,7vw,64px);letter-spacing:-.02em}
.mc-intro p{color:#9aa0b8;font-size:16px;max-width:480px}
.mc-block{min-height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:24px;border-top:1px solid #191d2c}
.mc-marker{font-size:13px;font-weight:800;letter-spacing:.14em;color:#7c8cff;background:rgba(124,140,255,.1);padding:6px 14px;border-radius:999px}
.mc-block h2{font-size:clamp(26px,5vw,44px);letter-spacing:-.02em;margin-top:6px}
.mc-block p{color:#9aa0b8;font-size:16px;max-width:480px}
.mc-final h2{background:linear-gradient(135deg,#8c9bff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
#mcCanvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9}

(function () {
  var canvas = document.getElementById('mcCanvas');
  var ctx = canvas.getContext('2d');
  var barFill = document.getElementById('mcBarFill');
  var dots = document.querySelectorAll('.mc-bar-dot');

  function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resize();
  window.addEventListener('resize', resize);

  var particles = [];
  var COLORS = ['#22d3ee', '#6366f1', '#f472b6', '#facc15', '#34d399'];

  function burst(originYRatio) {
    var count = 90;
    var originX = canvas.width / 2;
    var originY = canvas.height * (originYRatio || 0.35);
    for (var i = 0; i < count; i++) {
      var angle = Math.random() * Math.PI * 2;
      var speed = 3 + Math.random() * 7;
      particles.push({
        x: originX,
        y: originY,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed - 2,
        size: 5 + Math.random() * 5,
        color: COLORS[Math.floor(Math.random() * COLORS.length)],
        rotation: Math.random() * Math.PI,
        rotSpeed: (Math.random() - 0.5) * 0.3,
        life: 0,
        maxLife: 70 + Math.random() * 40
      });
    }
  }

  function tick() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = particles.length - 1; i >= 0; i--) {
      var p = particles[i];
      p.vy += 0.16; // gravity
      p.vx *= 0.99;
      p.x += p.vx;
      p.y += p.vy;
      p.rotation += p.rotSpeed;
      p.life++;
      var fade = Math.max(0, 1 - p.life / p.maxLife);
      if (p.life > p.maxLife || p.y > canvas.height + 40) {
        particles.splice(i, 1);
        continue;
      }
      ctx.save();
      ctx.globalAlpha = fade;
      ctx.translate(p.x, p.y);
      ctx.rotate(p.rotation);
      ctx.fillStyle = p.color;
      ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
      ctx.restore();
    }
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);

  // Milestones fire once each, the first time the user scrolls past them.
  var milestones = [
    { el: document.getElementById('mcM25'), pct: 25 },
    { el: document.getElementById('mcM50'), pct: 50 },
    { el: document.getElementById('mcM75'), pct: 75 },
    { el: document.getElementById('mcM100'), pct: 100 }
  ];

  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      var milestone = milestones.filter(function (m) { return m.el === entry.target; })[0];
      if (!milestone || milestone.fired) return;
      milestone.fired = true;
      burst(0.3);
      var dot = document.querySelector('.mc-bar-dot[data-pct="' + milestone.pct + '"]');
      if (dot) dot.classList.add('is-unlocked');
    });
  }, { threshold: 0.4 });

  milestones.forEach(function (m) { observer.observe(m.el); });

  // A continuous top progress bar independent of the milestone unlocks.
  function updateBar() {
    var doc = document.documentElement;
    var scrollable = doc.scrollHeight - window.innerHeight;
    var progress = scrollable > 0 ? window.scrollY / scrollable : 0;
    barFill.style.width = (Math.max(0, Math.min(1, progress)) * 100) + '%';
  }
  window.addEventListener('scroll', updateBar, { passive: true });
  updateBar();
})();