3 of 3

How to read this book

The chapters run in an order, and the order is an argument: how interactions should respond, then how motion should be used, then how the pieces are built, then how the whole is judged. But every section stands alone, and the glossary, people, and reading list let you enter anywhere.

Figures are the point#

Each figure does the thing its section teaches: set a spring’s stiffness and watch it overshoot, swipe a card and see when the action commits, stack toasts and discover why keyframes fail. Every figure states where its numbers come from. “Constants from the source” means the defaults are the ones the cited essay or library documents; “illustrative numbers” means the ranges are yours to explore and no claim rests on them.

Value40/ 100

Below half. This sentence and the one for the other state occupy the same grid cell; the taller of the two sets the height, which is why the page does not jump when they swap.

Adjust

Value40

Figure 1. A figure that responds. Drag the slider. The number animates with a spring, the bar follows with a dimmer trail that shows where it was, and the explanation below swaps between two states that are both always mounted, so nothing under the figure moves.Illustrative numbers

The rules the site holds itself to#

Nothing in a figure shifts the page: every state stays mounted and the tallest sets the height. Animations respect reduced motion. Controls work from the keyboard. Code appears when it says more than prose, with its source named in the header:

CSSEmil Kowalski, 7 Practical Animation Tips

.button:active {  transform: scale(0.97);}

A word on quotation#

Chapter prose is original. Short quotes appear where an author’s wording is the point, always attributed, and the glossary quotes verbatim by design. The sources are better than any summary; if a section makes you want to read the essay it draws on, that is the intended effect. Start with the first gesture you were ever taught.