Motion Principles
The philosophy behind every animation in GodUI — twelve principles, each with a live demo.
Motion in GodUI is never decoration. Every animation earns its place by making the interface clearer, calmer, and easier to follow. These twelve principles are the shared language behind the whole collection — each card below demonstrates one in motion. For the concrete recipes that implement them, see Patterns.
Clarity
Every motion should clarify what changed and why. One focal change at a time, never noise.
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, reinforcing a stable mental model of the layout.
Feedback
The interface answers every input immediately, confirming the action landed before anything else.
Timing & Easing
The curve is the character. Natural motion accelerates and settles; it rarely moves at a constant speed.
Anticipation
A subtle wind-up before a move primes the eye and makes the action feel intentional, not abrupt.
Follow Through
Motion doesn't stop on a dime. Trailing elements keep going and settle, giving weight and life.
Rhythm
Consistent stagger and cadence turn many moving parts into one coordinated, legible gesture.
Restraint
The best motion is felt, not noticed. When in doubt, do less — subtle beats flashy every time.
Performance
Animate only transform, opacity, and filter — the compositor-driven properties — so motion holds a buttery 60fps, and keep springs interruptible. Layout and paint props (width, box-shadow, clip-path) are gated by a CI check; intrinsic morphs like height:auto are the documented exception.
Accessibility
Honor prefers-reduced-motion: drop transforms, keep a subtle opacity change, and the interface still reads.
References
These principles aren't invented — they distil the established motion canon, and
the token values track it directly (durations map to Material 3's short3 / short4 / medium2; the spring presets mirror Material 3 Expressive's overshoot vs.
subdued schemes).