Masked Line Reveal

Reveal a heading one line at a time, with a small tilt and blur as each line settles.

Dependencies: No extra packages
Size: 212 lines
Controls: 10 controls

example.tsx

1import { MaskedLineReveal } from "@/components/onycx/masked-line-reveal";23export default function Example() {4  return (5    <MaskedLineReveal6      text={"Nothing to do.|*Everything to feel.*"}7      accent={"#d6c5a0"}8      stagger={0.1}9      duration={1.05}10      offset={-105}11      blur={5}12      rotate={-2}13      align={"center"}14      size={"lg"}15      trigger={"inView"}16    />17  );18}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/masked-line-reveal.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/masked-line-reveal.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the masked-line-reveal.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
text	string	—	Lines separated by "\|". Asterisks set words in the italic accent colour.
eyebrow	string	"ROOTED IN NATURE. CENTERED ON YOU."	10px / 600 / .17em label above the heading. Empty hides it.
paragraph	string	—	Copy under the heading; \| breaks the line. Empty hides it.
color / accent / muted	string	"#f4f0e6" / "#d6c5a0" / "#e1e6da"	Heading, accent word and paragraph colours.
stagger / duration	number	0.1 / 1.05	Seconds between lines and seconds per line.
offset / blur / rotate	number	-105 / 5 / -2	Starting yPercent, blur (px) and tilt (deg) of each line; negative offset drops lines in from above.
align	"left" \| "center"	"center"	Text alignment.
size	"md" \| "lg" \| "xl"	"lg"	Source scales: section heading clamp(52px, 7vw, 110px), statement clamp(60px, 8.8vw, 160px), hero clamp(115px, 13.3vw, 245px), each with its phone size.
trigger	"inView" \| "mount"	"inView"	Play once the block's top passes 94% of the viewport, or right after mount.
as	"h1" \| "h2" \| "h3"	"h2"	Heading level.