Interactive Card Stack

A modern, animated card stack component built with React, TypeScript, and Framer Motion. Features smooth animations, linear progression, and responsive design.

Features

• Sequential Navigation: Navigate through cards like a normal webpage - from first to last
• Smooth Animations: Cards slide to the right with realistic physics-based animations
• Multiple Input Methods: Scroll, keyboard arrows, or drag to navigate
• Progress Tracking: Visual indicator showing current position and card title
• Responsive Design: Positioned on the left side with proper spacing
• Customizable: Easily modify card content, dimensions, and styling

Demo

The stack displays cards in linear order:

1. Welcome Page (starting position)
2. About Page
3. Services Page
4. Contact Page (end position)

Technologies Used

• React - UI framework
• TypeScript - Type safety
• Framer Motion - Smooth animations
• Tailwind CSS - Styling
• Vite - Build tool
• shadcn/ui - UI components

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <your-repository-url>
cd interactive-card-stack

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:8080

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint