Components
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.
Loading preview...
import Example from "@/components/ui/horizontal-scroll-carousel";
export default function DemoOne() {
return <Example />;
}