{"version":1,"id":"morphing-cursor","framework":"next","kind":"block","files":[{"path":"src/blocks/gfa/morphing-cursor.tsx","content":"\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport { motion } from \"motion/react\";\nimport { PlusIcon } from \"lucide-react\";\nimport { Cursor } from \"@/components/core/cursor\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MorphingCursorProps = {\n  imageSrc: string;\n  imageAlt?: string;\n  label?: string;\n  href?: string;\n  className?: string;\n  stageClassName?: string;\n  children?: ReactNode;\n};\n\nexport function MorphingCursor({\n  imageSrc,\n  imageAlt = \"\",\n  label = \"More\",\n  href,\n  className,\n  stageClassName,\n  children,\n}: MorphingCursorProps) {\n  const media = children ?? (\n    <img\n      src={imageSrc}\n      alt={imageAlt}\n      className=\"h-52 w-full max-w-48 rounded-lg border border-border object-cover\"\n      draggable={false}\n    />\n  );\n\n  const card = (\n    <div\n      className={cn(\n        \"relative inline-flex\",\n        \"cursor-none [&_*]:cursor-none\",\n      )}\n    >\n      <Cursor\n        attachToParent\n        variants={{\n          initial: { scale: 0.85, opacity: 0 },\n          animate: { scale: 1, opacity: 1 },\n          exit: { scale: 0.85, opacity: 0 },\n        }}\n        springConfig={{ stiffness: 1600, damping: 42, mass: 0.12 }}\n        transition={{ duration: 0.08, ease: \"easeOut\" }}\n      >\n        <motion.div\n          initial={{ width: 72, height: 30 }}\n          className=\"flex items-center justify-center overflow-hidden rounded-[24px] bg-zinc-500/40 px-3 backdrop-blur-md dark:bg-zinc-300/40\"\n        >\n          <span className=\"inline-flex items-center text-sm whitespace-nowrap text-white dark:text-zinc-950\">\n            {label}\n            <PlusIcon className=\"ml-1 size-4 shrink-0\" aria-hidden />\n          </span>\n        </motion.div>\n      </Cursor>\n\n      {href ? (\n        <a\n          href={href}\n          className=\"outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          {media}\n        </a>\n      ) : (\n        media\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      data-slot=\"morphing-cursor\"\n      className={cn(\n        \"relative flex h-[400px] w-full items-center justify-center\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"relative flex size-full items-center justify-center\",\n          stageClassName,\n        )}\n      >\n        {card}\n      </div>\n    </div>\n  );\n}\n\nexport { MorphingCursor as MorphingCursorBlock };\n"}],"meta":{"studioName":"GFA Development & Design Studio","siteUrl":"https://ui.gkhn.dev"}}