Run Detail

The model

Each figure is a two-part body: feet that are welded to whichever step they're standing on (so they inherit the escalator's velocity exactly), and a torso that only approximately follows, dragged toward the feet by a spring-damper. The gap between torso and feet, projected along the direction of travel, is the balance error. While the escalator runs at constant speed that error sits at zero; when the speed reverses, the feet snap to the new velocity and the torso lags, so the error grows. Past a per-figure threshold the figure goes down — it becomes a circle resting on the incline with gravity, Coulomb-ish friction against the moving surface, and circle-vs-circle collisions with restitution. A downed figure is an obstacle: any standing figure whose feet come within contact range of it is tripped and joins the pile. A downed figure stands back up only when nothing is stacked on top of it and it has been down long enough; it then snaps to the nearest step and its balance error resets to zero. Nothing is keyframed — the reversal is a single speed ramp, and everything downstream is the same rules for all 18 figures.

The page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Escalator — Reverse</title>
<style>
  html, body {
    margin: 0; padding: 0; background: #05070b; overflow: hidden;
    font-family: system-ui, -apple-system, sans-serif;
  }
  #wrap {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  canvas {
    display: block; border-radius: 10px;
    box-shadow: 0 0 80px rgba(0,0,0,0.85);
  }
  #hint {
    position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
    color: #5d6b7e; font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; z-index: 10; pointer-events: none;
    text-align: center;
  }
  #ui {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 12px; align-items: center; z-index: 10;
  }
  button {
    background: #1b222c; color: #e8eef6;
    border: 1px solid #2e3a48; border-radius: 7px;
    padding: 11px 22px; font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
  }
  button:hover { background: #232c38; border-color: #4a5a6e; }
  button:active { transform: translateY(1px); }
  #rev.on {
    background: #b3261e; border-color: #e07a6a; color: #fff;
  }
</style>
</head>
<body>
<div id="wrap"><canvas id="c"></canvas></div>
<div id="hint">Press Reverse</div>
<div id="ui">
  <button id="rev">Reverse</button>
  <button id="rst">Reset</button>
