#motion design
9 pieces filed under “motion design”.
Scrollytelling with restraint: narrative pages that respect the scrollbar
The production playbook for scrollytelling that earns its keep: a one-pin budget, chapter navigation, a designed reduced-motion variant, and a print-test honesty check.
Reading progress indicators: craft or clutter?
The reading progress bar is the most faked detail on the web. The honest version: when long-form needs one, how to build it without jank or lies, when to skip it.
Skeleton screens that don't flash and lie
Skeleton UI done honestly: match the shape of the answer, gate the flash, respect reduced motion, and know when a spinner or optimistic UI beats a skeleton entirely.
Perceived performance is a design material
Perceived performance is designed, not just engineered: skeletons, optimistic UI, progressive images, zero layout shift and the choreography of waiting states.
Data visualisation on marketing pages, honestly
Charts on marketing pages answer to different rules than dashboards. Honest axes, motion in service of comprehension, and the table that saves your accessibility audit.
Scrollytelling without the hostage-taking
Scroll-driven narrative can make complex data click — or trap readers in an unskippable slideshow. The pacing, exit lanes and motion fallbacks that keep it honest.
Motion that earns its keep (and the 160ms rule)
Our motion philosophy: the 160ms rule, an easing vocabulary of three curves, choreography limits, and prefers-reduced-motion as a design input, not a checkbox.
The motion layer of brand identity
Easing is a signature, transitions are grammar. Building a kinetic identity system, exporting it as motion tokens engineers use, surviving prefers-reduced-motion.
Micro-interactions: the fine layer that makes interfaces feel expensive
Hover, pressed and focus states are where interface quality hides. Our working rules for micro-interactions: durations, material honesty, and when to cut motion.