Catalogue / Plate 22← All plates

A 404 that fills up

A 404 that fills up with shapes that fall, tumble and pile, and that you can pick out and throw.

22 / Motion · physics

Sampleton Lost Property Office

404

That page has been handed in somewhere else.

Drag a shape out of the pile and let go. What was resting on it falls.

On the floor: 0. Moving now: 0. Still settling. Deepest overlap between two shapes: 0.0 px.

Remake it

Build one interactive web page: Sampleton Lost Property Office. Coloured shapes are handed in one by one: they fall, tumble and come to rest in a pile on the floor, each with a numbered tag. Every shape is a rigid body, so the pile is real: pick one out of the middle and throw it, and what was resting on it falls. The way home sits above the pile and is never covered. The readout counts the shapes, how many are still moving, how long the pile took to settle and how deeply two shapes overlap.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: An error page, an empty state, a thank-you page: anywhere the emptiest moment can be given something to play with. Do not let it fail the way this kind of piece usually does: A heap that settles over the button, or physics that runs forever. Here the shapes stay on the floor under the text, the loop stops when everything is asleep, a touch that lands on a shape does not scroll the page but anywhere else it still does, and reduced motion shows the finished pile.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
When it suits
An error page, an empty state, a thank-you page: anywhere the emptiest moment can be given something to play with.
When it does not
A page where the action must be reached at once, and very low-powered phones.
How it fails
A heap that settles over the button, or physics that runs forever. Here the shapes stay on the floor under the text, the loop stops when everything is asleep, a touch that lands on a shape does not scroll the page but anywhere else it still does, and reduced motion shows the finished pile.

Measured on: labs.google · T4. Built from scratch for an invented business; nothing here comes from the site studied.