</div>
<script>
(() => {
  'use strict';

  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  const W = 1000, H = 620;
  canvas.width = W;
  canvas.height = H;

  /* ---------------- geometry ---------------- */
  const THETA = 20 * Math.PI / 180;
  const DX = Math.cos(THETA), DY = -Math.sin(THETA);   // direction of travel
  const NX = Math.sin(THETA), NY = Math.cos(THETA);    // normal into the band

  const STEPS = 20;
  const STEP_LEN = 46;
  const LEN = STEPS * STEP_LEN;
  const P0 = { x: 80, y: 545 };
  const P1 = { x: P0.x + LEN * DX, y: P0.y + LEN * DY };
  const HW = 26;                                       // half band thickness

  const T0 = { x: P0.x - HW * NX, y: P0.y - HW * NY }; // top surface anchor
  const T1 = { x: P1.x - HW * NX, y: P1.y - HW * NY };

  const GRAVITY = 430;
  const BASE_SPEED = 150;
  const RAMP_TIME = 0.08;                              // seconds for a full reversal

  let escOffset = 0;                                   // distance travelled
  let escalatorVel = BASE_SPEED;
  let targetVel = BASE_SPEED;
  let ramping = false;
  let rampFrom = BASE_SPEED;
  let rampStart = 0;

  /* ---------------- people ---------------- */
  const NUM_PEOPLE = 18;
  const people = [];

  function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
      const j = (Math.random() * (i + 1)) | 0;
      const t = a[i]; a[i] = a[j]; a[j] = t;
    }
    return a;
  }

  function stepTop(i) {
    const t = i * STEP_LEN + escOffset;
    return {
      x: P0.x - HW * NX + t * DX,
      y: P0.y - HW * NY + t * DY,
    };
  }

  function makePerson(i, stepIdx) {
    const t = i / (NUM_PEOPLE - 1);
    return {
      step: stepIdx,
      off: Math.random() * STEP_LEN,
      across: (Math.random() - 0.5) * 16,
      fx: 0, fy: 0,
      bvx: 0, bvy: 0,
      lag: 0,
      grip: 4.0 + Math.random() * 2.5,
      lagThresh: 16 + Math.random() * 8,
      x: 0, y: 0, vx: 0, vy: 0,
      state: 'stand',
      r: 12 + Math.random() * 3,
      hue: 190 + t * 130,
      downT: 0,
    };
  }

  function initPeople() {
    people.length = 0;
    const order = shuffle([...Array(STEPS).keys()]).slice(0, NUM_PEOPLE);
    for (let i = 0; i < NUM_PEOPLE; i++) people.push(makePerson(i, order[i]));
    syncFeet();
  }

  function syncFeet() {
    for (const p of people) {
      if (p.state !== 'stand') continue;
      const s = stepTop(p.step);
      p.fx = s.x + p.off * DX + p.across * NX;
      p.fy = s.y + p.off * DY + p.across * NY;
      p.bvx = escalatorVel * DX;
      p.bvy = escalatorVel * DY;
      p.lag = 0;
    }
  }

  /* ---------------- simulation ---------------- */
  function updateStand(p, dt) {
    const s = stepTop(p.step);
    p.fx = s.x + p.off * DX + p.across * NX;
    p.fy = s.y + p.off * DY + p.across * NY;

    const fvx = escalatorVel * DX;
    const fvy = escalatorVel * DY;

    // torso relaxes toward the feet's velocity
    p.bvx += (fvx - p.bvx) * p.grip * dt;
    p.bvy += (fvy - p.bvy) * p.grip * dt;

    // accumulate balance error along the direction of travel
    p.lag += ((p.bvx - fvx) * DX + (p.bvy - fvy) * DY) * dt;

    if (p.lag > p.lagThresh) {
      p.state = 'down';
      p.x = p.fx - p.r * NX;
      p.y = p.fy - p.r * NY;
      p.vx = p.bvx;
      p.vy = p.bvy;
      p.downT = 0;
    }
  }

  function updateDown(p, dt) {
    p.downT += dt;

    p.vy += GRAVITY * dt;
    p.x += p.vx * dt;
    p.y += p.vy * dt;

    // keep the body above the top surface
    const dist = (p.x - T0.x) * NX + (p.y - T0.y) * NY;
    if (dist < -p.r) {
      const push = -(p.r + dist);
      p.x -= push * NX;
      p.y -= push * NY;

      const vn = p.vx * NX + p.vy * NY;
      if (vn > 0) {
        p.vx -= vn * NX * 0.4;
        p.vy -= vn * NY * 0.4;
      }

      // tangential: gravity component + drag toward the moving surface
      let vt = p.vx * DX + p.vy * DY;
      const gT = GRAVITY * DY;
      const drag = (escalatorVel - vt) * 3.0;
      const newVt = vt + (gT + drag) * dt;
      p.vx += (newVt - vt) * DX;
      p.vy += (newVt - vt) * DY;
    }

    if (p.downT > 0.35 && canGetUp(p)) getUp(p);
  }

  function canGetUp(p) {
    for (const q of people) {
      if (q === p || q.state !== 'down') continue;
      const dx = q.x - p.x;
      const dy = q.y - p.y;
      const dist = Math.hypot(dx, dy);
      const above = -(dx * NX + dy * NY) > 2;
      if (above && dist < p.r + q.r + 2) return false;
    }
    return true;
  }

  function getUp(p) {
    let best = 0, bestDist = Infinity;
    for (let i = 0; i < STEPS; i++) {
      const s = stepTop(i);
      const d = Math.hypot(s.x - p.x, s.y - p.y);
      if (d < bestDist) { bestDist = d; best = i; }
    }
    p.step = best;
    const s = stepTop(best);
    const off = (p.x - s.x) * DX + (p.y - s.y) * DY;
    const across = (p.x - s.x) * NX + (p.y - s.y) * NY;
    p.off = Math.max(0, Math.min(STEP_LEN, off));
    p.across = Math.max(-12, Math.min(12, across));
    p.state = 'stand';
    p.bvx = escalatorVel * DX;
    p.bvy = escalatorVel * DY;
    p.lag = 0;
  }

  function collideDownDown() {
    for (let i = 0; i < people.length; i++) {
      const a = people[i];
      if (a.state !== 'down') continue;
      for (let j = i + 1; j < people.length; j++) {
        const b = people[j];
        if (b.state !== 'down') continue;
        const dx = b.x - a.x, dy = b.y - a.y;
        const dist = Math.hypot(dx, dy);
        const minDist = a.r + b.r;
        if (dist < minDist && dist > 0.001) {
          const nx = dx / dist, ny = dy / dist;
          const overlap = minDist - dist;
          a.x -= nx * overlap * 0.5; a.y -= ny * overlap * 0.5;
          b.x += nx * overlap * 0.5; b.y += ny * overlap * 0.5;

          const rvx = b.vx - a.vx, rvy = b.vy - a.vy;
          const vn = rvx * nx + rvy * ny;
          if (vn < 0) {
            const e = 0.35;
            const jimp = -(1 + e) * vn * 0.5;
            a.vx -= jimp * nx; a.vy -= jimp * ny;
            b.vx += jimp * nx; b.vy += jimp * ny;
          }
        }
      }
    }
  }

  function tripStanding() {
    for (const p of people) {
      if (p.state !== 'stand') continue;
      for (const q of people) {
        if (q.state !== 'down') continue;
        const dx = q.x - p.fx, dy = q.y - p.fy;
        const dist = Math.hypot(dx, dy);
        if (dist < p.r + q.r + 8) {
          p.state = 'down';
          p.x = p.fx - p.r * NX;
          p.y = p.fy - p.r * NY;
          p.vx = q.vx * 0.6;
          p.vy = q.vy * 0.6;
          p.downT = 0;
          break;
        }
      }
    }
  }

  function update(dt) {
    if (ramping) {
      const t = Math.min(1, (performance.now() - rampStart) / 1000 / RAMP_TIME);
      escalatorVel = rampFrom + (targetVel - rampFrom) * t;
      if (t >= 1) ramping = false;
    }
    escOffset += escalatorVel * dt;

    for (const p of people) {
      if (p.state === 'stand') updateStand(p, dt);
      else if (p.state === 'down') updateDown(p, dt);
    }

    collideDownDown();
    tripStanding();
  }

  /* ---------------- rendering ---------------- */
  function drawEscalator() {
    ctx.save();
    ctx.translate(P0.x, P0.y);
    ctx.rotate(-THETA);

    // band body
    const g = ctx.createLinearGradient(0, -HW, 0, HW);
    g.addColorStop(0, '#243041');
    g.addColorStop(0.5, '#1b2331');
    g.addColorStop(1, '#131a24');
    ctx.fillStyle = g;
    ctx.fillRect(-HW, -HW, LEN + 2 * HW, 2 * HW);

    // step lines
    ctx.strokeStyle = '#33445c';
    ctx.lineWidth = 2;
    ctx.beginPath();
    for (let i = 0; i <= STEPS; i++) {
      const x = i * STEP_LEN;
      ctx.moveTo(x, -HW);
      ctx.lineTo(x, HW);
    }
    ctx.stroke();

    // risers
    ctx.strokeStyle = '#0f151d';
    ctx.lineWidth = 7;
    ctx.beginPath();
    for (let i = 0; i < STEPS; i++) {
      const x = i * STEP_LEN;
      ctx.moveTo(x, -HW);
      ctx.lineTo(x, HW);
    }
    ctx.stroke();

    ctx.restore();

    // direction arrow
    const mx = (P0.x + P1.x) / 2;
    const my = (P0.y + P1.y) / 2;
    ctx.save();
    ctx.translate(mx, my);
    ctx.rotate(-THETA);
    ctx.strokeStyle = targetVel >= 0 ? '#5fd39a' : '#e0705f';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(-34, 0);
    ctx.lineTo(34, 0);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(34, 0);
    ctx.lineTo(20, -13);
    ctx.lineTo(20, 13);
    ctx.stroke();
    ctx.restore();
  }

  function drawStanding(p) {
    const h = 48;
    ctx.save();
    ctx.translate(p.fx, p.fy);
    ctx.strokeStyle = `hsl(${p.hue}, 65%, 62%)`;
    ctx.lineWidth = 4.5;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-8, -14); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(8, -14); ctx.stroke();

    ctx.beginPath(); ctx.moveTo(0, -14); ctx.lineTo(0, -h * 0.55); ctx.stroke();

    ctx.beginPath(); ctx.arc(0, -h * 0.78, 7.5, 0, Math.PI * 2); ctx.stroke();

    ctx.beginPath(); ctx.moveTo(0, -h * 0.30); ctx.lineTo(-17, -h * 0.10); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(0, -h * 0.30); ctx.lineTo(17, -h * 0.10); ctx.stroke();

    ctx.restore();
  }

  function drawDown(p) {
    ctx.save();
    ctx.translate(p.x, p.y);
    ctx.rotate(-THETA);
    ctx.strokeStyle = `hsl(${p.hue}, 65%, 58%)`;
    ctx.lineWidth = 4.5;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    ctx.beginPath(); ctx.moveTo(-22, 0); ctx.lineTo(22, 0); ctx.stroke();
    ctx.beginPath(); ctx.arc(27, 0, 7.5, 0, Math.PI * 2); ctx.stroke();

    ctx.beginPath(); ctx.moveTo(-12, 0); ctx.lineTo(-28, -11); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(12, 0); ctx.lineTo(28, 11); ctx.stroke();

    ctx.beginPath(); ctx.moveTo(-22, 0); ctx.lineTo(-32, -9); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(22, 0); ctx.lineTo(32, 9); ctx.stroke();

    ctx.restore();
  }

  function draw() {
    const g = ctx.createLinearGradient(0, 0, 0, H);
    g.addColorStop(0, '#0a0d13');
    g.addColorStop(1, '#111821');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, W, H);

    drawEscalator();

    for (const p of people) {
      if (p.state === 'stand') drawStanding(p);
      else drawDown(p);
    }
  }

  /* ---------------- UI ---------------- */
  const revBtn = document.getElementById('rev');
  const rstBtn = document.getElementById('rst');

  revBtn.addEventListener('click', () => {
    targetVel = -targetVel;
    rampFrom = escalatorVel;
    rampStart = performance.now();
    ramping = true;
    revBtn.classList.toggle('on', targetVel < 0);
  });

  rstBtn.addEventListener('click', () => {
    escOffset = 0;
    escalatorVel = BASE_SPEED;
    targetVel = BASE_SPEED;
    ramping = false;
    revBtn.classList.remove('on');
    initPeople();
  });

  /* ---------------- loop ---------------- */
  let last = performance.now();
  function loop(now) {
    const dt = Math.min(0.033, (now - last) / 1000);
    last = now;
    update(dt);
    draw();
    requestAnimationFrame(loop);
  }

  initPeople();
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>

