Motion Is a Quieter Typography

Mei lives in a third-floor apartment in Nakano, on a street where the convenience store across the road has the wrong shade of blue in its sign — the white is slightly too cool, the blue slightly too green, and she has been irritated by it for four years without ever doing anything about it. She is a motion designer. She has been one for nine years. The notebook she keeps on her desk is a Midori MD, A6, soft cover, and the pages are full of two kinds of entries: transitions she's seen that broke, and transitions she's seen that disappeared.

She started keeping it after a job at a fintech in Shibuya where the design lead kept saying "make it feel premium" and meaning, mostly, "add more motion." Every screen had a stagger. Every card had a parallax. The login screen had a button that did a small bounce when you tapped it, which she had built herself, and which she had quietly hated. She'd watch users in research sessions wait through the bounce, eyebrows slightly raised, and she'd think: this is making the product feel slower, not more expensive. She left after eleven months.

The notebook was the first thing she bought after she quit. Not as a hobby. As a discipline. The premise was simple: every time she opened an app or a website and noticed a transition, she wrote it down. The act of noticing was the data. If she noticed it, the motion had failed at its job, because motion in a product UI is supposed to be like the kerning on a paragraph — present, intentional, invisible to anyone who isn't looking for it.

The other list, the disappeared ones, was harder to keep. You have to go looking. You have to use a product for a week and then sit down and ask yourself: what moved? Where did the menu come from? How did the modal arrive? If you can't remember, the motion was probably good. If you can describe it in detail, the motion was probably bad.

What follows is four entries from the notebook, two of each kind, with what they taught her. I read the notebook over green tea at her kitchen table last March. She let me copy four pages and asked me not to name the companies, which is fair. The lessons are the point anyway.

Entry: the banking app modal that bounced

March, two years ago. A banking app she won't name, but you've used one like it. She tapped "Send money" and a modal slid up from the bottom of the screen. The slide itself was fine — about 280ms, ease-out, the kind of curve that feels like a drawer landing on a soft stop. Then, after it arrived, it did a tiny bounce. Maybe six pixels of overshoot, settling over another 120ms with a spring.

The bounce was the problem. Not because bounces are bad — bounces are a real physical metaphor and sometimes they belong — but because nothing about sending money should feel bouncy. The motion was saying "playful" while the screen was saying "transfer four hundred thousand yen." The vocabulary didn't match the sentence.

She wrote down: "motion has a register, like type does. A bank app modal should arrive the way a serious sentence ends — full stop, no flourish. The bounce was a smiley face at the end of a legal contract."

This is the part of the lesson she keeps coming back to. Easing is voice. A default ease-in-out, the one your framework hands you for free, reads like Helvetica reads at body size: serviceable, anonymous, fine, forgettable. A hand-tuned cubic-bezier — one you've sat with for an afternoon, tweaking the control points until the curve matches the meaning of the surface — reads like a serif on a magazine page. It carries register. It says something about who made the product and what they think of you.

The banking app had reached for spring physics because spring physics are easy to import and they feel like craft. But craft in motion is not about which physics engine you pull in. It's about whether the curve matches the meaning. Spring on a confirmation toast for a small win, fine. Spring on a transfer of money, no. The motion needs to know what kind of sentence it's punctuating.

Entry: the email client that did almost nothing

August, last year. An email client, desktop, made by a small team in Helsinki. Mei used it for a month before she realized she couldn't remember a single transition. She went back and looked, deliberately, with the dev tools open.

There were transitions everywhere. The sidebar collapse was animated. The reading pane swap was animated. The compose window arrival was animated. But none of them had registered. She went into the CSS and pulled out the durations and curves and they were almost all the same: 140ms, a custom cubic-bezier that was mostly linear with a very slight ease-out at the tail. No bounce. No overshoot. No stagger. Just things moving from where they were to where they needed to be, on a budget so tight you couldn't notice the budget.

She wrote: "the whole product moves like a person who knows where they're going. No drama. The motion is doing the three jobs and then getting out of the way."

The three jobs. This is the framework she's been using for about six years now, and it's the one I want to give you in plain language, because everything else in this essay is downstream of it.

The three jobs motion does

Motion in a product UI has, as far as Mei can tell, exactly three jobs. Anything past these three is decoration, and decoration in motion is almost always a tax the user pays in milliseconds and attention.

