Block Text

A text animation component that reveals text with sliding block overlays.

Made by chirag
Edit on GitHub

Beautiful Block

Text Reveal

Animation

Installation

Usage

import BlockText from '@/components/split-text/block-text';

export default function Example() {
  return (
    <BlockText
      animationOnScroll={false}
      delay={0.5}
      blockColor="#3b82f6"
      stagger={0.1}
      duration={0.6}
    >
      <h1>Beautiful Block</h1>
      <h1>Text Reveal</h1>
      <h1>Animation</h1>
    </BlockText>
  );
}

API Reference

BlockText

PropTypeDefault
children
React.ReactNode
-
animationOnScroll?
boolean
true
delay?
number
0
blockColor?
string
"#000"
stagger?
number
0.15
duration?
number
0.75

How it Works

The component uses GSAP's SplitText plugin to split text into individual lines, then animates colored blocks sliding across each line to reveal the text beneath. The animation can be triggered on mount or when scrolling into view.

Credits

Built by Chirag Saxena. The source code is available on GitHub.

Last updated: 12/1/2025