02.4 Design
Motion µ-interactions.
01 / 04Motion without design is just movement.
02 / 04Real things speed up and slow down. Interfaces should too.
03 / 04Micro-interactions answer one question: did that work?
04 / 04And for people who get dizzy, motion steps aside.
Scroll
What it is
Motion is information, not decoration.
Motion design for interfaces is the craft of deciding how things move: how a menu opens, how a page changes, how a button reacts. Micro-interactions are the smallest of these moments: a toggle that slides, a like that pops, a form field that shakes when something is wrong.
Done well, motion explains. It shows where something came from and where it went, confirms that an action worked, and points attention at what changed. Done badly, it slows people down, makes them dizzy and drains the battery.
We design motion as part of UI design, with real durations and easing curves in the spec, then build it ourselves, so what you approved is what ships. The pages you are reading run on the same principles.
Playground
Same move. Four personalities.
Easing is the difference between something that moves and something that feels right. Press play, then change the duration.
Same distance, same duration, four curves. Push the duration past 700ms and everything starts to feel slow, whatever the curve. If your system asks for reduced motion, the playground fades instead of moving.
Our rules
Six rules for motion that helps.
Most interface motion lives between 150 and 400 milliseconds. Shorter feels like a glitch, longer feels like waiting.
Things entering slow down as they arrive; things leaving speed up as they go. Linear motion is for spinners and progress bars.
If everything moves, nothing stands out. Motion should point at the one change that matters right now.
When someone asks their device for reduced motion, we replace movement with simple fades. Always.
We animate transform and opacity, pause loops that are off screen and never animate layout. Smooth on a mid-range phone.
A bank and a toy shop should not move the same way. Motion has a personality, and it should be yours.
Timing scale
Durations are design tokens too.
Every project gets a small timing scale, like a type scale, so motion feels consistent across the product. This is our starting point; your brand may move a little faster or slower.
What we avoid
Eight ways motion makes things worse.
- Scroll hijacking. Taking control of the scroll so people cannot move at their own pace.
- Long intros. A logo animation that stands between the visitor and the content.
- Animating layout. Moving width, height or top, which makes the browser recalculate everything and stutter.
- Endless loops. Animations that keep running off screen, burning battery for nobody.
- Parallax everywhere. Depth effects on every section, until nothing feels special and some people feel sick.
- Ignoring the setting. No reduced-motion fallback, so the people who asked for less still get everything.
- Random curves. Every element easing differently, so the interface feels improvised.
- Motion before content. Text that waits for an animation, which delays what people came for and hurts Core Web Vitals.
What you get
Motion, designed and delivered.
Motion principles
A short guide to how your brand moves: personality, durations, easing curves and when not to animate.
Micro-interactions
Buttons, toggles, forms, loading and success states, designed to give clear and immediate feedback.
Page transitions
How screens and sections enter, leave and connect, so navigation feels continuous instead of jumpy.
Scroll storytelling
Scroll-driven sections for landing pages and product stories, built to stay smooth and accessible.
Animated brand assets
Logo animations, icons and Lottie files for the site, the app and social media.
Production-ready code
Motion built in CSS and GSAP, tuned for performance, with reduced-motion fallbacks included.
How we work
From feel to frame rate.
You get a clear timeline before we start.
Audit
We review what moves today and what should, and find where people hesitate or miss feedback.
Principles
We define how the brand moves: timing, curves and personality, tested on a few key moments.
Prototype
Interactive prototypes of the important interactions, reviewed on real devices, not in a slide.
Build
We implement the motion in code, measure performance and add reduced-motion fallbacks.
Who it's for
When motion earns its place.
Everything is correct, nothing feels alive. A few well-placed interactions change how premium the brand feels.
People tap twice because nothing confirms the first tap. Feedback is a usability fix, not a luxury.
A product launch or a campaign landing page where the story needs to unfold, not just sit there.
Next steps
Motion works best as part of the system.
Design, motion and development in one team.
FAQ
Questions, answered.
What are micro-interactions?
Small, single-purpose animations that respond to what a user does: a button press, a toggle, a like, a loading state, a success message. They give feedback and make an interface feel responsive.
Will animations slow down my website?
Not when they are built properly. We animate only transform and opacity, pause off-screen animations and keep libraries small. Motion should never cost you your Core Web Vitals.
What about people who get motion sickness?
Operating systems let people ask for reduced motion. We respect that setting everywhere, replacing movement with simple fades or no animation at all.
What tools do you use?
Figma and After Effects for design, and CSS, GSAP and Lottie in production, chosen per project for the lightest result.
How long should an animation be?
For most interface motion, between 150 and 400 milliseconds. Larger, rarer moments like a page transition can be a little longer.
Can you add motion to our existing site?
Usually, yes. We start with the moments that matter most, like navigation, forms and calls to action, and add motion without rebuilding the site.
Can you animate our logo?
Yes. We make logo animations for the website, video intros and social media, delivered as Lottie, video or code.
How much does motion design cost?
It depends on how many interactions and whether we also build them. After a short call we send a transparent proposal with the cost broken down.
Make it feel alive.
Tell us which moments matter most. One real reply within 24 hours.