The pitbubbles that pile, squash and jump.

Experiment · OCT 2026

Canvas 2DPhysicsVerlet

Gravity

Press L, T or P · drag to push

What it is

The physics behind the key pit, the navigation at the bottom of Home, where the place keys sit in a pile of bubbles. Press a key and the bubbles near it jump; a wave recolours them into that place’s flock.

Here it’s just the pit. Push the bubbles around, press L, T or P, or change the gravity and watch everything settle again.

How it's built

01Verlet integration: position minus last position is the velocity.
02A spatial hash keeps collisions cheap at 300 bubbles.
03Keys are static rectangles the bubbles push out of.
04Stretch follows smoothed speed, never more than 1.3×.

src/lib/motion/pit.tsts

for (const b of this.bubbles) {
  // Verlet: the velocity is where it is minus where it was.
  const vx = (b.x - b.px) * 0.975;
  const vy = (b.y - b.py) * 0.975;
  b.px = b.x;
  b.py = b.y;
  b.x += vx;
  b.y += vy + this.gravity;
}

The pitbubbles that pile, squash and jump.

What it is

How it's built

More from the lab

Founding Member

The basement