Motion Patterns
The reusable motion recipes that put the principles into practice — one card per pattern.
If Principles are the why, these patterns are the how. Each one is a small, proven recipe drawn straight from the components, built from the same handful of springs, durations, and easings so everything in GodUI moves with one voice. Press play on any card to see it run.
Enter
ClarityBring an element in with a gentle fade-up on a soft spring.
Exit
ContinuitySend it out the way it came, but faster — exits should never linger.
Spring Pop
Spatial AwarenessScale and fade together for menus, popovers, and tooltips.
Height springs from 0 to auto while opacity fades.
Spring Height
ContinuityAnimate height to auto for accordions, fading opacity alongside.
Hover Lift
FeedbackA small lift and shadow on hover gives cards and tiles weight.
Stagger Reveal
RhythmCascade children with a shared stagger so a list reads as one wave.
Backdrop Fade
HierarchyFade the scrim independently from the content's spring.
Shared-Layout Morph
ContinuityOne surface morphs between two states instead of teleporting.
Press Feedback
FeedbackA quick scale-down confirms the press before anything else happens.
Loop
RestraintA seamless marquee: duplicate the track and translate by half.
Reduced-Motion Fallback
AccessibilityUnder prefers-reduced-motion, swap transforms for a plain opacity cross-fade — usability preserved.