Motion Graphics Made Me Suspicious of Pretty UIMotion Graphics Made Me Suspicious of Pretty UI

Before I wrote components I cut music videos. The workflow was After Effects, Premiere, and a lot of time in a dark room making things move in ways that felt inevitable. I worked on broadcast spots, Danny Ocean videos, promotional content where every frame was considered and every transition had a reason. When I moved into product design and UI engineering, I brought that background with me — and it made me immediately suspicious of everything I saw moving on screen.

---

Broadcast Has Infinite Time. UI Has 150ms.

In broadcast motion graphics, you have the luxury of the frame. Nobody is trying to accomplish a task while watching your spot — they're watching the spot. You can spend eight seconds on a title card reveal because that is the content. The easing curve, the motion blur, the secondary animation on the trailing element — all of it is the work.

In a product interface, the user wants to submit the form, find the setting, read the result. Animation that takes attention is animation that's in the way. The discipline I learned in broadcast — that every moving element must justify its existence — applies in product UI with higher stakes. In broadcast, an unnecessary flourish is wasteful. In UI, it's friction.

The specific number that recalibrated my thinking was the 150ms threshold. At or below 150ms, transitions feel like the UI responding. Above 300ms, they start feeling like the UI performing. The two are very different experiences, and broadcast trained me to make things perform.

The Discipline vs. the Excess

What motion graphics actually teaches is restraint through constraint. On a music video, you're cutting to beats, hitting marks, landing motion on the two and the four. The constraint forces precision. You don't add movement because movement looks cool — you add it because the music opened a window and you have one second to fill it with something that reads.

In UI, there are no beats. Most developers add animation because it looks polished, not because something changed and the user needs to understand what changed. The result is interfaces where everything moves and nothing communicates. Dropdowns that ease open, modals that scale in, tooltips that fade, tabs that slide — all playing simultaneously, all demanding attention, none earning it.

The broadcast discipline asks: what is this animation for? What does the user understand after seeing it that they didn't understand before?

If the answer is "it looks nice," cut it.

When Motion Actually Works

There are four things animation does well in product UI, and they all map to communication problems:

State transitions — showing the relationship between before and after. When a component changes state (collapsed to expanded, off to on), motion helps the user understand that the new state came from the old one. No jump cut.

Spatial continuity — in navigation, motion communicates where things live. A panel sliding in from the right teaches the user that it lives to the right. They can slide it back. The animation is a map.

Loading and progress — something is happening and you need the user to wait. Purposeful motion (a spinner, a skeleton, a progress bar) communicates ongoing work without requiring text.

Feedback — a button press that gives a micro-response, a shake on invalid input, a checkmark drawing in on success. These are signals, not decoration.

Everything outside these four categories is decoration. Decoration has a cost, and in broadcast I learned to pay that cost deliberately. In UI, most developers haven't done that accounting.

What I Actually Use Now

Coming from After Effects, I found Framer Motion's API familiar — keyframes, easing, variants, orchestration. The muscle memory transferred. But I use far less of it than I expected to when I started.

// the only easing I reach for in 80% of cases
const transition = {
  duration: 0.15,
  ease: [0.4, 0, 0.2, 1], // material standard easing
};

That's it for most state transitions. No spring physics unless something is being thrown or caught. No bounce unless the element is bouncing as part of its meaning. Springs look great in Dribbble shots and feel exhausting in daily-use software.

The music video work taught me to read a room. A hip-hop spot has different energy than a luxury brand film — the motion language changes. Product UI has energy too, and most of it is transactional and focused. Match the motion to the context.

The Real Test

Here's what I run everything through now: if you removed all the animation from this interface, would users be confused? Would they lose information about what just happened or where they are?

If the answer is no — if the UI works just as well without the motion — the motion is serving the designer's pleasure, not the user's understanding.

That's the broadcast lesson, actually. Make it for the audience, not for the reel.