Collection of motion & interaction design
Motion is how users know what the system is doing.
Philosophy
I treat motion as functional and emotive — never decoration: functionally it makes a system's behavior legible, and emotively it's felt before it's read, shaping whether a product feels responsive and worth trusting. The two examples below put both into practice.
Emotive motion for AI legibility
A spinner shows the system is working. It doesn't show what the system is thinking.
Compact button states
I defaulted to icon-only buttons — drawer real estate was tight. Hover states became the affordance layer: not a polish decision, the only place labels could live.
I used emotive click animations to reinforce action feedback and brand identity without spending additional UI real estate.
AI thinking states — a design decision
I explored two approaches, each with a different philosophy. The glowing outline treats thinking as a contained background process — quiet, ambient, low interruption — while sequential thought streaming treats it as something the user should follow, prioritizing transparency over quietness.
The tradeoff is attention cost: streaming demands more of the user. For a product where people need to trust AI recommendations enough to act on them, I judged that cost worth paying — streaming was the right call here.
Onboarding motion explainers
Most feature announcements go unregistered. These weren't polish. Each had a job.
Some things are easier shown than told.
Bring your own document for AI context.
Change models and have AI think again.
Search result more context preview.
Bulk approval of tasks.
Motion isn't a side skill for me — it's the foundation. My art direction background means thinking in time and behavior is native, not learned, and that translates directly to product design: richer interaction exploration, sharper intuition for how a transition should feel before it's prototyped, and a higher bar for how the system communicates state.