{
  "name": "card-flip",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Card Flip\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { ArrowRight, Repeat2 } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CardFlipProps {\n  title?: string;\n  subtitle?: string;\n  description?: string;\n  features?: string[];\n}\n\nexport default function CardFlip({\n  title = \"Design Systems\",\n  subtitle = \"Explore the fundamentals\",\n  description = \"Dive deep into the world of modern UI/UX design.\",\n  features = [\"UI/UX\", \"Modern Design\", \"Tailwind CSS\", \"Kokonut UI\"],\n}: CardFlipProps) {\n  const [isFlipped, setIsFlipped] = useState(false);\n\n  return (\n    <div\n      className=\"group relative h-[320px] w-full max-w-[280px] [perspective:2000px]\"\n      onMouseEnter={() => setIsFlipped(true)}\n      onMouseLeave={() => setIsFlipped(false)}\n    >\n      <div\n        className={cn(\n          \"relative h-full w-full\",\n          \"[transform-style:preserve-3d]\",\n          \"transition-[transform] duration-500 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n          \"motion-reduce:transition-none\",\n          isFlipped\n            ? \"[transform:rotateY(180deg)]\"\n            : \"[transform:rotateY(0deg)]\"\n        )}\n      >\n        <div\n          className={cn(\n            \"absolute inset-0 h-full w-full\",\n            \"[backface-visibility:hidden] [transform:rotateY(0deg)]\",\n            \"overflow-hidden rounded-2xl\",\n            \"bg-zinc-50 dark:bg-zinc-900\",\n            \"border border-zinc-200 dark:border-zinc-800/50\",\n            \"shadow-xs dark:shadow-lg\",\n            \"transition-shadow duration-500\",\n            \"group-hover:shadow-lg dark:group-hover:shadow-xl\"\n          )}\n        >\n          <div className=\"relative h-full overflow-hidden bg-gradient-to-b from-zinc-100 to-white dark:from-zinc-900 dark:to-black\">\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute inset-0 flex items-start justify-center pt-24\"\n            >\n              <div className=\"relative flex h-[100px] w-[200px] items-center justify-center\">\n                {[...Array(10)].map((_, i) => (\n                  <div\n                    className={cn(\n                      \"absolute h-[50px] w-[50px]\",\n                      \"rounded-[140px]\",\n                      \"animate-[scale_3s_linear_infinite]\",\n                      \"motion-reduce:animate-none\",\n                      \"opacity-0\",\n                      \"shadow-[0_0_50px_rgba(255,165,0,0.5)]\",\n                      \"group-hover:animate-[scale_2s_linear_infinite]\"\n                    )}\n                    key={i}\n                    style={{\n                      animationDelay: `${i * 0.3}s`,\n                    }}\n                  />\n                ))}\n              </div>\n            </div>\n          </div>\n\n          <div className=\"absolute right-0 bottom-0 left-0 p-5\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <div className=\"space-y-1.5\">\n                <h3 className=\"font-semibold text-lg text-zinc-900 leading-snug tracking-tighter transition-transform duration-500 ease-out-expo group-hover:translate-y-[-4px] dark:text-white\">\n                  {title}\n                </h3>\n                <p className=\"line-clamp-2 text-sm text-zinc-600 tracking-tight transition-transform delay-[50ms] duration-500 ease-out-expo group-hover:translate-y-[-4px] dark:text-zinc-200\">\n                  {subtitle}\n                </p>\n              </div>\n              <div className=\"group/icon relative\">\n                <div\n                  className={cn(\n                    \"absolute inset-[-8px] rounded-lg transition-opacity duration-300\",\n                    \"bg-gradient-to-br from-orange-500/20 via-orange-500/10 to-transparent\"\n                  )}\n                />\n                <Repeat2\n                  aria-hidden=\"true\"\n                  className=\"relative z-10 h-4 w-4 text-orange-500 transition-transform duration-300 group-hover/icon:-rotate-12 group-hover/icon:scale-110\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Back of card */}\n        <div\n          className={cn(\n            \"absolute inset-0 h-full w-full\",\n            \"[backface-visibility:hidden] [transform:rotateY(180deg)]\",\n            \"rounded-2xl p-6\",\n            \"bg-gradient-to-b from-zinc-100 to-white dark:from-zinc-900 dark:to-black\",\n            \"border border-zinc-200 dark:border-zinc-800\",\n            \"shadow-xs dark:shadow-lg\",\n            \"flex flex-col\",\n            \"transition-shadow duration-500\",\n            \"group-hover:shadow-lg dark:group-hover:shadow-xl\"\n          )}\n        >\n          <div className=\"flex-1 space-y-6\">\n            <div className=\"space-y-2\">\n              <h3 className=\"font-semibold text-lg text-zinc-900 leading-snug tracking-tight transition-transform duration-500 ease-out-expo group-hover:translate-y-[-2px] dark:text-white\">\n                {title}\n              </h3>\n              <p className=\"line-clamp-2 text-sm text-zinc-600 tracking-tight transition-transform duration-500 ease-out-expo group-hover:translate-y-[-2px] dark:text-zinc-400\">\n                {description}\n              </p>\n            </div>\n\n            <div className=\"space-y-2\">\n              {features.map((feature, index) => (\n                <div\n                  className=\"flex items-center gap-2 text-sm text-zinc-700 transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] dark:text-zinc-300\"\n                  key={feature}\n                  style={{\n                    transform: isFlipped\n                      ? \"translateX(0)\"\n                      : \"translateX(-10px)\",\n                    opacity: isFlipped ? 1 : 0,\n                    transitionDelay: `${index * 50 + 150}ms`,\n                  }}\n                >\n                  <ArrowRight\n                    aria-hidden=\"true\"\n                    className=\"h-3 w-3 text-orange-500\"\n                  />\n                  <span>{feature}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <div className=\"mt-6 border-zinc-200 border-t pt-6 dark:border-zinc-800\">\n            <button\n              className={cn(\n                \"group/start relative w-full\",\n                \"flex items-center justify-between\",\n                \"-m-3 rounded-xl p-3\",\n                \"transition-[transform,background] duration-300\",\n                \"bg-gradient-to-r from-zinc-100 via-zinc-100 to-zinc-100\",\n                \"dark:from-zinc-800 dark:via-zinc-800 dark:to-zinc-800\",\n                \"hover:from-0% hover:from-orange-500/10 hover:via-100% hover:via-orange-500/5 hover:to-100% hover:to-transparent\",\n                \"dark:hover:from-0% dark:hover:from-orange-500/20 dark:hover:via-100% dark:hover:via-orange-500/10 dark:hover:to-100% dark:hover:to-transparent\",\n                \"hover:scale-[1.02] active:scale-[0.98]\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900\"\n              )}\n              type=\"button\"\n            >\n              <span className=\"font-medium text-sm text-zinc-900 transition-colors duration-300 group-hover/start:text-orange-600 dark:text-white dark:group-hover/start:text-orange-400\">\n                Start today\n              </span>\n              <div className=\"group/icon relative\">\n                <div\n                  className={cn(\n                    \"absolute inset-[-6px] rounded-lg transition-[transform,opacity] duration-300\",\n                    \"bg-gradient-to-br from-orange-500/20 via-orange-500/10 to-transparent\",\n                    \"scale-90 opacity-0 group-hover/start:scale-100 group-hover/start:opacity-100\"\n                  )}\n                />\n                <ArrowRight\n                  aria-hidden=\"true\"\n                  className=\"relative z-10 h-4 w-4 text-orange-500 transition-transform duration-300 group-hover/start:translate-x-0.5 group-hover/start:scale-110\"\n                />\n              </div>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <style jsx>{`\n                @keyframes scale {\n                    0% {\n                        transform: scale(2);\n                        opacity: 0;\n                        box-shadow: 0px 0px 50px rgba(255, 165, 0, 0.5);\n                    }\n                    50% {\n                        transform: translate(0px, -5px) scale(1);\n                        opacity: 1;\n                        box-shadow: 0px 8px 20px rgba(255, 165, 0, 0.5);\n                    }\n                    100% {\n                        transform: translate(0px, 5px) scale(0.1);\n                        opacity: 0;\n                        box-shadow: 0px 10px 20px rgba(255, 165, 0, 0);\n                    }\n                }\n            `}</style>\n    </div>\n  );\n}\n",
      "path": "/components/kokonutui/card-flip.tsx",
      "target": "components/kokonutui/card-flip.tsx"
    }
  ]
}