Foundation
principlesI'm a big fan of micro-animations on the web. The quiet stuff: small actions, soft feedback, nothing trying to impress you. I see them everywhere, and I like them, so I put together something that works for me. Maybe it'll work for you, too.
This section is the thinking behind the demos. Not a design system. Just the rules that kept showing up while building them. I'm not a design engineer, just a tinkerer who wanted the motion to feel honest.
- Motion is for meaning. A save should feel saved. An error should feel wrong. If it doesn't help you understand the state, cut it.
- Quiet beats clever. Short, soft, small. Notice the change, not the trick.
- Arrival matters. Drawn strokes, rolling digits, a wipe-in feel continuous. Hard pop-ins feel pasted on.
- Don't move groups in lockstep. Same ease is fine. A little stagger feels alive.
- One action, one reply. A click already asks for attention. Don't pile on scale, glow, and confetti.
- Keep the source close. Plain HTML, CSS, JS, SVG. Easy to read, copy, and drop into another project.
More will show up when there's time. These get used in real work, and they'll keep getting tried out on this site. If any of it helps, take it. Everything here is free. Use it however you like.
If you write about this project or lean on it heavily, a link or a mention would be nice. Totally up to you.