Little Loops
My living microinteraction pattern library of tiny motion details that make interfaces feel thoughtful, responsive and a little more delightful.✨
View the Library →Why I built this
Most design systems are good at documenting components, but motion usually gets only a tiny mention. Very few explain how things should flow and move.
Yet motion shapes how an interface feels. A card easing in, a counter ticking up, or a line quietly moving across the screen can make an interface feel thoughtful. But when overdone, it can also feel unnecessary.
These details are often too small to include in a design brief, but too important to leave to chance.
Part of this came from my work on pymetrics, where I had to look closely at neuroscience-based games and think much harder about motion as part of the experience. I found myself researching more references and interaction ideas, not to make things flashy, but to better understand how timing, feedback, and movement affect attention, clarity, and feel.
So I built a small place to collect the motion ideas I was testing and document what they actually do. When does motion help in gamified flows? When does it add meaning? And when is something simply having its own special moment?
This became my own reference. My motion playground.
What it is
Little Loops is a working reference for thinking through motion as part of product design, not decoration. It focuses on hierarchy, pacing, feedback, and decision support: how movement can clarify what matters, guide attention, and make an interface feel more intentional.
Fade, slide, stagger, clip wipe, scale pop, counter, parallax, CSS-native scroll-driven
Active states, reading progress, sticky nav behavior, section awareness
Custom cursor, magnetic pull, tilt perspective, text highlight on hover
Skeleton screens, page wipes, entrance animations, perceived performance
Button press, focus ring, toast notifications, copy-confirm micro-moment
Card interactions, lightbox, before/after slider, filter & sort transitions
Counting up on reveal, parallax depth, sticky section labels
Cursor trail, dark/light mode toggle, ambient background, 404 character
View the full Little Loops library →
What I learned building it
The hardest part was not the implementation. It was knowing when motion would add value.
The real challenge was resisting the urge to use every pattern at once. A good microinteraction is noticeable without asking for attention. It improves the experience while staying in the background. Learning that restraint was the most interesting part of the design process.
What's next
I’ll keep growing the motion library with patterns worth studying. I also want to add clearer guidance on when each pattern works and when it does not.
The goal is a practical reference for using motion with more intention.
Design system
Little Loops has its own visual system too.
I documented the palette, typography, surfaces, shape language, and motion rules that sit behind the library so the experiments feel like one coherent product instead of disconnected demos.
View the design system