Text Reveal (Mask)

Component 27

About

A scroll-triggered text reveal that masks and slides words up line-by-line, word-by-word, or character-by-character, with support for inline emphasis.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Reveal (Mask) to your project and fits it to your theme.

Code

How Text Reveal (Mask) is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  MaskedTextReveal,
  type MaskedTextRevealProps,
} from "@/components/ui/text-reveal-mask";

export default function MaskedTextRevealExample({
  splitBy = "lines",
  stagger = 0.1,
  duration,
  yPercent = 110,
  delay = 0,
  viewportMargin = "0px 0px -20% 0px",
  className = "mx-auto max-w-3xl text-center font-normal text-xl leading-snug tracking-[-0.02em] text-foreground/75 [&_strong]:font-medium [&_strong]:text-foreground",
}: MaskedTextRevealProps) {
  return (
    <div className="w-full">
      <MaskedTextReveal
        as="h2"
        className={className}
        delay={delay}
        duration={duration}
        splitBy={splitBy}
        stagger={stagger}
        viewportMargin={viewportMargin}
        yPercent={yPercent}
      >
        Every stride is a statement. Every finish line a new beginning. We build
        gear for athletes who refuse to settle for{" "}
        <strong>yesterday&apos;s pace</strong>. Push beyond limits. Outrun
        expectations. This is where <strong>champions are made</strong>.
      </MaskedTextReveal>
    </div>
  );
}