Animated Project Cards

Cards 278

About

This component renders a list of animated, expandable project cards with smooth framer-motion transitions, hover/tap effects, dynamic chevron toggling, and staggered child animations for category tags, metadata, and descriptions. Can be easily customizable for any accordion style component. Perfect for freelance dashboards, gig marketplaces, or any project listing interface where you want rich interactivity and polished microinteractions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Project Cards to your project and fits it to your theme.

Code

How Animated Project Cards is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ProjectCards } from "@/components/ui/animated-project-cards"

interface Project {
  id: string
  title: string
  pricePerHour: string
  status: "Paid" | "Not Paid"
  categories: string[]
  description: string
  location: string
  timeAgo: string
  logoColor: string
  logoIcon: string
}

export function Demo() {
  const projects: Project[] = [
    {
      id: "1",
      title: "Web Development Project",
      pricePerHour: "$10/hour",
      status: "Paid",
      categories: ["Remote", "Part-time"],
      description:
        "This project involves implementing both frontend and backend functionalities, as well as integrating with third-party APIs.",
      location: "Germany",
      timeAgo: "2h ago",
      logoColor: "bg-orange-500",
      logoIcon: "🔄",
    },
    {
      id: "2",
      title: "Copyright Project",
      pricePerHour: "$10/hour",
      status: "Not Paid",
      categories: ["Remote"],
      description: "Legal documentation and copyright management for digital assets and intellectual property.",
      location: "United States",
      timeAgo: "5h ago",
      logoColor: "bg-gray-700",
      logoIcon: "⬇",
    },
    {
      id: "3",
      title: "Web Design Project",
      pricePerHour: "$10/hour",
      status: "Paid",
      categories: ["Remote", "Full-time"],
      description: "Complete UI/UX design overhaul for modern web application with responsive design principles.",
      location: "Canada",
      timeAgo: "1d ago",
      logoColor: "bg-blue-500",
      logoIcon: "✓",
    },
  ]

  return (
    <div className="min-h-screen w-full bg-[#E8EAEC]">
    <div className="mt-10">
      <ProjectCards projects={projects} />
    </div>
    </div>
  )
}