Page Transitions

Add an elegant overlay transition with 3 staggered layers. The overlay covers the screen during navigation and only reveals once the new page is fully loaded.

Prerequisites

• Framer Motion installed (already in project)
• Next.js App Router

Workflow

1. Create PageTransition Component - Create components/ui/page-transition.tsx
2. Update Layout - Add PageTransition to locale layout (renders above content)
3. Test Navigation - Verify overlay stays until page loads
4. Accessibility - Ensure reduced-motion preference is respected

Implementation

Step 1: Create PageTransition Component