# MaskLine

The Mizu headline reveal — text rises from inside its own mask, one line at a time.

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

## Usage

```tsx
import { MaskLine } from "mizu-ui";

export function Headline() {
  return (
    <h1 style={{ margin: 0, fontSize: 64, fontWeight: 900, lineHeight: 1 }}>
      <MaskLine>Movement</MaskLine>
      <MaskLine delay={0.15}>travels.</MaskLine>
    </h1>
  );
}
```

## 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/mask-line
```

## Props

- `delay`: `number` (default `0`). Seconds before the line rises.
- `y`: `string` (default `"112%"`). Start position of the masked rise.

## Accessibility

Text remains in the document — the mask is pure CSS overflow. Screen readers see the full headline immediately.

## Motion

1.15s expo rise per line. Stagger delays for multi-line headlines.