MaskLine
The Mizu headline reveal — text rises from inside its own mask, one line at a time.
Live — this one is real
Usage
import { MaskLine } from "mizu-ui";
export function Headline() {
return (
<h1>
<MaskLine>Movement</MaskLine>
<MaskLine delay={0.15}>travels.</MaskLine>
</h1>
);
}
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/mask-lineEvery component imports from its own path, its name in kebab case.
import { MaskLine } from "@/components/ui/mizu/mask-line";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/MaskLine.tsx
Source is included in the npm package under src/motion/MaskLine.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| delay | number | 0 | Seconds before the line rises. |
| y | string | "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.