Page Transition Etiquette
Page transitions preserve continuity without changing the meaning of navigation. They should be short, predictable and subordinate to content readiness.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Page Transition Etiquette · the fallback remains complete
Purpose
Page transitions preserve continuity without changing the meaning of navigation. They should be short, predictable and subordinate to content readiness.
Use Blur Route for routine product movement, Shared Element for one clear object relationship, and expressive wipes only for occasional chapters. Avoid transition queues, mandatory intro animations or combining multiple transition metaphors.
Keep actual links, browser history and back behaviour intact. Transfer focus logically, never trap users, and bypass choreography under reduced motion. A failed or slow transition must not block the destination from rendering.
Source: packages/skills/patterns/page-transition-etiquette.md