Scroll Based Word Reveal

A text reveal effect which progressively reveals text word by word as you scroll.

ReactHTML

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/scroll-based-word-reveal-html.json

Usage

Define the text you want to display with Scroll Based Word Reveal Effect in a p element with id="reveal-text" and class="reveal-text".

<p class="reveal-text" id="reveal-text">
  AtlasUI is an open-source library offering a suite of prebuilt animated
  components for React, Next.js, and Vanilla JS.
</p>

Add spacer div to create space between the text and the top of the page or replace it with your own content.

<div class="spacer"></div>
<p class="reveal-text" id="reveal-text">...</p>
<div class="spacer"></div>
Scroll Based Text RevealScroll Based Character Reveal