Route Crossfade

Create a route crossfade transition. The gentlest page transition: the outgoing page fades out while drifting 6px up, the incoming page fades in while rising 6px into place, each ~200ms ease-in-out, sequenced exit-then-enter (with Framer Motion: wrap the routed content in AnimatePresence mode='wait' and key it by the route path). Implementation details: position the outgoing and incoming views absolutely within a relative container during the swap so the layout doesn't stack them; scroll to top as the new page enters; keep the duration under 250ms - route transitions are felt, not watched. When to use: as the default transition for content sites and dashboards, where anything showier would wear out in a day. Pair it with the page's own entrance animations (hero stagger, scroll reveal) which take over after the crossfade lands. Under prefers-reduced-motion, use opacity only with no vertical drift. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.