Page Wipe

Create a page wipe transition. Navigating between pages sends a solid accent-colored panel sweeping across the screen: it enters from the bottom (translateY(100%) to 0, 380ms cubic-bezier(0.22, 1, 0.36, 1)), the route swaps while the screen is fully covered, then the panel continues out the top (to translateY(-100%)). Implementation: a fixed full-screen panel (inset: 0, z-index above everything, pointer-events: none) rendered during transitions. Sequence: start the cover animation, swap the page content at the covered midpoint (~380ms), then play the exit. In a router, intercept navigation, run the cover, navigate, then release. Variants: two staggered panels (accent then ink, 80ms apart) read extra premium; a brand logo can sit centered on the panel during the covered beat. Details: never leave the panel blocking interaction (remove it after exit); keep the whole sequence under ~800ms so navigation stays snappy; scroll the new page to top while covered. Under prefers-reduced-motion, swap routes with a plain instant fade and no panel. 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.