# Horizontal Scroll Carousel

> HorizontalScrollCarousel Component Category: UI · Scroll Interaction · Showcase Framework: React (Framer Motion + TailwindCSS)  📋 Description: HorizontalScrollCarousel is an immersive scroll-based carousel built with Framer Motion and React, where cards move horizontally as you scroll vertically. It’s ideal for visual storytelling, case studies, portfolios, and interactive galleries.  🌟 Features: 🎞 Scroll-Triggered Animation: Vertically scroll to reveal horizontally sliding cards  ⚙️ Powered by Framer Motion’s useScroll and useTransform  📱 Responsive and Adaptive  🖼️ Customizable cards with titles and background images  💡 Hover effect: Image zoom-in for interactivity  🧩 Ideal Use Cases: Visual portfolios  Image galleries  Case studies and feature highlights  Storytelling sections of landing pages  📦 Dependencies: react  framer-motion  tailwindcss  🛠 Setup & Configuration: Replace local image paths with your own or use Unsplash CDN links:  js Copy Edit const cards = \[   {     url: "https://images.unsplash.com/photo-1581291519195-ef11498d1cf5?w=800&q=80&auto=format&fit=crop",     title: "Title 1",     id: 1,   },   // ...more cards \]; Make sure to wrap the component in a scrollable container to trigger the animation effectively.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/horizontal-scroll-carousel

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/horizontal-scroll-carousel?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

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