🃏 Cards Shuffle

An interactive scroll component built with Next.js 15, Framer Motion, and animated card transitions using Tailwind CSS & Lenis

→ Live Demo on Vercel

---

✨ Features

• 🔄 Animated Card Stack

  • Scroll-based animations with custom scaling and transform logic.
  • Parallax image zoom on scroll using Framer Motion.

• 🌀 Smooth Scroll Integration

  • Powered by @studio-freight/lenis for buttery smooth UX.
  • Scroll-driven animations tightly synced with page position.

• ⚡ Performance-Oriented

  • Next.js 15 with Turbopack for fast builds and HMR.
  • Lightweight and modular component design.

• 🎨 Responsive & Clean UI

  • Tailwind-first layout, mobile-friendly out of the box.
  • Easy to extend and customize with utility classes.

• 🧠 Fully Typed Setup

  • Strong TypeScript types across components and animations.
  • Ensures maintainability and scalability.

---

🔧 Tech Stack

• Next.js 15 with Turbopack
• React 19
• TypeScript
• Framer Motion for animation
• Tailwind CSS for styling
• Lenis for smooth scroll
• ESLint + Prettier for linting and formatting

---

🚀 Getting Started

1. Clone the repo

git clone https://github.com/atzin-escandia/atzin-cards-shuffle.git
cd atzin-cards-shuffle

2. Install dependencies

yarn install

3. Start the dev server

yarn dev

4. Build for production

yarn build

5. Launch production server

yarn start

---

📚 Resources

• Next.js Documentation
• React 19 Release Notes
• Framer Motion Docs
• Tailwind CSS Docs
• Lenis Smooth Scroll

---

🧑‍💻 Author

Made with ♡ by Atzin Escandia