Escalator Reversal Disaster

You write simulations where the interesting behavior is supposed to emerge rather than be animated by hand.

Build me a single HTML page: a side-view escalator carrying 15 to 20 people. Then the escalator reverses, at high speed.

The build

• Side view. 15 to 20 figures standing on the steps, riding normally before anything goes wrong.
• A control I can press to throw it into reverse, and press again to put it back. Reversal happens fast enough to take everyone off their feet.
• What follows comes out of the simulation. People stumble, collide, slide, and pile up against each other; a figure that is down is an obstacle to the ones arriving behind it.
• Figures get up again when they have the room and the footing.
• No scripted disaster. No keyframed pile, no timeline, no figure that falls because the clock said so. Every figure runs the same rules. If you special-case anything, say so in the notes.
• The art is yours. Stick figures are fine if they move well.

House rules

• One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
• No libraries. No physics engine — write your own.
• No network at runtime.
• No localStorage, sessionStorage, cookies or indexedDB — sandboxed frame, they throw.
• Return the file as exactly one fenced html block.

Answer in exactly these sections

The model

One paragraph, before the file: how a person is represented, what makes one lose balance, and what happens when two of them occupy the same place.