Scroll Reveal

Text 31

About

Scroll Reveal animation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Reveal to your project and fits it to your theme.

Code

How Scroll Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollReveal } from "@/components/ui/scroll-reveal";

const DemoScrollReveal = () => {
  return (
    <div className="w-full min-h-[200vh] bg-black dark:bg-white p-4 flex flex-col items-center">

      <div className="mt-[60vh] text-center  text-6xl  text-white dark:text-black opacity-50">
         <p>Scroll down</p>
      </div>
      <div className="mt-[30vh] flex w-full justify-center">
       <ScrollReveal 
          baseOpacity={0}
          enableBlur={true}
          baseRotation={10}
          blurStrength={15}
          scrollStart='top bottom'
          scrollEnd='bottom top'
          rotationEnd="center center"
          wordAnimationEnd="bottom top-=10%"
          textClassName="text-4xl md:text-5xl lg:text-6xl font-bold text-white dark:text-black"
        >
          When does a man die? When he is hit by a bullet? No! When he suffers a disease?
          No! When he ate a soup made out of a poisonous mushroom?
          No! A man dies when he is forgotten!
        </ScrollReveal>
      </div>
    </div>  
  );
};

export { DemoScrollReveal };