Astra

Scroll Reveal

Text gently unblurs and reveals on scroll.

Scroll Reveal, a Astra 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 Astra 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.