React Bits

Scroll Reveal

Text gently unblurs and reveals on scroll.

Scroll Reveal, a React Bits component

Use Scroll Reveal in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/ScrollReveal-TS-TW
How to install React Bits components

Related components

  • Scroll Float

    Text gently floats / parallax shifts on scroll.

  • Blur Text

    Text starts blurred then crisply resolves for a soft-focus reveal effect.

  • Scroll Velocity

    Text marquee animatio - speed and distortion scale with user's scroll velocity.