Scroll Based Text Reveal

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

ReactHTML
React
Open in
Scroll to see magic :)

AtlasUI is an open-source library offering a suite of prebuilt animated components for React, Next.js, and Vanilla JS.

Loved it? Star us on GitHub!

Installation

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

Usage

import { ScrollBasedTextReveal } from "@/components/scroll-based-text-reveal";
<ScrollBasedTextReveal text="AtlasUI is an open-source library offering a suite of prebuilt animated components for React, Next.js, and Vanilla JS." />
Box RevealScroll Based Word Reveal