Hover Cards

Cards

About

This is a hover animation which looks very cool on hover and can be used everywhere.

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

Code

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

Usage.tsx

import StackedIconCard from "@/components/ui/hover-cards";

export default function DemoOne() {
  return <div className="min-h-screen bg-background flex items-center justify-center p-8">
      <StackedIconCard
        icon={<ReactLogo />}
        backIcon1={<NextJsLogo />}
        backIcon2={<VueLogo />}
        color="from-blue-600 to-cyan-500"
      />
    </div>;
}


function ReactLogo() {
  return (
    <svg viewBox="0 0 24 24" className="w-12 h-12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="2.5" fill="currentColor" />
      <path
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
        stroke="currentColor"
        strokeWidth="1.5"
        fill="none"
      />
      <ellipse cx="12" cy="12" rx="8" ry="3" stroke="currentColor" strokeWidth="1.5" fill="none" />
      <ellipse
        cx="12"
        cy="12"
        rx="8"
        ry="3"
        stroke="currentColor"
        strokeWidth="1.5"
        fill="none"
        transform="rotate(60 12 12)"
      />
      <ellipse
        cx="12"
        cy="12"
        rx="8"
        ry="3"
        stroke="currentColor"
        strokeWidth="1.5"
        fill="none"
        transform="rotate(120 12 12)"
      />
    </svg>
  )
}

function NextJsLogo() {
  return (
    <svg viewBox="0 0 24 24" className="w-12 h-12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.5 0C5.1 0 0 5.1 0 11.5S5.1 23 11.5 23 23 17.9 23 11.5 17.9 0 11.5 0zm6.5 11.5l-8 8v-6l-2 2v-4l4-4v-2l6 6z" />
    </svg>
  )
}

function VueLogo() {
  return (
    <svg viewBox="0 0 24 24" className="w-12 h-12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2L2 8l10 14 10-14-10-6zm0 3l5.5 9.5H6.5L12 5z" />
    </svg>
  )
}