{
  "name": "shape-hero",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Shape Hero\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 { motion } from \"motion/react\";\nimport { Pacifico } from \"next/font/google\";\nimport { cn } from \"@/lib/utils\";\n\nconst pacifico = Pacifico({\n  subsets: [\"latin\"],\n  weight: [\"400\"],\n  variable: \"--font-pacifico\",\n});\n\nfunction ElegantShape({\n  className,\n  delay = 0,\n  width = 400,\n  height = 100,\n  rotate = 0,\n  gradient = \"from-white/[0.08]\",\n  borderRadius = 16,\n}: {\n  className?: string;\n  delay?: number;\n  width?: number;\n  height?: number;\n  rotate?: number;\n  gradient?: string;\n  borderRadius?: number;\n}) {\n  return (\n    <motion.div\n      animate={{\n        opacity: 1,\n        y: 0,\n        rotate,\n      }}\n      className={cn(\"absolute\", className)}\n      initial={{\n        opacity: 0,\n        y: -150,\n        rotate: rotate - 15,\n      }}\n      transition={{\n        duration: 2.4,\n        delay,\n        ease: [0.23, 0.86, 0.39, 0.96],\n        opacity: { duration: 1.2 },\n      }}\n    >\n      <motion.div\n        animate={{\n          y: [0, 15, 0],\n        }}\n        className=\"relative\"\n        style={{\n          width,\n          height,\n        }}\n        transition={{\n          duration: 12,\n          repeat: Number.POSITIVE_INFINITY,\n          ease: \"easeInOut\",\n        }}\n      >\n        <div\n          className={cn(\n            \"absolute inset-0\",\n            \"bg-linear-to-r to-transparent\",\n            gradient,\n            \"backdrop-blur-[1px]\",\n            \"ring-1 ring-white/[0.03] dark:ring-white/[0.02]\",\n            \"shadow-[0_2px_16px_-2px_rgba(255,255,255,0.04)]\",\n            \"after:absolute after:inset-0\",\n            \"after:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)]\",\n            \"after:rounded-[inherit]\"\n          )}\n          style={{ borderRadius }}\n        />\n      </motion.div>\n    </motion.div>\n  );\n}\n\nexport default function ShapeHero({\n  title1 = \"Elevate Your\",\n  title2 = \"Digital Vision\",\n}: {\n  title1?: string;\n  title2?: string;\n}) {\n  const fadeUpVariants = {\n    hidden: { opacity: 0, y: 30 },\n    visible: (i: number) => ({\n      opacity: 1,\n      y: 0,\n      transition: {\n        duration: 1,\n        delay: 0.5 + i * 0.2,\n        ease: [0.25, 0.4, 0.25, 1],\n      },\n    }),\n  };\n\n  return (\n    <div className=\"relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-white dark:bg-[#030303]\">\n      <div className=\"absolute inset-0 bg-linear-to-br from-indigo-500/[0.02] via-transparent to-rose-500/[0.02] blur-3xl dark:from-indigo-500/[0.05] dark:via-transparent dark:to-rose-500/[0.05]\" />\n\n      <div className=\"absolute inset-0 overflow-hidden\">\n        {/* Tall rectangle - top left */}\n        <ElegantShape\n          borderRadius={24}\n          className=\"top-[-10%] left-[-15%]\"\n          delay={0.3}\n          gradient=\"from-indigo-500/[0.25] dark:from-indigo-500/[0.35]\"\n          height={500}\n          rotate={-8}\n          width={300}\n        />\n\n        {/* Wide rectangle - bottom right */}\n        <ElegantShape\n          borderRadius={20}\n          className=\"right-[-20%] bottom-[-5%]\"\n          delay={0.5}\n          gradient=\"from-rose-500/[0.25] dark:from-rose-500/[0.35]\"\n          height={200}\n          rotate={15}\n          width={600}\n        />\n\n        {/* Square - middle left */}\n        <ElegantShape\n          borderRadius={32}\n          className=\"top-[40%] left-[-5%]\"\n          delay={0.4}\n          gradient=\"from-violet-500/[0.25] dark:from-violet-500/[0.35]\"\n          height={300}\n          rotate={24}\n          width={300}\n        />\n\n        {/* Small rectangle - top right */}\n        <ElegantShape\n          borderRadius={12}\n          className=\"top-[5%] right-[10%]\"\n          delay={0.6}\n          gradient=\"from-amber-500/[0.25] dark:from-amber-500/[0.35]\"\n          height={100}\n          rotate={-20}\n          width={250}\n        />\n\n        {/* New shapes */}\n        {/* Medium rectangle - center right */}\n        <ElegantShape\n          borderRadius={16}\n          className=\"top-[45%] right-[-10%]\"\n          delay={0.7}\n          gradient=\"from-emerald-500/[0.25] dark:from-emerald-500/[0.35]\"\n          height={150}\n          rotate={35}\n          width={400}\n        />\n\n        {/* Small square - bottom left */}\n        <ElegantShape\n          borderRadius={28}\n          className=\"bottom-[10%] left-[20%]\"\n          delay={0.2}\n          gradient=\"from-blue-500/[0.25] dark:from-blue-500/[0.35]\"\n          height={200}\n          rotate={-25}\n          width={200}\n        />\n\n        {/* Tiny rectangle - top center */}\n        <ElegantShape\n          borderRadius={10}\n          className=\"top-[15%] left-[40%]\"\n          delay={0.8}\n          gradient=\"from-purple-500/[0.25] dark:from-purple-500/[0.35]\"\n          height={80}\n          rotate={45}\n          width={150}\n        />\n\n        {/* Wide rectangle - middle */}\n        <ElegantShape\n          borderRadius={18}\n          className=\"top-[60%] left-[25%]\"\n          delay={0.9}\n          gradient=\"from-teal-500/[0.25] dark:from-teal-500/[0.35]\"\n          height={120}\n          rotate={-12}\n          width={450}\n        />\n      </div>\n\n      <div className=\"container relative z-10 mx-auto px-4 md:px-6\">\n        <div className=\"mx-auto max-w-3xl text-center\">\n          <motion.div\n            animate=\"visible\"\n            custom={1}\n            initial=\"hidden\"\n            variants={fadeUpVariants as any}\n          >\n            <h1 className=\"mb-6 font-bold text-4xl tracking-tight sm:text-6xl md:mb-8 md:text-8xl\">\n              <span className=\"bg-linear-to-b from-black to-black/80 bg-clip-text text-transparent dark:from-white dark:to-white/80\">\n                {title1}\n              </span>\n              <br />\n              <span\n                className={cn(\n                  \"bg-linear-to-r from-indigo-300 via-black/90 to-rose-300 bg-clip-text text-transparent dark:from-indigo-300 dark:via-white/90 dark:to-rose-300\",\n                  pacifico.className\n                )}\n              >\n                {title2}\n              </span>\n            </h1>\n          </motion.div>\n          <motion.div\n            animate=\"visible\"\n            custom={2}\n            initial=\"hidden\"\n            variants={fadeUpVariants as any}\n          >\n            <p className=\"mx-auto mb-8 max-w-xl px-4 font-light text-base text-black/40 leading-relaxed tracking-wide sm:text-lg md:text-xl dark:text-white/40\">\n              UI Components built with Tailwind CSS.\n            </p>\n          </motion.div>\n        </div>\n      </div>\n\n      <div className=\"pointer-events-none absolute inset-0 bg-linear-to-t from-white via-transparent to-white/80 dark:from-[#030303] dark:via-transparent dark:to-[#030303]/80\" />\n    </div>\n  );\n}\n",
      "path": "/components/kokonutui/shape-hero.tsx",
      "target": "components/kokonutui/shape-hero.tsx"
    }
  ]
}