1. 1.Confirming an action. The user clicked or tapped or pressed a key, and the product needs to tell them the system received the input. A button compresses by a pixel. A row briefly highlights. A checkmark fades in. This is the most under-respected job, because it's the cheapest and the most missed when it's absent. A click with no feedback feels broken even if it worked.
2. 2.Conveying spatial logic. Where did that thing go? Where did this thing come from? A modal that slides up from a button tells you the button is its origin. A drawer that slides in from the left edge tells you it lives there. A delete that fades and shrinks tells you the row collapsed in place, not that the page reloaded. Motion is the only honest way to teach users the spatial model of your interface without writing a help doc.
3. 3.Setting tempo. Is this product calm or hurried? A 240ms transition with a slow curve says "take your time, this is considered." A 90ms transition with a sharp curve says "keep moving, we're efficient." Tempo is the cumulative feeling of every transition in the product added together. It is the closest thing motion has to a typographic system. Once you set it, everything has to match it, or it stops feeling like one product.

Everything else is decoration. The staggered list reveal, the parallax on the hero, the icon that draws itself in on hover — these are not doing one of the three jobs. They are signaling, mostly to other designers, that someone here knows about motion. The user, who is trying to send money or read an email or buy a thing, is paying for that signal in milliseconds.

Why the Helsinki email client felt fast

It wasn't fast. Mei measured it. The actual response times were not better than a similar app she compared it to. The thing that made it feel fast was that the motion had been budgeted ruthlessly. Most transitions sat between 120 and 180 milliseconds. None of them had an overshoot. None of them staggered. The product had decided, somewhere, that its tempo was "calm but moving," and every transition in the app had been tuned to that single tempo.

That's the secret nobody on Dribbble will tell you. A great motion system is not a vocabulary of clever transitions. It is a small, consistent vocabulary of unclever ones, applied with discipline, in service of one tempo. It is closer to setting body type in a long-form magazine than it is to making a title sequence.

Entry: the SaaS landing page with fifteen scroll animations

Last November. A product page for a B2B SaaS — collaboration software, the category doesn't matter — that Mei was shown by a friend who was thinking of buying it. The friend said: "this looks well-designed, right?" Mei said nothing for about thirty seconds and then said, "it looks like a Framer template."

Here is what the page did, in order, as she scrolled. The hero headline faded up with a 40-pixel rise. The hero subhead followed, staggered by 80ms. The hero illustration rotated in three degrees as it appeared. The feature grid below it had each card lift on scroll, staggered. The testimonial section had quote marks that drew themselves in. The pricing table had numbers that counted up from zero. The footer logos had a marquee. The CTA button had a magnetic hover. The cursor had a custom dot that lagged behind the real cursor by 80ms.

Mei wrote, in the notebook: "this page is wearing every piece of jewelry it owns at once."

The cruel thing is that none of the individual animations were bad. The fade-up was tasteful. The magnetic button was tuned reasonably. The counting numbers were a fine choice for a pricing page. The problem was the sum. The product, communicated through the cumulative effect of all this motion, was: "please believe we are a serious company, look how much we care." And the user, even a non-designer user, reads that as insecurity, not polish. Polish is quiet. Insecurity is loud.

She made a list, in the notebook, of motion choices that read as expensive without ever being expensive. It's the most-quoted page in the book. I'm reproducing it here because I think it's the practical part of this essay people will want to steal.

• A 240ms exit with a slightly slower curve than the entrance. Things that arrive can be quick. Things that leave should take a beat longer, on a curve that decelerates. This reads as a product that's confident about its own departures. It costs nothing. It is one number different from what your framework hands you for free.
• Opacity tied to scroll position with a 60-pixel deadband. If you must do a scroll-triggered fade, give it a deadband — a range at the start where nothing happens — so it doesn't begin animating the instant the element is one pixel in view. The deadband is the difference between "the page is responding to my scroll" and "the page is performing for my scroll."
• A focus ring that fades in over 80ms with no scale. The default focus ring snaps. A faded focus ring, with no size change, just an opacity rise from 0 to 1 over 80ms, reads like the product is paying attention to keyboard users with a quietness that most products don't bother with. It is invisible to most users. It is everything to the people who notice.
• A hover state that only animates color, never size. Hover scale is the most overused effect in 2026 web design. It is the equivalent of underlining every important word. A hover that only changes color — and changes it on a 120ms curve — is a hover that respects the layout, doesn't shift the rest of the page, and trusts the user to notice a color change because users are not, in fact, idiots.
• A modal that fades the backdrop slightly faster than it scales in the dialog. 180ms backdrop, 220ms dialog, ease-out on both. The 40ms offset is below the conscious-perception threshold for most people, but it makes the modal feel like it arrives onto a stage that's already been set, instead of arriving and dragging the curtain with it. This is a free upgrade. It is two numbers.
• No animation on numbers that aren't telling a story. A dashboard number that animates from 0 to 47 every time the page loads is not impressive, it's annoying. A pricing page where the price counts up once, on first view, is a story beat. The difference is whether the motion is doing one of the three jobs, or just performing.

Entry: the keyboard shortcut overlay that wasn't there

