The Motion Initiative is a shared catalogue of animated UI components and helpers designed to make motion in interfaces more intentional, consistent, and reusable across projects. James Willetts and I started it after noticing a pattern: our products functioned well, but too often felt static. Functionality alone can get you to a six out of ten—what was missing was considered motion.
Why motion matters
In many teams, motion is treated as a nice-to-have. It gets added late, in an ad‑hoc way, or is left out entirely. The result is familiar: animations that slow people down, transitions that feel disconnected, and interactions that don't clearly communicate what just happened.
There's also a common misconception that motion is mainly about delight or branding. It can absolutely support both, but its primary role is functional. In many cases, no animation is still the right choice—especially for actions users perform all the time. Good motion is subtle and almost invisible, yet essential for how people understand and move through an interface.
When motion is applied with intent, it can guide users through interactions, reinforce hierarchy and feedback, make interfaces feel more intuitive and responsive, and ultimately strengthen the overall product experience.
What's in the catalogue
The Motion Initiative focuses on patterns that show up in real interfaces rather than abstract animation experiments. You'll find staggered button interactions that add rhythm to key actions, scroll progress indicators that make long-form content easier to navigate, and cursor‑follow previews that turn simple hovers into more informative interactions. There are navigation patterns that clarify movement between levels in complex menus, small confirmation interactions for things like copying an email address, and cards that reveal richer video content on hover without overwhelming the page.
Each pattern comes with a live demo, implementation notes, and code, so you can see how it behaves and decide quickly whether it fits your product.
How it works
The catalogue runs on Next.js and PayloadCMS, giving teams a single place to document, preview, and share motion patterns. Each entry combines a demo, code, and implementation notes, along with short guides that explain the underlying principles and when a pattern makes sense to use.
One of the key lessons from building it was the value of making motion visible and discussable. When patterns are easy to reference, teams can talk concretely about what “good” looks like, rather than reinventing animations from scratch on every project. The hard part isn't the technology; it's the mindset. Motion needs a clear purpose, an understanding of how often users will see it, and a simple question: does this genuinely help?
What's next
The initiative is still growing. Planned work includes expanding the library with more motion patterns, adding deeper guidance on motion design principles, and improving discovery with better tagging and categorisation.
The long‑term goal is behaviour change. Teams move away from decorative motion toward purposeful motion, and users get interfaces that feel more predictable, responsive, and intuitive.