# Scroll Effect React components, live previews & code, EneUI

Browse 33 Scroll Effect React and shadcn components: live preview, full source and a one-line install command for each. Copy into your project or hand it to your AI agent.

> Page: https://ui.eneawork.it/components/cat/scroll-effect
> Markdown: https://ui.eneawork.it/components/cat/scroll-effect.md

**Components:** 33


## Highlights

- [scroll-expansion-hero](https://ui.eneawork.it/comp/21st-arunachalam/scroll-expansion-hero), 21st-arunachalam
- [parallax-scrolling](https://ui.eneawork.it/comp/21st-osmosupply--osmo/parallax-scrolling), 21st-osmosupply--osmo
- [timeline](https://ui.eneawork.it/comp/21st-manuarora700--aceternity-ui/timeline), 21st-manuarora700--aceternity-ui
- [scanner-card-stream](https://ui.eneawork.it/comp/21st-rahil1202/scanner-card-stream), 21st-rahil1202
- [sticky-scroll](https://ui.eneawork.it/comp/21st-uilayout.contact--ui-layouts/sticky-scroll), 21st-uilayout.contact--ui-layouts
- [hero-scroll-animation](https://ui.eneawork.it/comp/21st-uilayout.contact--ui-layouts/hero-scroll-animation), 21st-uilayout.contact--ui-layouts
- [video-scroll-hero](https://ui.eneawork.it/comp/21st-isaiahbjork/video-scroll-hero), 21st-isaiahbjork
- [scroll-tilted-grid](https://ui.eneawork.it/comp/21st-ruixen.ui--ruixen-ui/scroll-tilted-grid), 21st-ruixen.ui--ruixen-ui
- [scroll-cards](https://ui.eneawork.it/comp/21st-ishamsu/scroll-cards), 21st-ishamsu
- [smooth-scroll](https://ui.eneawork.it/comp/21st-uilayout.contact--ui-layouts/smooth-scroll), 21st-uilayout.contact--ui-layouts
- [sticky-scroll-reveal](https://ui.eneawork.it/comp/21st-manuarora700--aceternity-ui/sticky-scroll-reveal), 21st-manuarora700--aceternity-ui
- [parallax-scroll](https://ui.eneawork.it/comp/21st-manuarora700--aceternity-ui/parallax-scroll), 21st-manuarora700--aceternity-ui

## FAQ

### How many React Scroll Effect components are there?

33 Scroll Effect components in the catalog, each with a live preview, full source and a one-line install command.

### How do I add a Scroll Effect component to my project?

Open a component and hit Copy code (or Install) to drop the source into your components folder, or run npx shadcn add "<url>" with the command shown on the page.

### Are they free?

Yes, browsing is always free and copying runs on a free daily quota; Premium removes the limit.

### Do they work with Next.js and Tailwind?

Yes, React components styled with Tailwind and shadcn/ui, compatible with Next.js, Vite and CRA.

## Related

- [All categories](/components)
- [Libraries](/libraries)