{
  "name": "tool-connector-default",
  "type": "registry:block",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/illustrations/tool-connector/default.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nconst CYCLE = 7.5;\n\nconst trails = [\n  // Pair 1 → Stack 1\n  { d: \"m91.1 13.6h117.3c7.1 0 11.1 3.5 11.1 10.9v36.9\", delay: 0.0, duration: 1.0, seg: 0.12 },\n  { d: \"m28.4 48h141.5c6.4 0 12.6 3.2 12.6 13.4\", delay: 0.1, duration: 1.0, seg: 0.12 },\n  // Pair 2 → Stack 2\n  { d: \"m91.1 83.6h72.4\", delay: 2.2, duration: 0.6, seg: 0.28 },\n  { d: \"m28.4 118.2h135.1\", delay: 2.3, duration: 0.6, seg: 0.18 },\n  { d: \"m91.1 152.8h72.4\", delay: 2.25, duration: 0.6, seg: 0.28 },\n  // Pair 3 → Stack 3\n  { d: \"m28.4 188.5h141.5c5.7 0 12.3-3.9 12.1-11.6\", delay: 4.2, duration: 1.0, seg: 0.12 },\n  { d: \"m91.1 223.1h116.2c8 0 12.2-4.3 12.2-11.4v-37.8\", delay: 4.2, duration: 1.15, seg: 0.12 },\n];\n\nfunction stackAnim(entryDelay: number) {\n  const t1 = entryDelay / CYCLE;\n  const t2 = (entryDelay + 0.5) / CYCLE;\n  const t3 = 7.1 / CYCLE;\n  return {\n    animate: {\n      opacity: [0, 0, 1, 1, 0] as number[],\n      y: [10, 10, 0, 0, 10] as number[],\n      filter: [\"blur(6px)\", \"blur(6px)\", \"blur(0px)\", \"blur(0px)\", \"blur(6px)\"],\n    },\n    transition: {\n      duration: CYCLE,\n      times: [0, t1, t2, t3, 1],\n      repeat: Infinity,\n      ease: [\"linear\", [0.16, 1, 0.3, 1], \"linear\", \"easeIn\"] as never,\n    },\n  };\n}\n\nexport function ToolConnectorSVG() {\n  const s1 = stackAnim(1.1);\n  const s2 = stackAnim(3.05);\n  const s3 = stackAnim(5.4);\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 310 235.5\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <defs>\n        <style type=\"text/css\">{`\n          .cls-1  { fill:#D2D0FF; }\n          .cls-2  { fill:#FFFFFF; }\n          .cls-3  { fill:none; stroke:#8174E8; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-dasharray:1,3; }\n          .cls-4  { fill:#5E4AE3; }\n          .cls-5  { fill:#FFFFFF; }\n          .cls-6  { fill:#52B153; }\n          .cls-7  { fill:#F1BD2E; }\n          .cls-8  { fill:#3367B0; }\n          .cls-9  { fill:#D7702B; }\n          .cls-10 { fill:#EFA72C; }\n          .cls-11 { fill:#374F94; }\n          .cls-12 { fill:#F2C333; }\n          .cls-13 { fill:#CD475C; }\n          .cls-14 { fill:#891539; }\n          .cls-15 { fill:#4FB9E9; }\n          .cls-16 { fill:#3395D3; }\n          .cls-17 { fill:#9891F9; }\n          .cls-18 { fill:#7766F5; }\n          .cls-19 { fill:url(#SVGID_2_); }\n          .cls-20 { fill:url(#SVGID_3_); }\n          .cls-21 { fill:#51ABE6; }\n          .cls-22 { fill:#4A7C35; }\n          .cls-23 { fill:#81A358; }\n          .cls-24 { fill:#F1F1EF; }\n          .cls-25 { fill:#C8C6F7; }\n          .cls-26 { fill:#938BF6; }\n          .cls-27 { fill:#5C4DEF; }\n        `}</style>\n        <linearGradient id=\"SVGID_2_\" x1=\"181.8\" x2=\"258.6\" y1=\"126\" y2=\"126\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#BCB8F8\" offset=\"0\" />\n          <stop stopColor=\"#8174F6\" offset=\"1\" />\n        </linearGradient>\n        <linearGradient id=\"SVGID_3_\" x1=\"182\" x2=\"258.6\" y1=\"126.2\" y2=\"126.2\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#BCB8F8\" offset=\"0\" />\n          <stop stopColor=\"#8174F6\" offset=\"1\" />\n        </linearGradient>\n      </defs>\n\n      {/* Main box */}\n      <path className=\"cls-1\" d=\"m264.4 173.5h-88.4c-6.4 0-11.6-5.2-11.6-11.6v-88.1c0-6.4 5.2-11.6 11.6-11.6h88.4c6.6 0 12.6 4.8 12.6 11.6v88.1c0 6.4-5.2 11.6-12.6 11.6z\" />\n\n      {/* Dashed connector lines */}\n      <path className=\"cls-3\" d=\"m91.1 13.6h117.3c7.1 0 11.1 3.5 11.1 10.9v36.9\" />\n      <path className=\"cls-3\" d=\"m91.1 83.6h72.4\" />\n      <path className=\"cls-3\" d=\"m28.4 48h141.5c6.4 0 12.6 3.2 12.6 13.4\" />\n      <path className=\"cls-3\" d=\"m28.4 118.2h135.1\" />\n      <path className=\"cls-3\" d=\"m91.1 152.8h72.4\" />\n      <path className=\"cls-3\" d=\"m28.4 188.5h141.5c5.7 0 12.3-3.9 12.1-11.6\" />\n      <path className=\"cls-3\" d=\"m91.1 223.1h116.2c8 0 12.2-4.3 12.2-11.4v-37.8\" />\n\n      {/* Junction dots */}\n      <circle className=\"cls-4\" cx=\"91.1\" cy=\"13.6\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"28.4\" cy=\"48.1\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"91.1\" cy=\"83.6\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"163.7\" cy=\"83.6\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"182.1\" cy=\"61.3\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"219.6\" cy=\"61.5\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"28.4\" cy=\"118.2\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"163.7\" cy=\"118.2\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"91.1\" cy=\"152.8\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"163.7\" cy=\"152.8\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"28.3\" cy=\"188.5\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"182\" cy=\"173.3\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"219.5\" cy=\"173.5\" r=\"1.6\" />\n      <circle className=\"cls-4\" cx=\"91.1\" cy=\"223.1\" r=\"1.6\" />\n\n      {/* Google Analytics bars */}\n      <path className=\"cls-9\" d=\"m9.1 48.3v6.5c0 2.6 4.3 3.7 5 0.4v-6.9c0-2.6-4.5-3.4-5 0z\" />\n      <path className=\"cls-10\" d=\"m15.8 41.4v14.4c0.2-14.2 0 2.4 0.2-0.4 0 2.2 3.7 3.3 4-0.2v-13.9c-0.1-2.7-4.2-2.7-4.2 0.1z\" />\n      <path className=\"cls-9\" d=\"m5.3 52.6c-2.2 0.5-2.3 3.9 0.4 4.3 3.2 0 3.2-4.5-0.4-4.3z\" />\n\n      {/* Google Ads triangle */}\n      <path className=\"cls-6\" d=\"m4.2 121.3c1.1-1 3-1 4.1 0 1.1 1.1 1.3 2.8 0.2 4.1-1.1 1.1-3 1.3-4.1 0.2-1.3-1.1-1.3-3-0.2-4.3z\" />\n      <path className=\"cls-7\" d=\"m9.6 112.6-5.4 8.7c1.1-1 3-1 4.3 0 0.7 0.7 1.1 1.6 1.1 2.6l3.2-5.3-3.2-6z\" />\n      <path className=\"cls-8\" d=\"m19.9 125.9c-1.3 0.8-3.2 0.8-4.1-0.7l-5.8-10.4c-0.9-1.3-0.6-3.2 0.9-4.5 1.3-0.7 3-0.7 3.8 0.8l5.4 10.2c1.1 1.8 1.1 3.7-0.2 4.6z\" />\n\n      {/* Shopify icon */}\n      <path className=\"cls-22\" d=\"m18.2 182s-0.2-0.2-0.4-0.2l-1.5-0.2-1.1-1.1-0.9-0.2c-0.4-0.9-1.3-2.2-2.6-2.2-2.6 0-3.7 3.4-4.1 5l-1.9 0.6-1.5 12.5 10.3 1.9 5.6-1.3-1.9-14.8zm-6.5-3.2c0.7 0 1.1 0.6 1.5 1.3l-1.9 0.6c0-1.1 0.2-1.7 0.4-1.9zm-1 0.2c-0.1 0.6-0.1 1.3-0.1 1.9l-1.9 0.7c0.4-1.1 1.1-2.2 2-2.6zm1.2-0.5c-0.2 0.3-0.2 1.3-0.2 2.4l1.7-0.4c-0.2-0.9-0.8-2-1.5-2z\" />\n      <path className=\"cls-23\" d=\"m14.3 180.5 0.2 17.6-10.3-1.9 1.5-12.5 1.9-0.6c0.4-1.6 1.5-5 4.1-5 1.3 0 2.2 1.3 2.6 2.4z\" />\n      <path className=\"cls-24\" d=\"m12.4 185.5-0.9 2.1c-0.9-0.6-2.4-0.6-2.6 0.4-0.2 1.3 2.8 1.5 2.6 4.1-0.2 3.2-3.5 3.8-5.6 2.1l0.6-1.7c1.3 0.8 2.6 1 2.8-0.2 0.1-1.5-2.5-1.3-2.3-3.6 0-1.9 1.5-3.9 5.4-3.2z\" />\n\n      {/* Facebook f */}\n      <path className=\"cls-11\" d=\"m81.8 74h-15.9c-0.7 0-1.1 0.4-1.1 1v16.5c0 0.6 0.4 1 1.1 0.8h9.1v-6.4h-2.4l0.2-3h2.2v-2.4c0-2.1 1.1-3.4 3-3.4h2.3l0.2 2.6h-1.9c-0.8 0-0.8 0.4-0.8 1.1v1.7h2.1l-0.4 3h-1.9l-0.2 6.8h4.4c0.7 0 1.1-0.4 1.1-0.8v-16.3c0-0.7-0.4-1.2-1.1-1.2z\" />\n\n      {/* Stack cube */}\n      <path className=\"cls-12\" d=\"m73.7 145.5-7.8 3.2 8.2 3.7 8.2-3.7-7.8-3.2h-0.8z\" />\n      <path className=\"cls-13\" d=\"m64.6 149.6v6.6c0 0.4 0.4 0.6 0.8 0.4l7.8-3.4-7.8-3.6c-0.4-0.2-0.8 0-0.8 0z\" />\n      <path className=\"cls-14\" d=\"m64.8 149.6v1.7l6.7 2.8 1.7-0.7-7.8-3.6c-0.4-0.4-0.4-0.4-0.6-0.2z\" />\n      <path className=\"cls-15\" d=\"m74.8 153v6.4c0 0.8 0.8 1 1.3 0.8l6.4-2.6c0.4-0.2 0.6-0.4 0.6-0.8v-6.6c0-0.4-0.4-0.6-0.8-0.4l-6.9 2.8c-0.2 0-0.6 0.2-0.6 0.4z\" />\n\n      {/* Salesforce cloud */}\n      <path className=\"cls-16\" d=\"m72.2 216.4c0.6-0.9 1.7-1.4 2.8-1.4 1.3 0 2.6 0.7 3.4 2 0.5-0.2 1.3-0.4 2.1-0.4 3 0 5.4 2.4 5.4 5.2s-2.4 5.2-5.4 5.2h-0.8c-0.6 1.1-1.9 1.9-3.2 1.9-0.5 0-1.1-0.2-1.5-0.4-0.5 1.3-2 2.6-4.1 2.6-1.8 0-3.3-0.9-4-2.6h-0.8c-2.4 0-4.1-1.9-4.1-4.1 0-1.5 0.6-2.6 1.5-3.5-0.2-0.6-0.4-1.1-0.4-1.7 0-2.8 2.1-5 4.7-5 1.7 0 3.1 0.9 4.1 2\" />\n      <path className=\"cls-2\" d=\"m65.7 222.6c0 0.7 0.4 1.1 1 1.1 0.2 0 0.4 0 0.5-0.2l-0.1-0.4c-0.2 0.2-0.8 0.2-1-0.5 0-0.8 0.8-0.8 1-0.6l0.1-0.4c-0.5-0.3-1.5 0-1.5 1zm6.9-0.2c-0.2 0-0.4-0.2-0.4-0.2 0-0.2 0.2-0.2 0.4-0.2s0.4 0 0.6 0.2l0.2-0.4c-0.2-0.2-0.4-0.2-0.8-0.2-0.5 0-0.7 0.4-0.7 0.6 0 0.4 0.3 0.5 0.7 0.5l0.2 0.2c0.2 0.2 0 0.4-0.2 0.4s-0.5 0-0.7-0.2l-0.2 0.4c0.2 0.2 0.5 0.2 0.7 0.2 0.6 0 0.8-0.2 0.8-0.6s-0.4-0.5-0.6-0.7zm2.2-0.8h-0.3v-0.2c0-0.3 0.2-0.3 0.3-0.3h0.2l0.2-0.4h-0.4c-0.3 0-0.7 0.2-0.9 0.7v0.2h-0.3v0.4h0.3l-0.3 1.5 0.3 0.7 0.4-0.5 0.4-1.7h0.3l0.2-0.4h-0.4zm4.3 0.2c-0.2-0.2-0.3-0.2-0.5-0.2-0.4 0-0.8 0-0.8 0.6l0.4 0.2c0-0.2 0.4-0.2 0.4-0.2 0.3 0 0.5 0.2 0.5 0.4-0.7 0-1.3 0-1.3 0.7 0 0.4 0.4 0.6 0.6 0.6s0.5-0.2 0.5-0.2v0.2h0.4v-1.3c0-0.4 0-0.6-0.2-0.8zm-0.5 1.7c-0.2 0-0.4 0-0.4-0.2 0-0.4 0.6-0.4 0.7-0.4v0.4s-0.1 0.2-0.3 0.2zm4.5-1.9c-0.6 0-1 0.4-1 1 0 0.7 0.4 1.1 1 1.1 0.4 0 0.6 0 0.8-0.2l-0.2-0.2c-0.2 0-0.4 0.2-0.6 0.2s-0.6-0.2-0.6-0.4h1.4c0.1-0.9-0.2-1.5-0.8-1.5zm-0.6 1c0-0.2 0.2-0.4 0.4-0.4 0.4 0 0.4 0.2 0.6 0.4h-1zm-11.7-0.8c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4 0-0.6 0.2l0.2 0.4h0.6c0.2 0 0.4 0.2 0.4 0.4-0.8 0-1.3 0-1.3 0.7 0 0.4 0.3 0.6 0.5 0.6s0.6-0.2 0.6-0.2v0.2h0.3v-1.3c0-0.4 0-0.6-0.1-0.8zm-0.6 1.7c-0.2 0-0.4 0-0.4-0.2 0-0.4 0.6-0.4 0.8-0.4v0.4s-0.2 0.2-0.4 0.2zm11.2-1.7v-0.2h-0.4v2.1h0.4v-1.1c0-0.2 0.2-0.4 0.4-0.4h0.2l0.1-0.6h-0.3s-0.2 0-0.4 0.2zm-4.5-1.1c-0.6 0-0.8 0.4-0.9 0.9v0.2h-0.4v0.4h0.4l-0.4 1.5 0.2 0.5 0.3-0.5 0.4-1.5h0.6l0.2-0.4h-0.6v-0.2c0-0.2 0.2-0.3 0.4-0.3h0.2l0.1-0.4c-0.3-0.2-0.3-0.2-0.5-0.2zm-9.3 0.4h-0.4v2.6h0.4v-2.6zm1.5 0.5c-0.6 0-0.9 0.4-0.9 1 0 0.7 0.3 1.1 0.9 1.1s0.9-0.4 0.9-1.1c0-0.4-0.4-1-0.9-1zm0 1.9c-0.4 0-0.6-0.4-0.6-0.8 0-0.3 0.2-0.5 0.6-0.5 0.2 0 0.4 0.2 0.4 0.5 0 0.4 0 0.8-0.4 0.8z\" />\n\n      {/* Snowflake */}\n      <path className=\"cls-21\" d=\"m77.3 10.9 3.7-2.1c0.9-0.5 0.2-2-0.9-1.7l-2.7 1.5v-3.3c0-1.1-1.8-1.5-2-0.2v4.9c0 0.7 0.9 1.3 1.9 0.9zm-4.3-0.9v-4.9c0-1.3-1.9-1.3-1.9 0v2.8l-2.4-1.1c-1.1-0.6-2.4 0.9-1.6 1.5l4.2 2.6c0.8 0.8 1.7 0 1.7-0.9zm-2.1 2.2-4.2-2c-1.1-0.6-2.3 1.1-1.3 1.8l2.2 1.3-2.4 1.3c-0.9 0.4-0.2 2.3 0.9 1.9l4.7-2.2c1.1-0.4 1.1-1.5 0.1-2.1zm0.4 3.4-4.1 2.6c-0.9 0.5-0.1 2.9 1.5 1.7l2.2-1.2v3.3c0 1.3 2.1 1.5 2.3 0.2v-5.3c0.2-1.1-1-1.7-1.9-1.3zm4.1 1.3v5.3c0 1.3 1.9 1.3 1.9 0v-3.3l2.4 1.7c1.3 0.8 2.4-0.9 1.3-1.6l-4.1-2.7c-0.6-0.7-1.5-0.2-1.5 0.6zm7.3-2.1-2.2-1.3 2.2-1.1c1-0.6 0.4-2.4-0.7-2l-4.4 2.2c-0.9 0.4-0.9 1.7 0 2l4.2 2.1c0.9 0.6 2-1.1 0.9-1.9z\" />\n      <path className=\"cls-21\" d=\"m74.5 11.5-1.7 0.9c-0.7 0.4-0.7 1.5-0.4 2.1l1.5 0.9c0.6 0.4 1.5 0 1.9-0.8l0.3-1.4c0-0.8-0.7-1.9-1.6-1.7zm0.9 1.8-2 0.6-0.4-0.9 1.5-1 0.9 1.3z\" />\n\n      {/* Animated stacks */}\n      <motion.g animate={s1.animate} transition={s1.transition}>\n        <path className=\"cls-19\" d=\"m257.7 100.9-36.2-20.9c-0.4-0.2-1.6 0-1.7 0.3l-37.1 20.6c-1.1 0.6-1.1 1.9 0 2.5l36.5 20.3c0.7 0.4 1.5 0.4 2.3 0l36.2-20.3c1.1-0.6 1.3-1.9 0-2.5z\" />\n      </motion.g>\n      <motion.g animate={s2.animate} transition={s2.transition}>\n        <path className=\"cls-20\" d=\"m257.7 116.9-35.9-20.5c-0.5-0.2-1.7 0-1.9 0.2l-37 20.3c-1.1 0.4-1.3 1.9 0 2.5l36.3 20.2c0.7 0.3 1.5 0.9 2.1 0.7 0.5 0.2 0.9 0 1.3-0.4l34.9-19.9c1.5-0.8 1.5-2.3 0.2-3.1z\" />\n      </motion.g>\n      <motion.g animate={s3.animate} transition={s3.transition}>\n        <path className=\"cls-17\" d=\"m257.5 132.8-25.1-14.4-10.6 5.9c-0.7 0.3-1.5 0.3-2.2 0l-11.3-6.2-25.2 14.3c-1.9 0.9-1.9 2.2 0 3.1l36.1 19.8c0.4 0.2 1.1 0.6 1.7 0.4 0.4 0.2 0.9 0 1.3-0.2l35.1-19.6c1.7-0.9 1.7-2.2 0.2-3.1z\" />\n        <path className=\"cls-18\" d=\"m257.5 132.8-11.6-6.8-24.1 13.6c-0.9 0.5-1.9 0-2.6-0.4l-24.8-13.6-11.5 6.6c-1.7 0.9-1.7 2.4 0 3.3l36.3 19.8c0.4 0.2 1.1 0.6 1.7 0.4 0.4 0.2 0.9 0 1.3-0.2l35.1-19.6c1.7-0.9 1.7-2.2 0.2-3.1z\" />\n      </motion.g>\n\n      {/* Light trails */}\n      {trails.map((trail, i) => (\n        <motion.path\n          key={i}\n          d={trail.d}\n          stroke=\"#c4b5fd\"\n          strokeWidth={1.5}\n          fill=\"none\"\n          strokeLinecap=\"round\"\n          initial={{ pathLength: trail.seg, pathOffset: 0, opacity: 0 }}\n          animate={{\n            pathOffset: [0, 0, +(1 - trail.seg).toFixed(2), +(1 - trail.seg).toFixed(2)],\n            opacity: [0, 1, 1, 0],\n          }}\n          transition={{\n            times: [0, 0.04, 0.88, 1],\n            duration: trail.duration,\n            delay: trail.delay,\n            ease: \"easeInOut\",\n            repeat: Infinity,\n            repeatDelay: CYCLE - trail.duration,\n          }}\n        />\n      ))}\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "~/components/craftui/illustrations/tool-connector/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Tool Connector - Tool Connector",
    "description": "Seven marketing and data tools wired into a single stack. Dashed rails run from each logo into a central card, light pulses travel the rails on a 7.5s loop, and three stacked slabs fade up in turn as their pulses land — a picture of many sources collapsing into one destination.",
    "category": "integration",
    "tags": [
      "illustration",
      "integration",
      "svg",
      "connector",
      "pipeline",
      "loop"
    ],
    "animationType": "loop"
  }
}