Sticky Cards - Next.js

A beautiful and interactive sticky cards component built with Next.js, featuring smooth scroll animations and modern design principles.

🎯 Features

• Interactive Sticky Cards: Cards that stick and animate as you scroll
• Smooth Animations: Powered by GSAP for fluid transitions and effects
• Smooth Scrolling: Enhanced with Lenis for buttery-smooth scroll experience
• Modern Design: Clean, minimalist interface showcasing design principles
• Responsive: Works seamlessly across all device sizes
• Performance Optimized: Built with Next.js 15 and modern React patterns

🚀 Live Demo

Desktop Experience

Mobile Experience

🛠️ Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: GSAP with ScrollTrigger
• Smooth Scrolling: Lenis
• Package Manager: Bun
• Linting: Biome

📦 Installation

1. Clone the repository:

git clone https://github.com/omidshabab/sticky-cards-nextjs.git
cd sticky-cards-nextjs

2. Install dependencies:

bun install

3. Run the development server:

bun dev

4. Open http://localhost:3000 in your browser.

🎨 Design Principles Showcase

The project demonstrates five core design principles through interactive cards:

1. Modularity - Every element is built to snap into place
2. Craftsmanship - Thoughtful details and precise execution
3. Reliability - Stable foundations and predictable behavior
4. Performance - Fast by default with responsive interactions
5. Accessibility - Designed for everyone with clear hierarchy

🏗️ Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout with Lenis provider
│   └── page.tsx            # Main page with sticky cards
└── components/
    └── StickyCards/
        ├── StickyCards.tsx # Main component with GSAP animations
        └── StickyCards.css # Component styles

🎬 Animation Details

The sticky cards feature sophisticated scroll-triggered animations:

• Sticky Pinning: Cards stick to the viewport during scroll
• Scale Animation: Cards scale down as they're replaced
• Rotation Effect: Alternating rotation directions for visual interest
• Opacity Transitions: Smooth fade effects between cards
• Smooth Scrolling: Lenis provides momentum-based scrolling

🚀 Deployment

The easiest way to deploy your Next.js app is to use Vercel:

📝 Scripts

• bun dev - Start development server with Turbopack
• bun build - Build for production with Turbopack
• bun start - Start production server
• bun lint - Run Biome linter
• bun format - Format code with Biome

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• GSAP for powerful animation capabilities
• Lenis for smooth scrolling
• Next.js for the amazing React framework
• Tailwind CSS for utility-first styling