Small animation for downloading an invoice
Design Engineering Tip:
Chat interactions shouldn’t always end with plain text.
Use interactive UI when it helps users explore, understand, or visualize information.
Don’t just explain it. Make it explorable.
Show more
Motion & Sound Design
Sound On for the Full Experience
Design Engineering Tip:
On macOS, a menu item blinks once before the menu closes. It confirms your click landed on the right item. Most web menus close on the same frame.
A quick blink is enough:
async function select(item) {
setHighlighted(false)
await wait(90)
setHighlighted(true)
await wait(90)
closeMenu()
}
Show more
Log In Interaction for an AI Tech Company
Design Engineering Tip:
Straight-line motion can feel a bit mechanical.
A subtle arc often makes it feel more natural, closer to how things move when you toss them.
Motion has arc() for this:
transition={{ path: arc({ strength: 0.9, rotate: 0.8 }) }}
Show more
These backgrounds are such a vibe
Design Engineering Tip:
Your accordion breaks ⌘F.
If closed answers aren't rendered, the browser can't find them. hidden="until-found" hides the content but keeps it searchable, and the browser opens it on a match.
Show more
Exploring a more visual approach to an asset picker
Making sharing payment links feel a little more alive
Exploring a recording state for AI chat.
Tap speech, gradient appears, recording feels active.
Design Engineering Tip:
If your UI has a draggable split view, don’t make users land on perfect proportions by hand. Add sensible snap points—25 / 50 / 75—and let the handle gently settle on release. Users get precision when they need it, and a calmer interface when they don’t.
Show more
Designing a modern banking experience
Bottom sheet animation to reveal more info
A onboarding experience that introduces the product with subtle animations
Mobile navigation for a wool clothing store
Design Engineering Tip:
Ever wondered why an idle animation suddenly snaps back when you trigger another interaction?
It’s often because both animations target the same property. By default, the later animation replaces the earlier one.
Instead of replacing your floating animation, compose the second one on top.
animation:
float 6s ease-in-out infinite,
shake 250ms ease;
animation-composition: replace, add;
Show more
Design Engineering Tip:
If text inside your container scales when the container animates, that's Motion's layout. It doesn't re-typeset the text - it scales it, like an image.
“Your Text”
layout="position" moves the text with the container but keeps it at its real size.
Show more
