Skip to content

README.md

Latest commit

 

History

History
65 lines (46 loc) · 1.56 KB

README.md

File metadata and controls

65 lines (46 loc) · 1.56 KB
Raw

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
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. 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