Docs

Scroll Based Text Reveal

Scroll Based Text Reveal

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

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

Installation

Install the following dependencies:

npm install motion

Copy and paste the following code into your project.

components/atlas_ui/scroll-based-text-reveal.tsx
"use client";
 
import { useRef } from "react";
import { motion, useScroll } from "motion/react";
 
interface ScrollBasedTextRevealProps {
  text: string;
}
 
export const ScrollBasedTextReveal = ({ text }: ScrollBasedTextRevealProps) => {
  const container = useRef(null);
  const { scrollYProgress } = useScroll({
    target: container,
    offset: ["start 0.8", "start 0.3"],
  });
 
  return (
    <div className="flex flex-col items-center justify-center ">
      <div className="h-[50vh]" />
      <motion.p
        style={{ opacity: scrollYProgress }}
        ref={container}
        className="text-5xl font-bold max-w-5xl text-center"
      >
        {text}
      </motion.p>
      <div className="h-[50vh]" />
    </div>
  );
};

Update the import paths to match your project setup.

Usage

import { ScrollBasedTextReveal } from "@/components/atlas_ui/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." />
Reveal EffectScroll Based Word Reveal