page-transitions

Page transitions mask loading delays by displaying a fullscreen overlay during route changes. A three-layer animated overlay covers the screen when navigation starts, stays visible until the new page fully loads, then reveals the content—eliminating perceived lag and improving perceived performance.

Yes. Framer Motion enables staggered animations on fixed overlay layers that trigger on pathname changes. The component detects route shifts, animates the layers with scaleX transforms, waits for page load completion, then animates out to reveal the new content.

Page transitions must honor reduced-motion media queries to comply with accessibility standards. The overlay component should detect prefers-reduced-motion and skip animations or use instant transitions when enabled, ensuring users who need motion reduction aren't forced into jarring effects.

Fixed overlay elements must not interfere with pointer events or form inputs during transitions. Using pointer-events: none on inactive layers or timing the overlay reveal to match actual page readiness ensures users can interact once content appears.

Yes. The transition overlay integrates into locale layouts in Next.js App Router, triggering whenever the pathname changes—including locale switches. The three-layer overlay fires consistently across all route transitions within the layout wrapper.

The overlay remains visible until the page fully renders, maintaining the visual bridge between states. Once load completion is detected, the overlay animates away. For extended delays, the overlay prevents showing incomplete or flickering content to users.