# Shy

> Components that get shy when you squeeze them: a table that tucks its words under the rug, and a keyboard that changes shape until its keys jump out at your screen.

Interactive demos on https://baked.design/fun/shy/. Each one has a handle to drag (or buttons) that makes it narrower.

## Table

When its words stop fitting, they fall onto the floor. Then the end of the rug curls up and the words hurry over and slip underneath, one after another; the rug flops back down with a lump for every word. Make the table wider and the rug lifts so every word can fly back into its cell.

- 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 fall with a few lines of physics (gravity, a bounce, some spin).
- The rug is CSS lying flat in real 3D (a kilim pattern, wool grain, creases and fringe), and its end is three hinged sections, so it curls like cloth.

## Keyboard

As it gets narrower it changes shape to fit: a full laptop keyboard, then a compact one without the number row, then a phone keyboard, then an old keypad with three letters a key. Squeeze it past that and the keys jump out of the page toward you in 3D, hit the glass, and slide down it. Give it room and they pop back.

- It's a real 3D model drawn with Three.js: each keycap is a sculpted, hollow shell with a cross stem, on a switch, on an aluminium case. When the keys jump, you see their undersides as they tumble, and the bare switches stay on the plate.
- Keys glide to their new places as the shape changes; the A key becomes "2 ABC". Devices without 3D get a flat version (GSAP Flip) that does the same.

GSAP runs the timing for both. With reduced motion turned on, the words fade out and back in, and the keycaps simply disappear and come back.

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