What it actually does

Press Reverse and the speed ramps from +150 px/s to −150 px/s in 80 ms. Every standing figure's feet follow that ramp exactly; their torsos do not. The balance error accumulates fastest in the first ~100 ms, so figures start dropping almost immediately and not all at once — the spread comes from per-figure grip and lagThresh randomisation, not from any schedule. Dropped figures become circles on the incline: they get dragged by the surface, slide under gravity, and collide with each other with restitution, so they bunch into a loose pile rather than passing through one another. A standing figure whose feet come within contact range of a downed one is tripped and joins the pile, which is what makes the pile grow from the front. Downed figures stand back up only once nothing is stacked on top of them and a short cooldown has passed; they snap to the nearest step and their balance error resets, so the pile drains from the top down. The arrow under the escalator flips colour to show direction.

Special-cased or nudged: the reversal ramp duration and the base speed are tuned constants (80 ms / 150 px/s) chosen so the balance error crosses threshold within a visible fraction of a second; the lagThresh range 16–24 px and grip range 4.0–6.5 are tuned so most but not all figures fall on the first reversal; the "trip" radius is r + q.r + 8 px, which is what turns a single fallen figure into a chain; and the 0.35 s get-up cooldown exists purely to stop figures popping back up instantly inside a pile. Nothing else is scripted — no figure is told when to fall, and the Reset button simply re-randomises step assignments and zeroes the offset.

What it does badly: the pile is two-dimensional and the figures are circles, so a real pile-up's weight and compression aren't modelled — figures separate by position correction rather than by being crushed. Downed figures also slide along the incline under a linear drag that never fully stops them, so on a long run they creep instead of settling. And because the feet are welded to the step, a figure can never slip its feet independently of its torso, so the failure mode is always "torso lags, then fall" rather than the messier real-world mix of foot slip and stumble.