# Scroll Effect components

> Enhance your React apps with 13 Tailwind CSS scroll effect components that create dynamic, interactive user experiences in Next.js.

41 components available. Showing all of them below.

- [Scroll Fade Effect](https://21st.dev/@moumensoliman/components/scroll-fade-effect.md) — by Moumen Soliman
- [Scroll 01](https://21st.dev/@felipemenezes098/components/scroll-01.md) — by felipemenezes098
- [Scroll media expansion hero](https://21st.dev/@arunachalam/components/scroll-expansion-hero.md) — by Arunachalam
- [Timeline](https://21st.dev/@manuarora700/components/timeline.md) — by Manu Arora
- [Parallax Scrolling](https://21st.dev/@osmosupply/components/parallax-scrolling.md) — by osmosupply
- [Progressive blur](https://21st.dev/@ibelick/components/progressive-blur/with-slider-and-different-directions.md) — by Julien Thibeaut
- [Hero scroll animation](https://21st.dev/@uilayout.contact/components/hero-scroll-animation.md) — by UI Layouts
- [ScrollTiltedGrid](https://21st.dev/@ruixen.ui/components/scroll-tilted-grid.md) — by Ruixen UI
- [ScannerCardStream](https://21st.dev/@rahil1202/components/scanner-card-stream.md) — by Rahil Vahora
- [Scroll Cards](https://21st.dev/@ishamsu/components/scroll-cards.md) — by Shamsu Musthafa
- [Sticky Scroll Reveal](https://21st.dev/@manuarora700/components/sticky-scroll-reveal.md) — by Manu Arora
- [Video Scroll Hero](https://21st.dev/@isaiahbjork/components/video-scroll-hero.md) — by Isaiah
- [Parallax Grid Scroll](https://21st.dev/@manuarora700/components/parallax-scroll.md) — by Manu Arora
- [Scroll X Carousel](https://21st.dev/@youcefbnm/components/scroll-x-carousel/reversed.md) — by YoucefBnm Bnm
- [Scroll Card](https://21st.dev/@uilayout.contact/components/scroll-card.md) — by UI Layouts
- [Smooth Scroll](https://21st.dev/@uilayout.contact/components/smooth-scroll.md) — by UI Layouts
- [Progressive Blur](https://21st.dev/@reuno-ui/components/progressive-blur.md) — by reuno-ui
- [Scroll Progress](https://21st.dev/@ibelick/components/scroll-progress.md) — by Julien Thibeaut
- [Scroll and Swap Text](https://21st.dev/@danielpetho/components/scroll-and-swap-text.md) — by Daniel Petho
- [Kinetic Scroll Gallery](https://21st.dev/@dhileepkumargm/components/kinetic-scroll-gallery.md) — by Dhileep Kumar GM
- [Masonry Grid with Scroll Animation](https://21st.dev/@ravikatiyar162/components/masonry-grid-with-scroll-animation.md) — by Ravi Katiyar
- [Scroll Progress Bar](https://21st.dev/@bundui/components/scroll-progress-bar.md) — by Shadcn UI Kit
- [Scroll Image Tunnel](https://21st.dev/@ruixen.ui/components/scroll-image-tunnel.md) — by Ruixen UI
- [Parallax Motion](https://21st.dev/@avanishverma4/components/parallax-motion.md) — by Awanish Verma
- [Parallax](https://21st.dev/@youcefbnm/components/parallax.md) — by YoucefBnm Bnm
- [Parallax Scrolling Effect](https://21st.dev/@minhxthanh/components/parallax-scrolling-effect.md) — by Le Thanh
- [Scroll-linked spring animation](https://21st.dev/@itsankitverma/components/scroll-linked-spring-animation.md) — by Ankit Verma
- [Horizontal Scroll](https://21st.dev/@uilayout.contact/components/horizontal-scroll.md) — by UI Layouts
- [Scroll Fade List](https://21st.dev/@dqnamo/components/scroll-fade-list.md) — by dqnamo
- [CSS Image Stacking](https://21st.dev/@uilayout.contact/components/css-image-stacking.md) — by UI Layouts
- [Stacking Cards](https://21st.dev/@cnippet.dev/components/stacking-cards.md) — by Cnippet
- [Scroll Animation](https://21st.dev/@saurabh10102/components/scroll-animation.md) — by Saurabh Chauhan
- [Stacking Cards](https://21st.dev/@cnippet.dev/components/stacking-cards/testimonial-cards.md) — by Cnippet
- [Horizontal Depth Fade](https://21st.dev/@unlumen/components/horizontal-depth-fade.md) — by Unlumen UI
- [Scroll Progress](https://21st.dev/@cnippet.dev/components/scroll-progress.md) — by Cnippet
- [HeroUI Scroll Shadow](https://21st.dev/@hero_ui/components/heroui-scroll-shadow/hide-scroll-bar.md) — by Hero Ui
- [Edge Blur](https://21st.dev/@cult-ui/components/edge-blur.md) — by cult/ui
- [HeroUI Scroll Shadow](https://21st.dev/@hero_ui/components/heroui-scroll-shadow/visibility-change.md) — by Hero Ui
- [HeroUI Scroll Shadow](https://21st.dev/@hero_ui/components/heroui-scroll-shadow/custom-shadow-size.md) — by Hero Ui
- [Scroll Blur](https://21st.dev/@corr/components/scroll-blur.md) — by Liam Corrigan
- [Parallax Image](https://21st.dev/@pulkitxm/components/parallax-image.md) — by Pulkit

Full component directory: https://21st.dev/llms.txt