Text Reveal (Mask) Demo

1"use client";
2 
3import {
4  MaskedTextReveal,
5  type MaskedTextRevealProps,
6} from "@/components/sora-ui/texts/text-reveal-mask";
7 
8export default function MaskedTextRevealExample({
9  splitBy = "lines",
10  stagger = 0.1,
11  duration,
12  yPercent = 110,
13  delay = 0,
14  viewportMargin = "0px 0px -20% 0px",
15  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",
16}: MaskedTextRevealProps) {
17  return (
18    <div className="w-full">
19      <MaskedTextReveal
20        as="h2"
21        className={className}
22        delay={delay}
23        duration={duration}
24        splitBy={splitBy}
25        stagger={stagger}
26        viewportMargin={viewportMargin}
27        yPercent={yPercent}
28      >
29        Every stride is a statement. Every finish line a new beginning. We build
30        gear for athletes who refuse to settle for{" "}
31        <strong>yesterday&apos;s pace</strong>. Push beyond limits. Outrun
32        expectations. This is where <strong>champions are made</strong>.
33      </MaskedTextReveal>
34    </div>
35  );
36}