Motion
Movement at Lovie is purposeful and polished. Our animations guide the user, create rhythm, and make interactions feel natural and responsive.
Principles
Three core principles guide all motion design at Lovie.
Purposeful
Every animation serves a function — guiding attention, showing state changes, or reinforcing actions. Motion is never decorative.
Smooth
Transitions feel natural and polished. We use easing curves that mirror real-world physics — elements accelerate and decelerate naturally.
Restrained
Less is more. Subtle movements create elegance. Large, dramatic animations are reserved for key brand moments.
Timing & Easing
Standard duration and easing values for consistent motion across products.
Quick
150ms
ease-out
Micro-interactions, hover states, toggles
Standard
300ms
ease-in-out
Most transitions, page elements, modals
Emphasis
500ms
cubic-bezier(0.16, 1, 0.3, 1)
Hero animations, page transitions
Dramatic
800ms
cubic-bezier(0.16, 1, 0.3, 1)
Brand moments, loading sequences
Examples
Hover or tap the demos to see motion in action.
Fade In
Elements enter with a subtle fade and upward drift
Scale
Interactive elements scale gently on hover
Rotate
Continuous rotation for loading or processing states
Interaction Patterns
Experience
User-driven motion through scrolling, swiping, and tapping. These interactions should feel natural and intuitive, creating rhythm and tactility in the digital experience.
Expression
Brand-driven motion that communicates personality. Used in loading sequences, transitions between major views, and celebratory moments. These animations can be more pronounced.