Practical studies on motion, feedback, and UI behavior. Each piece documents what was tried, what worked, and what changed in production work.
Optional play mode is available in command palette for easter eggs and experimental UI toys.
A practical motion grammar used across production surfaces. These values are design constraints, not one-off animation flourishes.
Spring presets
snappy
stiffness 500 / damping 35 / mass 1
buttons, toggles, immediate feedback
default
stiffness 300 / damping 30 / mass 1
general UI state transitions
gentle
stiffness 170 / damping 26 / mass 1
content reveal, structural transitions
soft
stiffness 120 / damping 20 / mass 1
large movement, modal context shifts
Timing tiers
Feedback
100-180ms
press states, icon state changes
State change
220-320ms
panel expand/collapse, route transitions
Context shift
350-500ms
modal enters, large layout shifts
Reduced motion rule
If reduced motion is enabled, transitions become opacity-first with duration collapse. No drag-dependent interactions are required to complete core flows.
Focused studies in feedback, state transitions, and motion behavior. Each pattern is designed to be reused in product work, not just as a demo.
Combines scale feedback with color transition and particle burst. The spring animation creates a satisfying tactile feeling that rewards engagement.
Button morphs to show download progress with fluid fill animation. State changes feel connected and provide clear feedback about system status.
Share menu appears with staggered spring animations. Each item enters with a slight delay, creating rhythm and drawing attention to options.
Play button morphs to pause state with layered animations. Progress bar updates smoothly to maintain the feeling of continuous playback.
Exploring natural motion through spring animations. These examples show how different spring configurations create distinct feelings and personality in interfaces.
Button is attracted to cursor within proximity. Spring physics create natural magnetic behavior that feels responsive without being jarring.
Click cards to cycle through stack. Each card has natural spring motion and slight rotation to create depth. Hover reveals the layered structure.
Input field scales gently on focus with elastic spring physics. The accent line grows smoothly, and character count appears with spring animation.
Selected projects that show how design and implementation work together across product, portfolio, and app work.
Portfolio system for an installation artist
A full-screen portfolio with restrained motion and client-managed editing through Sanity CMS.
Project Preview
Smoking cessation app
A 4.8★ iOS app where feedback, pacing, and copy are designed to support action during difficult moments.
Project Preview
Thoughts on craft, motion, and the intersection of design and engineering. Documenting lessons learned and principles discovered while building interfaces that feel alive.
Why great interfaces borrow from thousands of years of physical intuition, and how spring physics can make digital feel tangible.
Building a consistent language of movement that guides users naturally through digital spaces without overwhelming them.
How editorial typography principles can transform a gallery website from corporate to intimate, making art feel considered rather than commercialized.
More essays coming soon. Each one is tied to a shipped interface or a concrete interaction problem.