Components
Loading preview...
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.