Animation library: one motion language for a whole product org

Animation across our products was made one screen at a time, so the same moment moved differently from team to team. Nobody could say which curve or duration was right.

Without a shared language, motion was the first thing cut and the hardest thing to review.

I created the motion system and the library around it, and I lead the Animation Guild that keeps it alive.

• Defined the tokens: five easing curves, five durations and one distance rule.
• Documented every pattern with its tokens, entrance, exit and a recorded example from real demos.
• Recorded those examples from five projects, including billing, payments, insurance OCR and Dot onboarding.
• Shipped it as a living site and a repo that drops into every team demo.

• Small enough to remember. Arrivals ease out, exits ease in, and things already on screen ease both ways. Every animation picks one curve and one duration.
• Distance sets speed. Surfaces that travel move at about 1.2px per millisecond, between 200ms and 600ms, and exits take about 80% of the entrance. A tall sheet takes longer without feeling slower.
• Calm by default. Nothing bounces, overshoots or shakes. With reduced motion on, surfaces fade or appear instantly and loops stop.

• One source of truth in the W3C design token format, with the same values for CSS and JavaScript.
• A checklist designers run before shipping, so motion review takes minutes instead of debate.
• Every demo now pulls the same tokens, which keeps prototypes consistent across teams.

The site you’re reading uses the same curves.