# PageWipe

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

- Family: Motion, imported from `mizu-ui` or `mizu-ui/motion`
- Docs: https://mizu.user64bit.world/components/page-wipe
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/motion/PageWipe.tsx

## Usage

```tsx
"use client";

import type { ReactNode } from "react";
import { Button, 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");
    window.location.assign("/lab");
  };

  return <Button onClick={go}>Enter</Button>;
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/page-wipe 0xuser64bit/mizu/button
```

## Props

- `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.