Installation

Usage

Wrap a heading or paragraph. With one child, the component clones that element so semantics stay intact.

import TextRevealBlock from "@/components/sora-ui/texts/text-reveal-block";

export default function Hero() {
  return (
    <TextRevealBlock blockColor="var(--accent-pro)">
      <h1>Every line wipes in with a deliberate block reveal.</h1>
    </TextRevealBlock>
  );
}

Scroll sections

animateOnScroll is true by default: each line plays once when the block enters the viewport. Stack multiple blocks in tall sections for a scroll-driven sequence:

<section className="flex min-h-svh items-center justify-center px-8">
  <TextRevealBlock blockColor="#fe0100">
    <h1>Headline with an accent wipe.</h1>
  </TextRevealBlock>
</section>

<section className="flex min-h-svh items-center justify-center px-8">
  <TextRevealBlock>
    <p>Body copy uses the foreground block color by default.</p>
  </TextRevealBlock>
</section>

The preview plays on mount (animateOnScroll={false}) so the effect fits the docs panel. Use the direction control in the preview to switch wipe travel (left, right, up, down). On a real page, leave the default animateOnScroll and stack blocks in tall sections—optional Lenis at the root for smooth scrolling.

Props

When to Use

Use TextRevealBlock for large display headings in hero sections, case study pages, or anywhere a deliberate reveal frames the text as a key moment. Stack multiple blocks inside full-viewport sections for a scroll-driven narrative — each block reveals as the user scrolls into that section.

Avoid it for body copy or longer paragraphs. The block wipe obscures the text while it plays, which frustrates readers who want to scan.

Accessibility

The text content is in the DOM and readable before and after animation. GSAP SplitText wraps each line in a <div>; semantic heading or paragraph structure is preserved by the as prop. When prefers-reduced-motion: reduce is set, GSAP skips the animation and the text is visible immediately.