About this book

A motion alphabet.

Twenty-six entries. Twenty-six demos. One alphabet for the language we all speak when nothing on screen sits still.

01 · why

Motion has a vocabulary. Junior designers learn it slowly, by osmosis, often without ever putting names to the things they are doing. This book gives twenty-six of those things names — and a small live demo so the name and the feeling stay attached.

02 · how to use

On the home flip-book: tap a letter on the bottom rail, or use ← → on the keyboard. Each entry has a one-line definition and a CSS demo. Tap “read the long entry” for a deeper take, a designer’s note, and further reading.

03 · the craft

Every demo on this site is pure CSS @keyframes — no Lottie, no video, no canvas. The structure runs on Next.js with a single client island for letter-flip choreography. The whole bundle is small enough to ship from a phone.

The complete index

Colophon

Display
Inter Tight 900
Italic
Cormorant Garamond Italic
Body
Inter
Mono
IBM Plex Mono
Paper
#f5f1e8
Ink
#090909
Accent
#ff5c2e

Stack

  • · Next.js 16, App Router, Static export-friendly
  • · Tailwind CSS v4 with CSS variables
  • · Framer Motion (motion/react) for AnimatePresence flip
  • · Pure CSS @keyframes for all twenty-six demos
  • · Zero canvas, zero WebGL, zero Lenis