Skip to content
Pinky UI

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

Native path
Enhanced path

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