{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-loader-motion",
  "type": "registry:component",
  "description": "A dot loader component with animation.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/loader/dot-loader/DotLoaderMotion.tsx",
      "content": "\"use client\";\r\nimport { motion } from \"motion/react\";\r\nimport React from \"react\";\r\n\r\n const DotLoaderMotion = () => {\r\n  const transition = (x: number) => {\r\n    return {\r\n      duration: 1,\r\n      repeat: Infinity,\r\n      repeatType: \"loop\" as const,\r\n      delay: x * 0.2,\r\n      ease: \"easeInOut\",\r\n    };\r\n  };\r\n  return (\r\n    <div className=\"flex items-center gap-2\">\r\n      <motion.div\r\n        initial={{\r\n          y: 0,\r\n        }}\r\n        animate={{\r\n          y: [0, 10, 0],\r\n        }}\r\n        transition={transition(0) as any}\r\n        className=\"h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300\"\r\n      />\r\n      <motion.div\r\n        initial={{\r\n          y: 0,\r\n        }}\r\n        animate={{\r\n          y: [0, 10, 0],\r\n        }}\r\n        transition={transition(1) as any}\r\n        className=\"h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300\"\r\n      />\r\n      <motion.div\r\n        initial={{\r\n          y: 0,\r\n        }}\r\n        animate={{\r\n          y: [0, 10, 0],\r\n        }}\r\n        transition={transition(2)as any}\r\n        className=\"h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\n\r\nexport default DotLoaderMotion",
      "type": "registry:component",
      "target": "components/animated/loader/dot-loader/DotLoaderMotion.tsx"
    }
  ]
}