Motion Principles
The rules behind every animation in GodUI. Twelve principles, each with a live demo.
In GodUI, an animation has to make the interface clearer or easier to follow. These twelve principles guide the whole collection, and each card below demonstrates one. For the recipes that implement them, see Patterns.
Clarity
Every motion should clarify what changed and why. Show one focal change at a time.
Continuity
Objects move along visible paths instead of teleporting, so the eye never loses the thread.
Hierarchy
Sequence and emphasis tell you what matters first. The primary element leads; the rest follow.
Spatial Awareness
Elements enter and exit from where they live, so the user keeps a stable picture of the layout.
Feedback
The interface answers every input immediately, confirming the action landed before anything else.
Timing & Easing
The easing curve sets how a motion feels. Natural motion accelerates and settles; it rarely moves at a constant speed.
Anticipation
A small wind-up before a move prepares the eye, so the action reads as intentional.
Follow Through
Motion doesn't stop on a dime. Trailing elements keep going and then settle, which gives them weight.
Rhythm
Consistent stagger and timing make many moving parts read as one gesture.
Restraint
Good motion goes unnoticed. When in doubt, do less: a subtle animation beats a flashy one.
Performance
Animate only transform, opacity, and filter (the properties the compositor runs) so motion holds 60fps, and keep springs interruptible. In core components, a CI check fails any animation of layout or paint properties (width, height, box-shadow, clip-path).
Accessibility
Honor prefers-reduced-motion: drop transforms, keep a subtle opacity change, and the interface still reads.
References
These principles come from established motion guidelines, and the token values
follow them. Durations map to Material 3's short3 / short4 / medium2, and the spring presets mirror Material 3 Expressive's overshoot and
subdued schemes.