Skip to content
MIZU.

PageWipe

The page transition — a full-screen sweep with a label, and an imperative API that hands you the midpoint.

Live — this one is real

Full-screen sweep — navigate at the midpoint

Usage

import type { ReactNode } from "react";
import { PageWipeProvider, usePageWipe } from "mizu-ui";

export function App({ children }: { children: ReactNode }) {
  return <PageWipeProvider>{children}</PageWipeProvider>;
}

export function NavLink() {
  const { wipe } = usePageWipe();

  const go = async () => {
    await wipe("The lab"); // resolves at the sweep midpoint
    window.location.assign("/lab"); // or call your router here
  };

  return <button onClick={go}>Enter</button>;
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect motion/PageWipe.tsx

Source is included in the npm package under src/motion/PageWipe.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
wipe(label?: string) => Promise<void>—Starts the sweep. The promise resolves at the midpoint — navigate then.

Accessibility

The overlay is aria-hidden and pointer-events:none. Under reduced motion the promise resolves immediately with no visual.

Motion

1.05s wipe easing sweep; the label fades in and out with the cover.

Works alongside

MaskLineRevealMagneticMarquee