Interactions That Feel Alive
A curated collection of the micro-animations and motion patterns I use to bring interfaces to life — without sacrificing performance or accessibility.
Shimmer Button
A subtle light sweep across the button surface on hover to draw the eye to your CTA.
Skeleton Loader
Animated gradient bars communicate progress while content streams in from the server.
Card Lift
Cards lift on hover with a soft elevation shadow that signals interactivity.
Progress Ring
An animated SVG stroke that fills as progress increases—perfect for uploads and timers.
Toggle Switch
A spring-physics thumb slide with synchronized color and shadow transitions on state change.
Notification Ping
A pulsing badge that radiates outward to draw attention to new activity without being noisy.
Typewriter Cursor
Characters type out one-by-one with a blinking cursor—great for hero headers and storytelling.
Ripple FAB
Concentric rings ripple outward from the floating action button, signaling tap affordance.