Astra

Scroll Float

Text gently floats / parallax shifts on scroll.

Scroll Float, a Astra component

Use Scroll Float 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/ScrollFloat-TS-TW
How to install Astra components

Related components

  • Depth Text

    Layered extruded type with parallax that shifts against the pointer.

  • Scroll Reveal

    Text gently unblurs and reveals on scroll.

  • Scroll Velocity

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