SingleOrchestratedEntrance [rule] v1.0.0

A single orchestrated page-load sequence with staggered reveals produces more delight than micro-interactions scattered across the interface. Motion budget should be concentrated at high-impact moments rather than spread uniformly.

Label

Prefer One Well-Orchestrated Page Load Over Scattered Micro-Interactions

Meta

• License: MIT AND Apache-2.0
• License Provenance: package-authorship-claim

Budget Guidance

• Allocate most of the motion budget to the page-load entrance sequence.
• Reserve micro-interactions for state changes with direct feedback meaning (button press, toggle, form validation).
• Hover animations should be subtle and fast (100-200ms) — they are confirmation, not spectacle.
• Do not animate elements that the user did not interact with and did not scroll to; reserve scroll-triggered reveals for intentional scroll experiences.

SingleOrchestratedEntrance [rule] v1.0.0

A single orchestrated page-load sequence with staggered reveals produces more delight than micro-interactions scattered across the interface. Motion budget should be concentrated at high-impact moments rather than spread uniformly.

Label

Prefer One Well-Orchestrated Page Load Over Scattered Micro-Interactions

Meta

• License: MIT AND Apache-2.0
• License Provenance: package-authorship-claim

Budget Guidance

• Allocate most of the motion budget to the page-load entrance sequence.
• Reserve micro-interactions for state changes with direct feedback meaning (button press, toggle, form validation).
• Hover animations should be subtle and fast (100-200ms) — they are confirmation, not spectacle.
• Do not animate elements that the user did not interact with and did not scroll to; reserve scroll-triggered reveals for intentional scroll experiences.

Sources

Relations

related: [@community/pattern-page-load-choreography, @community/pattern-stagger-reveal, @community/pattern-scroll-reveal, @community/rule-animation-duration, @community/constraint-motion-page-load-budget, @community/rule-reduced-motion-required]

Rationale

Micro-interactions on every element create animation fatigue — the user's attention is pulled in all directions and no single animation registers as meaningful. A choreographed entrance (hero → navigation → content columns → supporting elements, each delayed 50-80ms) creates a unified 'arrival' moment that communicates care and intent. The same amount of animation work, concentrated, lands with more perceived quality than distributed. Scattered micro-interactions also create compounded conflict: when three elements animate simultaneously in different directions, none communicates clearly.

Label

Prefer One Well-Orchestrated Page Load Over Scattered Micro-Interactions

Meta

• License: MIT AND Apache-2.0
• License Provenance: package-authorship-claim

Budget Guidance

• Allocate most of the motion budget to the page-load entrance sequence.
• Reserve micro-interactions for state changes with direct feedback meaning (button press, toggle, form validation).
• Hover animations should be subtle and fast (100-200ms) — they are confirmation, not spectacle.
• Do not animate elements that the user did not interact with and did not scroll to; reserve scroll-triggered reveals for intentional scroll experiences.