A growing collection of motion work spanning product UI and illustrated narrative; exploring rhythm, weight, and timing as design tools.
Role
UI & Motion Designer
Timeline
Ongoing
Year
2022 — 2026
Tools
After Effects, Figma, Procreate
Approach
Motion is not decoration. Every transition carries information; it tells the user what just happened, what is coming next, and how the system feels. The work in this collection sits across two directions: UI microinteractions that solve specific communication problems inside products, and illustrated character animation where motion drives narrative and tone.
Both share the same underlying questions: what is the rhythm of this moment, how heavy or light should the movement feel, and what timing makes it read as inevitable rather than arbitrary.
Process — from rough to final
Three stages of a single shot
Rough timing first, then line cleanup, then final colour and composition. Each pass answers a different question; when, what, and how.
UI Microinteractions
Tab switch with sliding pill
The active-state indicator preserves spatial continuity between tabs, so the user always knows where they came from.
Dark mode toggle
The icon morph and gradient shift make the mode change feel atmospheric, closer to a sunset than to a binary switch.
Biometric authentication
Concentric pulses and the dotted scan loop signal active recognition; the colour cue confirms success without copy.
Inline error feedback
A short shake on the input plus a bouncing-in error mark gives immediate, embodied feedback without an intrusive modal.
Authentication flow
OTP code entry — tutorial sequence
A guided demonstration of the full input flow: prompt, finger cursor, character-by-character feedback, and the dot that lands as confirmation.
Stepper & quantity
Cart quantity stepper
The +/- buttons trigger a smooth digit transition with a subtle bounce, the kind of micro-feedback that makes a tap feel acknowledged.
Date & time UI
Wheel-based date selector
The dial spins to the selected day, then collapses into a compact pill.
Kinetic day-of-week
Large bold type as the central UI element, calendar reframed as editorial.
Day + number counter
Minimal motion that establishes hierarchy between weekday and date.
Illustration & narrative motion
Watering — colour split loop
A continuous loop exploring shape transformation and palette inversion across a diagonal frame split.
Character constructor
Outfit and props assemble around the figure in a staggered reveal, designed as an introduction sequence for an animated short.
Reflection
Working on motion has changed how I design static interfaces. Once you start thinking in timing curves and easing, you notice that even still screens have an implied rhythm, the visual hierarchy is a sequence in disguise. The best motion work I have done is the kind that, after seeing it, you cannot imagine the interface without.