Playground: Micro-interactions
A component library focused entirely on micro-interactions — 15 components, each built and tuned by hand to teach one distinct interaction principle.
Quiet UI
Every component here is built in one specific motion dialect — restrained, B2B/dashboard-grade, Linear-inspired. The underlying assumption: the user is busy, skilled, and using this software for hours a day, so motion's job is to reduce friction and orient them, not entertain them.
- • Single accent color, used sparingly
- • No bounce/overshoot on routine actions
- • High spring damping (30–40+)
- • Border-first elevation over shadows
- • Durations mostly under 250ms
- • Motion communicates state change, not delight
Other dialects exist
Quiet UI is correct for dense B2B software — and actively wrong for several other categories. A quick map of how the same motion principles flex by industry:
Healthcare / medical"Calm with reserved alarm" — even stricter restraint than B2B, with urgency color/motion locked exclusively to genuine emergencies so it never cries wolf.
B2B fintech / enterpriseEssentially this library's dialect, almost unmodified — dense data, frequent professional use, trust signaled through precision.
AI / conversationalLess about confirming a discrete action, more about communicating an uncertain ongoing process over an unpredictable duration.
Consumer fintechQuiet-UI precision for anything touching money, but with rationed celebratory exceptions (confetti on first trade) at rare, meaningful moments.
Gaming — "juice"Motion gives far more feedback than the input deserves — squash/stretch, sound on everything, overshoot is the point, not a bug.
Consumer / socialMotion as brand personality and emotional texture. Bigger, more expressive, celebratory by default — restraint would read as cold here.
Creative / pro toolsClose to quiet UI, but optimized for direct manipulation — drag, resize, scrub need to feel exact and 1:1, not just calm.
E-commerceRestrained on data (prices, stock) but allows deliberate delight on conversion moments — add-to-cart, purchase confirmation.
Accessibility-first / governmentNot its own look so much as a strict constraint layer — near-zero non-essential motion, conservative ceilings, WCAG as a hard floor.