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
Bring an element in with a gentle fade-up on a soft spring. Serves Clarity.
Exit
Send it out the way it came, but faster — exits should never linger. Serves Continuity.
Spring Pop
Scale and fade together for menus, popovers, and tooltips. Serves Spatial Awareness.
Height springs from 0 to auto while opacity fades.
Spring Height
Animate height to auto for accordions, fading opacity alongside. Serves Continuity.
Hover Lift
A small lift and shadow on hover gives cards and tiles weight. Serves Feedback.
Stagger Reveal
Cascade children with a shared stagger so a list reads as one wave. Serves Rhythm.
Backdrop Fade
Fade the scrim independently from the content's spring. Serves Hierarchy.
Shared-Layout Morph
One surface morphs between two states instead of teleporting. Serves Continuity.
Press Feedback
A quick scale-down confirms the press before anything else happens. Serves Feedback.
Loop
A seamless marquee: duplicate the track and translate by half. Serves Restraint.
Reduced-Motion Fallback
Under prefers-reduced-motion, swap transforms for a plain opacity cross-fade — usability preserved. Serves Accessibility.