Line Mask Headline
NewPro
A headline split into the lines the browser really rendered, which slide up from behind a mask one after another and split again on resize.
Customize
0.11s
3°
#ff784f
When to use it
- Long hero headlines whose line breaks change on every screen
- Translated or CMS headings whose length you cannot predict
- Editorial section titles in a portfolio or case study
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 140
Installation
Line Mask Headline is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy line-mask-headline.tsx into components/ui and run npm install motion.
Usage
import { LineMaskHeadline } from "@/components/ui/line-mask-headline";
<LineMaskHeadline
as="h1"
text="We build small worlds that stay with you long after the credits roll"
highlight={["small", "worlds"]}
className="text-6xl font-black uppercase leading-[0.95]"
/>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline. It wraps wherever the browser wraps it, with no manual line breaks. |
| as | "h1" | "h2" | "h3" | "h4" | "p" | "h2" | The element to render. |
| delay | number | 0 | Seconds before the first line starts. |
| stagger | number | 0.11 | Seconds between one line and the next. |
| duration | number | 0.95 | Seconds for each line to slide up. |
| tilt | number | 3 | Degrees each line starts rotated, for a small swing as it rises. 0 keeps it straight. |
| highlight | string[] | [] | Words drawn in the accent color, matched without case or punctuation. |
| accentColor | string | "#ff784f" | Color of the highlighted words. |
| once | boolean | true | Play only the first time the headline enters the viewport. |
| className | string | — | Extra classes for the headline. |
Dependencies: motion