Scroll Based Text Reveal

A text reveal effect which animates the opacity of the text as you scroll.

ReactHTML

Installation

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

Usage

Define the text you want to display with Scroll Based Text 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>
Box RevealScroll Based Word Reveal