Installation

Usage

import { MaskedTextReveal } from '@/components/sora-ui/texts/text-reveal-mask';

export default function Page() {
  return (
    <MaskedTextReveal
      as="h2"
      splitBy="lines"
      stagger={0.1}
      className="text-center text-3xl leading-tight text-foreground/75 [&_strong]:font-medium [&_strong]:text-foreground"
    >
      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>.
    </MaskedTextReveal>
  );
}

Props

When to Use

Use MaskedTextReveal for large body copy, pull-quotes, or taglines in tall scroll sections where a staggered upward reveal adds drama. The splitBy="lines" default is most legible for multi-line paragraphs; switch to "words" for shorter, more energetic reveals.

For headings paired with a colored block wipe, use TextRevealBlock instead — the mask variant is optimized for multi-line typographic content.

Accessibility

Each animated unit slides up from behind a CSS overflow: hidden mask — the text is in the DOM throughout and readable by screen readers. Setting once={true} (the default) ensures the animation does not loop. When prefers-reduced-motion: reduce is active, the mask is removed and text is fully visible from the start.

Credits

Inspired by Annnimate. Reimplemented for Motion and React.