motion-carousel-next-js 🎞️

A responsive and animated carousel built with Next.js, TypeScript, and Motion from Framer.

🌐 Live Demo

Check out the live demo: motion-carousel-next-js.vercel.app

🎯 About Motion

motion is the core component from Motion used to animate elements in React. It wraps standard HTML/React elements and allows you to apply animations using simple props like animate, initial, and transition.

⚙️ Tech Stack

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• Motion

✨ Features

• Smooth slide transitions with motion.div
• Responsive layout for all devices
• Lightweight and easy to integrate
• Multiple carousel variants to suit different use cases

🎨 Carousel Types

Base Carousel

The foundation carousel with essential navigation and smooth animations. Perfect for standard image galleries and content displays.

Peek-a-boo Carousel

A modern carousel that shows previews of adjacent slides, creating an engaging browsing experience. Users can see what's coming next and previous, encouraging exploration.

Infinite Loop Carousel

Seamlessly cycles through content with no visible start or end. Ideal for testimonials, partner logos, or any continuously rotating content.

Infinite Logo Carousel

A specialized infinite carousel designed for displaying partner or brand logos in a continuous loop. Perfect for showcasing sponsors, clients, or technology stacks with smooth, uninterrupted motion.

Playlist Carousel

Designed for media-rich content with a sidebar navigation showing all items. Perfect for video playlists, image collections, or any scenario where users need to see and jump to specific items.

Insta Slide

A carousel inspired by Instagram’s slide experience — clean, minimal, and photo-focused. Ideal for showcasing posts, albums, or swipeable media content.

Instagram Carousel

A richer Instagram-style carousel with reactions, buttons (like, comment, share, save), and UI similar to a real IG post. Great for replicating social-media-like interactions inside your app.

🚀 Getting Started

git clone https://github.com/arththakkar1/motion-carousel-next-js.git
cd motion-carousel-next-js
npm install
npm run dev

Open http://localhost:3000 to see the project in action.

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Arth Thakkar

• GitHub: @arththakkar1

---

⭐ Star this repo if you find it helpful!