{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loader-morphing-blob",
  "title": "Morphing Blob Loader",
  "description": "Polished liquid sphere with subtle organic deformation and specular highlights",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/blocks/loaders/loader-morphing-blob/components/elements/loader-morphing-blob.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst sizeMap = {\n  sm: 48,\n  md: 80,\n  lg: 120,\n} as const;\n\nexport type LoaderMorphingBlobSize = keyof typeof sizeMap;\nexport type LoaderMorphingBlobVariant = \"mercury\" | \"aurora\" | \"monochrome\";\n\nexport interface LoaderMorphingBlobProps {\n  size?: LoaderMorphingBlobSize;\n  variant?: LoaderMorphingBlobVariant;\n  className?: string;\n}\n\nconst BLOB_SHAPES = [\n  \"30% 70% 70% 30% / 30% 30% 70% 70%\",\n  \"70% 30% 30% 70% / 60% 40% 60% 40%\",\n  \"40% 60% 70% 30% / 30% 70% 40% 60%\",\n  \"60% 40% 30% 70% / 70% 30% 70% 30%\",\n  \"30% 70% 70% 30% / 30% 30% 70% 70%\",\n];\n\nconst VARIANT_STYLES = {\n  mercury: {\n    background:\n      \"linear-gradient(135deg, oklch(0.85 0 0) 0%, oklch(0.45 0 0) 50%, oklch(0.7 0 0) 100%)\",\n    highlight:\n      \"radial-gradient(ellipse 40% 30% at 35% 30%, oklch(0.95 0 0 / 0.7), transparent)\",\n    shadow:\n      \"0 8px 32px oklch(0 0 0 / 0.3), inset 0 -4px 12px oklch(0 0 0 / 0.2)\",\n  },\n  aurora: {\n    background:\n      \"linear-gradient(135deg, oklch(0.55 0.18 270) 0%, oklch(0.6 0.15 180) 40%, oklch(0.5 0.2 320) 70%, oklch(0.55 0.12 220) 100%)\",\n    highlight:\n      \"radial-gradient(ellipse 40% 30% at 35% 30%, oklch(0.9 0.05 180 / 0.5), transparent)\",\n    shadow:\n      \"0 8px 32px oklch(0.4 0.1 270 / 0.3), inset 0 -4px 12px oklch(0.3 0.1 270 / 0.2)\",\n  },\n  monochrome: {\n    background:\n      \"linear-gradient(135deg, oklch(from currentColor calc(l + 0.1) 0 0) 0%, oklch(from currentColor calc(l - 0.2) 0 0) 50%, oklch(from currentColor l 0 0) 100%)\",\n    highlight:\n      \"radial-gradient(ellipse 40% 30% at 35% 30%, oklch(from currentColor calc(l + 0.3) 0 0 / 0.5), transparent)\",\n    shadow:\n      \"0 8px 32px oklch(0 0 0 / 0.25), inset 0 -4px 12px oklch(0 0 0 / 0.15)\",\n  },\n};\n\nexport function LoaderMorphingBlob({\n  size = \"md\",\n  variant = \"mercury\",\n  className,\n}: LoaderMorphingBlobProps) {\n  const s = sizeMap[size];\n  const style = VARIANT_STYLES[variant];\n\n  return (\n    <output\n      data-slot=\"loader-morphing-blob\"\n      aria-live=\"polite\"\n      aria-label=\"Loading\"\n      className={cn(\"relative\", className)}\n      style={{ width: s, height: s }}\n    >\n      <span className=\"sr-only\">Loading</span>\n      <motion.div\n        className=\"absolute inset-0 will-change-[border-radius]\"\n        style={{\n          background: style.background,\n          boxShadow: style.shadow,\n        }}\n        animate={{\n          borderRadius: BLOB_SHAPES,\n          scale: [1, 1.08, 0.95, 1.05, 1],\n          rotate: [0, 60, -30, 90, 0],\n        }}\n        transition={{\n          duration: 5,\n          ease: \"easeInOut\",\n          repeat: Number.POSITIVE_INFINITY,\n          repeatType: \"loop\",\n        }}\n      >\n        <div\n          className=\"absolute inset-0 rounded-[inherit]\"\n          style={{ background: style.highlight }}\n        />\n      </motion.div>\n\n      {variant === \"aurora\" && (\n        <motion.div\n          className=\"absolute inset-[15%] rounded-full opacity-40 blur-sm\"\n          style={{\n            background:\n              \"conic-gradient(from 0deg, oklch(0.6 0.15 250), oklch(0.55 0.15 170), oklch(0.5 0.12 290), oklch(0.6 0.15 250))\",\n          }}\n          animate={{ rotate: [0, 360] }}\n          transition={{\n            duration: 8,\n            ease: \"linear\",\n            repeat: Number.POSITIVE_INFINITY,\n          }}\n        />\n      )}\n    </output>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Liquid sphere loader with smooth organic deformation, specular highlights, and depth shadows. Variants: mercury (metallic), aurora (iridescent), monochrome (themed). Sizes: sm/md/lg.",
  "categories": [
    "loaders"
  ],
  "type": "registry:block"
}