Text Reveal Box Demo

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4import { CatalogScrollHint } from "@/components/catalog/catalog-scroll-hint";
5import { resolveScrollRoot } from "@/lib/catalog/resolve-scroll-root";
6import { waitForScrollerReady } from "@/lib/scroll/scroller-ready";
7import { TextRevealBox } from "@/components/sora-ui/texts/text-reveal-box";
8 
9const PARAGRAPHS = [
10  "We work at the intersection of systems design and psychological tension. Every project ships only when the player feels watched from the first frame and never fully shakes it after the last.",
11];
12 
13export default function TextRevealBoxExample() {
14  const rootRef = useRef<HTMLDivElement>(null);
15  const [scroller, setScroller] = useState<Element | Window | undefined>();
16 
17  useEffect(() => {
18    const node = rootRef.current;
19    if (!node) {
20      return;
21    }
22 
23    const resolved = resolveScrollRoot(node);
24 
25    waitForScrollerReady(resolved)
26      .then(() => {
27        setScroller(resolved);
28      })
29      .catch(() => {
30        /* preview unmounted */
31      });
32  }, []);
33 
34  return (
35    <div className="w-full" ref={rootRef}>
36      <CatalogScrollHint label="Scroll to reveal text word by word" />
37 
38      {scroller ? (
39        <TextRevealBox
40          classNames={{
41            paragraph:
42              "text-[clamp(1.5rem,2.5vw,4.5rem)] font-medium leading-none tracking-[-0.02em]",
43          }}
44          containerQuery
45          embedded
46          paragraphs={PARAGRAPHS}
47          pinDuration={4}
48          scroller={scroller}
49          variant="minimal"
50        />
51      ) : null}
52    </div>
53  );
54}