Capability 05 — Physics
Tap to drop. Drag to move.
Real 2D physics in the browser — Matter.js running at 60fps, with collisions, friction, and a mouse constraint that works on touch too. Nothing canned, nothing faked.
0 stones
PrimitivesMatter.Engine · Matter.Render · Matter.Bodies.rectangle · Matter.MouseConstraint · visibility-pause · resize-reflow
How this is built
One little engine, eight composed parts.
No post-processing. No physics faked with springs. Matter.js runs a real Verlet integrator; everything you see — the stacking, the toppling, the settle — emerges from forces and constraints. The drag works on phones because Matter’s MouseConstraint reads pointer events, not just mouse events.
01Matter.EngineA lightweight rigid-body engine running at 60fps, with sleeping bodies to keep idle stones from cooking the CPU.View source
02Matter.RenderThe built-in 2D canvas renderer, configured with a transparent background so the warm paper palette shows through.View source
03Matter.Bodies.rectangleEach stone is a chamfered rectangle with randomised dimensions, density, and an earth-toned fill from a palette of six.View source
04Invisible wallsThree static bodies (ground + two walls) keep stones inside the canvas. Thick walls prevent tunnelling at high velocity.View source
05Matter.MouseConstraintOne constraint handles mouse AND touch natively. Drag a stone to pick it up; release to drop. Soft stiffness for a weighty feel.View source
06Tap-to-spawnmouseup events that don't land on an existing body spawn a new stone with a small upward velocity, so it flicks into place.View source
07visibilitychange pauseWhen the tab goes background, the runner halts — no wasted cycles. Resumes on return.View source
08prefers-reduced-motionGravity drops to zero when the user opts out. Stones float in place; dragging still works. Nothing is ever forced.View source