Shy
Things that get shy when you squeeze them. Drag a handle, or use the buttons, and give them room again after.
Table
When the words stop fitting, they fall on the floor and slip under the rug. Give them room and they come back.
| Pastry | Bake | Crumb |
|---|---|---|
| Croissant | 18 min | flaky |
| Sourdough | 45 min | open |
| Cinnamon bun | 25 min | sticky |
| Victoria sponge | 30 min | light |
Each word is its own span. When the room runs out, copies of the words fall with a few lines of physics: gravity, a bounce, a little spin. The rug is plain CSS lying flat in real 3D, so its end can lift on a hinge; it keeps a lump for every word. GSAP runs the timing.
Keyboard
As it gets narrower it changes shape to fit: a full keyboard, a compact one, a phone keyboard, then an old keypad. Squeeze it past that and the keys jump out at your screen.
It's a real 3D model, drawn with Three.js: every keycap is a sculpted, hollow shell with a cross stem underneath, sitting on a switch on an aluminium case. Keys glide to their new places as it changes shape. When there's no room left, each cap springs off its switch and tumbles toward you until it hits the glass, leaving the bare switches behind. Devices without 3D get a flat version that does the same dance.