Text Reveal

A component that creates engaging scroll-based text reveal animations, perfect for adding visual interest to long-form content or hero sections.

Installation

Basic Usage

Create a smooth fade-in animation for text as the user scrolls.

Transformyouruserinterfacewithourpowerfultextrevealanimations,creatingengaginganddynamicexperiencesthatcaptivateyouraudienceandenhancevisualstorytellingthroughsmooth,scroll-basedtransitions.

Centered Text

Center-align the text content for different layout options.

Createengaginganddynamicexperiencesthatcaptivateyouraudience.

Props

Prop

Type

Default

Description

body

string

—

The text content to be revealed.

className

string

—

Additional classes to apply to the container element

blockClassName

string

—

Additional classes to apply to each text block

textClassName

string

—

Additional classes to apply to the text content

sticky

boolean

—

Whether to use sticky scroll behavior

textCenter

boolean

—

Whether to center-align the text