{
  "name": "breath-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/breath/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface BreathProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function Breath({\n  width = 100,\n  height = 100,\n  color = 'currentColor',\n  isAnimating = true,\n  duration = 4.0,\n  ease = 'easeInOut',\n}: BreathProps) {\n  const controlsGlow = useAnimation();\n  const controlsCore = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controlsGlow.start({\n        r: [14, 28, 14],\n        opacity: [0, 0.25, 0],\n        transition: { duration, repeat: Infinity, ease, delay: 0.3, times: [0, 0.5, 1] },\n      });\n      controlsCore.start({\n        r: [8, 20, 8],\n        opacity: [0.25, 1, 0.25],\n        transition: { duration, repeat: Infinity, ease, times: [0, 0.5, 1] },\n      });\n    } else {\n      controlsGlow.stop();\n      controlsGlow.set({ r: 14, opacity: 0 });\n      controlsCore.stop();\n      controlsCore.set({ r: 8, opacity: 0.25 });\n    }\n  }, [isAnimating, duration, ease, controlsGlow, controlsCore]);\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      {/* Outer glow ring — slightly delayed */}\n      <motion.circle\n        cx={50}\n        cy={50}\n        stroke={color}\n        strokeWidth={1}\n        fill=\"none\"\n        initial={{ r: 14, opacity: 0 }}\n        animate={controlsGlow}\n      />\n      {/* Core breathing circle */}\n      <motion.circle\n        cx={50}\n        cy={50}\n        fill={color}\n        initial={{ r: 8, opacity: 0.25 }}\n        animate={controlsCore}\n      />\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/breath/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Breath - Breath",
    "description": "A filled circle inhales and exhales with a trailing outer glow ring — inspired by the MacBook sleep indicator LED",
    "category": "loaders",
    "tags": [
      "apple",
      "breath",
      "pulse",
      "glow",
      "ambient",
      "macbook",
      "minimal"
    ],
    "animationType": "loop"
  }
}