# Shy table

> A table that drops its words on the floor when it runs out of room and sweeps them under the rug, then brings them back when there's space.

An interactive demo on https://baked.design/fun/shy-table/. Drag the handle to make the table narrower. When its words stop fitting, they fall onto the floor and are swept under a rug, which gets a lump. Make the table wider and they climb back into their cells.

## How it works

- A ResizeObserver compares the table's natural width with the space it has.
- Each word is a span. When the table runs out of room, copies of the words take over and fall with a few lines of physics (gravity, a bounce, some spin), then get swept under the rug.
- When there is room again, each word flies back along an arc to where its span sits, and the real text reappears.
- No libraries. With reduced motion turned on, the words simply fade out and back in.

## More
- Everything on /fun: https://baked.design/fun/
- Home: https://baked.design/