{
  "name": "cross-expand-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/cross-expand/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface CrossExpandProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  crossThickness?: number;\n  cornerSize?: number;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\nexport function CrossExpand({\n  width = 40,\n  height = 40,\n  color = \"#25b09b\",\n  crossThickness = 8,\n  cornerSize = 12,\n  isAnimating = true,\n  duration = 2.0,\n  ease = 'easeInOut',\n}: CrossExpandProps) {\n  const cx = width / 2;\n  const cy = height / 2;\n\n  const cornerPositions = [\n    { x: 0, y: 0 },\n    { x: width - cornerSize, y: 0 },\n    { x: 0, y: height - cornerSize },\n    { x: width - cornerSize, y: height - cornerSize },\n  ];\n\n  // Total cycle = 2s\n  const stagger = 0.125; // 0.25s / 2s cycle\n  const fillDuration = 0.1; // 0.2s / 2s cycle\n  const holdEnd = 0.75;    // 1.5s / 2s\n  const fadeEnd = 0.85;    // 1.7s / 2s\n\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      controls.start((i) => {\n        const start = i * stagger;\n        const end = start + fillDuration;\n        const times = [0, start, end, holdEnd, fadeEnd, 1];\n        return {\n          opacity: [0, 0, 1, 1, 0, 0],\n          scale: [0.3, 0.3, 1, 1, 0.3, 0.3],\n          transition: { duration, repeat: Infinity, times, ease },\n        };\n      });\n    } else {\n      controls.stop();\n      controls.set({ opacity: 0, scale: 0.3 });\n    }\n  }, [isAnimating, duration, ease, controls]);\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      {/* Static center cross */}\n      <rect\n        x={0}\n        y={cy - crossThickness / 2}\n        width={width}\n        height={crossThickness}\n        fill={color}\n        rx={crossThickness / 2}\n      />\n      <rect\n        x={cx - crossThickness / 2}\n        y={0}\n        width={crossThickness}\n        height={height}\n        fill={color}\n        rx={crossThickness / 2}\n      />\n\n      {/* Corner squares — fill in one by one, all disappear together */}\n      {cornerPositions.map((pos, i) => {\n        const centerX = pos.x + cornerSize / 2;\n        const centerY = pos.y + cornerSize / 2;\n\n        return (\n          <motion.rect\n            key={i}\n            x={pos.x}\n            y={pos.y}\n            width={cornerSize}\n            height={cornerSize}\n            fill={color}\n            rx={2}\n            custom={i}\n            initial={{ opacity: 0, scale: 0.3 }}\n            animate={controls}\n            style={{ transformOrigin: `${centerX}px ${centerY}px` }}\n          />\n        );\n      })}\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/cross-expand/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Cross Expand - Cross Expand",
    "description": "Static center cross with four corner squares that expand outward, rotate 90°, then retract in a pulsing geometric pattern",
    "category": "loaders",
    "tags": [
      "cross",
      "expand",
      "geometric",
      "multi",
      "pulse",
      "minimal",
      "plus",
      "rotate"
    ],
    "animationType": "loop"
  }
}