Motion Patterns
Reusable motion recipes that put the principles into practice, one card per pattern.
Principles explain why GodUI moves the way it does. These patterns show how. Each one is a small recipe taken from the components and built from the same few springs, durations and easings, so every GodUI component moves the same way. 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 marquee with no visible seam: duplicate the track and translate by half.
Reduced-Motion Fallback
AccessibilityUnder prefers-reduced-motion, swap transforms for a plain opacity cross-fade so the interface stays usable.