Two months ago. A code editor — one of the major ones, you know which — where Mei hit the keyboard shortcut for the command palette and the palette appeared. She used it. She closed it. She used the editor for another forty minutes. Then she stopped, mid-sentence in a Slack message to me, and tried to remember how the command palette had arrived.

She couldn't. She tried again. She opened it, closed it, opened it. The palette fades in. The backdrop dims by about 40%. The palette itself does not scale, does not translate, does not stagger. It just appears, faded in over about 100ms, slightly above the center of the screen, where her eyes already were. The dismiss is the reverse, on a slightly longer curve, maybe 140ms.

She wrote: "the palette is the platonic example. It does the confirming job (you pressed the keys, here is the thing). It does the spatial job (it appears where attention already is, so there's no spatial puzzle). It does the tempo job (it matches the calm, focused tempo of the editor). It does nothing else. I have used this palette ten thousand times and I cannot describe how it moves."

Then, below that, in slightly smaller handwriting: "this is the goal."

Motion as typography, said plainly

Here is the case Mei's notebook is making, four years and three hundred pages in. Motion in a product UI is not animation. It is closer to typography. Animation is a medium of attention — title sequences, explainer videos, brand films — where the motion is the thing. Typography is a medium of inattention — body copy in a novel, footnotes in an academic paper, the legend on a map — where the craft is invisible to anyone who isn't looking for it, and felt by everyone.

Product UI motion is the second kind. It succeeds when nobody notices it. It fails when somebody does. This is the inverse of how most motion designers were trained, because most motion designers were trained on the first kind — they came from After Effects backgrounds, from title work, from brand. The instincts that make a good title sequence — bold openings, surprising curves, decorative flourishes — are the exact instincts that make bad product motion.

The shift, when it lands, is humbling. You stop making transitions that show off and start making transitions that show up. You spend an afternoon tuning a cubic-bezier on a single hover state and ship nothing else that day, and the product is better. You delete twelve animations on a landing page and ship two, and the page reads as more expensive, not less. You stop adding motion to imply craft, and the craft becomes legible.

What to delete this week

If you take one thing from Mei's notebook, take this: most product designers in 2026 have too much motion in their work, not too little. The fix is almost always subtraction. Open your product, or your landing page, and look for these specific things. Each of them is a candidate for deletion.

1. 1.Any scroll-triggered animation on text below the fold of a long page. Body copy doesn't need to enter. It needs to be readable. Scroll-triggered fades on paragraphs are the single most common motion mistake in B2B landing pages right now. Delete them. The page will feel faster and more confident.
2. 2.Any hover state that changes size. Replace with a hover state that changes color. If color isn't enough, your design system is fragile, and a scale animation is hiding the problem.
3. 3.Any stagger longer than 60ms between items in a list. Staggers feel choreographed in design tools and feel like waiting in real products. If you must stagger, keep it under 60ms. Better: don't stagger.
4. 4.Any bounce or spring on a transition that has no physical metaphor. A drawer can bounce because drawers, in the world, bounce. A confirmation modal cannot bounce, because confirming a thing has no physical equivalent. Bounce earns its place by reference. Without the reference, it's noise.
5. 5.Any animation on a metric or a number that isn't part of a deliberate story beat. Counting-up numbers on every page load is a tic. Counting-up numbers once, on a pricing page, on first view, can be a story. Know which one you're doing.
6. 6.Any custom cursor. I know. I'm sorry. The custom cursor is, in 2026, the single clearest signal that a site was made by someone who watched a tutorial. The cursor belongs to the operating system. Give it back.

You can probably do all six in an afternoon. The product will be better tomorrow than it was today, and you will have shipped no new features. This is, Mei would tell you, what most weeks of motion work actually look like once you've been doing it long enough. Subtraction. Then more subtraction. Then, occasionally, one careful addition.

What she opens before she opens her own files

Mei has a small list of products she studies on the mornings she's about to make motion decisions she's nervous about. Not for inspiration in the Pinterest sense — she doesn't screenshot anything. She just uses them for ten minutes each, with the dev tools open, paying attention to the curves and durations and the things that almost don't happen. She says it resets her hand the way a pianist runs scales before a recording session.

The products on her list have one thing in common. None of them, on first use, feel like motion is happening at all. The transitions are there, doing the three jobs, in the tempo the product has chosen. They're tuned. They're consistent. They're quiet. They are, in the strict sense she means it, well-typeset.

If you want a starting place — the small, curated set of products that get this right, the kind Mei studies before she opens her own files — the motion-art directory is where the directory keeps them. There aren't many. There shouldn't be. The list is short on purpose. Read it the way you'd read a shelf of well-set books: not to copy any one of them, but to remember what quiet looks like before you start making noise of your own.

Then go open your product. Find three animations you can defend, and keep them. Delete the rest. The notebook in Nakano would approve.