# Motion that earns its keep

> Framer Motion patterns for portfolio interfaces that feel fluid without becoming carnival rides.

- Author: Kevin Dalvi
- Published: 2026-07-19
- Read time: 7 minutes
- Tags: frontend, motion, design
- Canonical: https://www.kevindalvi.com/blog/delightful-motion

Most portfolio motion is apology jewelry. Bounce, blur, and stagger to distract from thin content. I caught myself doing it. Then I set a rule: every animation has to answer a job. Orient. Confirm. Connect. If it can’t, it dies.

Delight isn’t decoration. It’s the feeling that the interface understands what you just did. That can be a 120ms opacity fade. It doesn’t need confetti.

## Jobs motion can actually do

On my site, cards enter with shared layout so the grid feels continuous, not shuffled. Filters crossfade so you don’t lose place. Hero wireframes idle just enough to signal ‘this is a product surface,’ then stop. Presence, not performance art.

When a visitor changes filters, I want orientation, not applause. If they can’t tell what changed without reading labels, the motion failed. Even if it looked expensive in a screen recording.

- Shared layout for navigation between related states
- Short easing on primary actions. Never on body text
- Respect reduced motion; ship a still path first
- Cap simultaneous animations; one focal move at a time

> If you mute the motion and the product feels worse, keep it. If nothing changes, delete it.

## The Framer Motion trap

Libraries make it easy to animate everything. That’s the trap. I default to CSS for simple fades and reserve Framer Motion for layout transitions and gesture driven pieces. Complexity should concentrate where users feel continuity. Not on every hover.

Timing is taste. I keep a tiny dialect: 160 to 220ms for UI chrome, slightly longer for page level shifts, spring only when physics matches the metaphor. Random springs on cards make the site feel nervous.

I also audit motion against performance budgets. A buttery transition on a quiet laptop that stutters on a mid range phone isn’t delight. It’s exclusion. Prefer transforms and opacity; avoid layout thrash; measure on a device you don’t love.

## Ship the quiet version

Before I add motion, I ask whether the static layout already communicates hierarchy. If it doesn’t, animation won’t save it. Fix the composition, then layer motion as punctuation.

The portfolios I admire move like good editors: decisive, sparse, never showing off the tool. That’s the standard I’m writing toward. Motion that earns rent by making structure legible, then gets out of the way.