🎉 Sora UI is now part of the shadcn/ui registry ecosystem.
Sora UI

Text Reveal (Mask)

A scroll-triggered masked slide-up text reveal animation.

Made by Axyl
Loading...

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

PropTypeDefault
text?
string
""
children?
ReactNode
-
as?
keyof JSX.IntrinsicElements
"p"
splitBy?
"lines" | "words" | "chars"
"lines"
delay?
number
0
duration?
number
0.8 (lines), 0.6 (words), 0.4 (chars)
stagger?
number
0.08 (lines), 0.06 (words), 0.01 (chars)
yPercent?
number
110
once?
boolean
true
viewportMargin?
string
"0px 0px -25% 0px"
className?
string
-
unitClassName?
string
-

Credits

Inspired by Annnimate. Reimplemented for Motion and React.

Built by Axyl. The source code will be available on GitHub soon.

Last updated: 6/9/2026