Breakdowns

Real interactions, taken apart.

Each breakdown isolates one micro-experience, explains the engineering and design decisions, and lets you play with it directly. Filter, scroll, steal.

live6 interactive breakdowns — play with the controls
time
Optimistic UI
Apply the change instantly; reconcile with the server in the background. The user never waits for the network for actions that almost always succeed.
#perceived performance#state
from Linear inbox
time
Skeleton vs spinner
A spinner says ‘something is happening, please wait.’ A skeleton says ‘this is the shape of what you’re about to see.’ One demands attention; the other prepares you.
#perceived performance#attention
from Notion docs
craft
Fuzzy search
Match what the user means, not what they typed. Forgiving search reduces friction and reveals the depth of your content without forcing perfect spelling.
Optimistic UI patterns
Empty state principles
Loading state taxonomy
Error message anatomy
Color contrast & a11y
#typing#matching
try: "otmsc" or "empty"
from Linear cmd-K
motion
Easing curves
An ease-out moves like a car braking — it settles. A spring feels alive. Linear feels mechanical. Choosing the right curve is choosing how the interface 'breathes'.
cubic-bezier(0.2, 0.7, 0.2, 1)
#choreography#feel
from Apple Music
trust
Form choreography
Don't yell at the user the moment they start typing. Validate on blur, recover on input. Errors should arrive softly and leave the second they're resolved.
that doesn't look like an email — try again
#feedback#a11y
untouched
from Stripe checkout
trust
Empty states
Most products treat empty states like errors. The best ones treat them like opportunities — moments to teach, invite, or set tone before anything else exists.
Nothing here yet.
Your saved articles will appear here. Want to see how it works?
#onboarding#tone
from Figma boards
In the queue
community-proposed — pick one up on GitHub