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