Masked Reveal
Free
A multi-line heading whose lines slide up from behind a mask, then an accent line draws in underneath.
Build worlds Ship stories Keep playing
Customize
0.12s
Underline
#ff784f
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/masked-reveal.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/masked-reveal.tsx.
Usage
import { MaskedReveal } from "@/components/ui/masked-reveal";
<MaskedReveal
as="h1"
lines={["Build worlds", "Ship stories", "Keep playing"]}
className="text-7xl font-black uppercase leading-[0.9]"
/>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| lines | string[] | — | One string per line of the heading. |
| as | "h1" | "h2" | "h3" | "h4" | "p" | "h2" | The heading element to render. |
| delay | number | 0 | Seconds before the first line starts. |
| stagger | number | 0.12 | Seconds between one line and the next. |
| duration | number | 0.9 | Seconds for each line to slide up. |
| once | boolean | true | Play only the first time the heading enters the viewport. |
| underline | boolean | true | Draw an accent line under the last line once it has landed. |
| underlineColor | string | "#ff784f" | Color of the underline. |
| className | string | — | Extra classes for the heading. |
Dependencies: motion