Motion Spec
The motion grammar used across production surfaces. Design constraints, not flourishes.
Spring presets
snappy
buttons, toggles, immediate feedback
stiffness 500 / damping 35
default
general UI state transitions
stiffness 300 / damping 30
gentle
content reveal, structural transitions
stiffness 170 / damping 26
soft
large movement, modal context shifts
stiffness 120 / damping 20
Timing tiers
Feedback
press states, icon state changes
100-180ms
State change
panel expand/collapse, route transitions
220-320ms
Context shift
modal enters, large layout shifts
350-500ms
Reduced motion
If reduced motion is enabled, transitions become opacity-first with duration collapse. No drag-dependent interactions are required to complete core flows.
Interaction Studies
Feedback, state transitions, and motion behavior. Patterns meant for product work, not demos.
Like Button
Scale feedback with color transition and particle burst. Spring physics reward engagement.
Download Progress
Button morphs to show progress with a fluid fill. State changes stay connected so the system feels legible.
Share Menu
Staggered spring reveals build rhythm without shouting — each item earns its own moment.
Playback Control
Play morphs to pause with layered transitions. Progress advances smoothly to hold the sense of continuity.
Essays
The Invisible Details of Interaction Design
Why great interfaces borrow from thousands of years of physical intuition, and how spring physics can make digital feel tangible.
Jan 20268 minMotion Grammar for Humane Interfaces
Building a consistent language of movement that guides users naturally through digital spaces without overwhelming them.
Jan 20266 minThe Typography System Behind Strawhouse
How editorial typography principles can transform a gallery website from corporate to intimate, making art feel considered rather than commercialized.
Jan 20264 min