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
Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens: it styles itself inline and brings no stylesheet of its own. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.
npx shadcn@latest add 0xuser64bit/mizu/page-wipeEvery component imports from its own path, its name in kebab case.
import { usePageWipe, PageWipeProvider } from "@/components/ui/mizu/page-wipe";For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.
Inspect motion/PageWipe.tsx
Source is included in the npm package under src/motion/PageWipe.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| 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.