A menu that tumbles

A menu of tiles that fall in and pile up, that you can throw about and tap to open.

27 / Motion · canvas

Sampleton Hardware · departments

Which aisle?

Tap a tile, or pick a department below.

Tiles still moving: 0. Departments opened: 0. Pick a tile up and let go to throw it; tap it without moving to open it.

Remake it

Build one interactive web page: Sampleton Hardware's six departments as tiles that drop onto a shelf and pile up, each one a rigid body. Pick one up and throw it, and what was resting on it moves; tap one without moving it and it hops and opens its department in the bar below. The same six departments are real buttons beside the shelf. Shake the shelf or drop them again.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A playful brand, a shop or a studio with few top-level sections, a landing page where the menu is part of the personality. Do not let it fail the way this kind of piece usually does: A menu you have to chase. Here the tiles settle in about a second, the same six choices are ordinary buttons in a row, the shelf never captures a scroll except on a tile itself, and reduced motion drops the tiles already at rest.

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: A playful brand, a shop or a studio with few top-level sections, a landing page where the menu is part of the personality.
When it does not: A site with many sections, anything a visitor must find fast, or a menu that has to hold still for muscle memory.
How it fails: A menu you have to chase. Here the tiles settle in about a second, the same six choices are ordinary buttons in a row, the shelf never captures a scroll except on a tile itself, and reduced motion drops the tiles already at rest.

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