kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-7YUPXESC.js

@@ -0,0 +1,666 @@
+"use client";
+import {
+  NetworkBadge
+} from "./chunk-IV6AAVUE.js";
+
+// src/web/components/kaleidoscope-hero-animation.tsx
+import { useRef, useEffect, useState, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PROTOCOLS = [
+  { name: "Bitcoin L1", network: "L1", color: "#F7931A", glowColor: "rgba(247,147,26,0.5)" },
+  { name: "Lightning", network: "LN", color: "#fbbf24", glowColor: "rgba(251,191,36,0.5)" },
+  { name: "RGB", network: "RGB20", color: "#EF4444", glowColor: "rgba(239,68,68,0.5)" },
+  { name: "Spark", network: "Spark", color: "#FFFFFF", glowColor: "rgba(255,255,255,0.3)" },
+  { name: "Arkade", network: "Arkade", color: "#8B5CF6", glowColor: "rgba(139,92,246,0.5)" },
+  { name: "Liquid", network: "Liquid", color: "#22e1c9", glowColor: "rgba(34,225,201,0.5)" },
+  { name: "Taproot Assets", network: "Taproot", color: "#D1D6D8", glowColor: "rgba(209,214,216,0.5)" }
+];
+var hexPath = (r) => {
+  const pts = Array.from({ length: 6 }, (_, i) => {
+    const a = Math.PI / 3 * i - Math.PI / 6;
+    return `${r * Math.cos(a)},${r * Math.sin(a)}`;
+  });
+  return `M${pts.join("L")}Z`;
+};
+var diamondPath = (w, h) => `M0,${-h} L${w},0 L0,${h} L${-w},0 Z`;
+var triPath = (s) => `M0,${-s} L${s * 0.866},${s * 0.5} L${-s * 0.866},${s * 0.5} Z`;
+var KaleidoScopeHeroAnimation = ({
+  size = 500,
+  className = "",
+  iconBasePath = "/icons"
+}) => {
+  const containerRef = useRef(null);
+  const targetOffset = useRef({ x: 0, y: 0 });
+  const currentOffset = useRef({ x: 0, y: 0 });
+  const rafId = useRef(0);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const [hoveredProtocol, setHoveredProtocol] = useState(null);
+  const [isVisible, setIsVisible] = useState(true);
+  const c = 250;
+  const orbitR = 148;
+  const innerR = 82;
+  const outerR1 = 210;
+  const outerR2 = 185;
+  const midR = 118;
+  const iconR = 24;
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mq.matches);
+    const handler = (e) => setReducedMotion(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const handleMouseMove = useCallback((e) => {
+    if (reducedMotion) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const mx = rect.left + rect.width / 2;
+    const my = rect.top + rect.height / 2;
+    const dx = Math.max(-1, Math.min(1, (e.clientX - mx) / (rect.width / 2)));
+    const dy = Math.max(-1, Math.min(1, (e.clientY - my) / (rect.height / 2)));
+    targetOffset.current = { x: dx, y: dy };
+  }, [reducedMotion]);
+  const handleMouseLeave = useCallback(() => {
+    targetOffset.current = { x: 0, y: 0 };
+  }, []);
+  useEffect(() => {
+    if (reducedMotion || !isVisible || window.matchMedia("(pointer: coarse)").matches) return;
+    const lerp = () => {
+      const cur = currentOffset.current;
+      const tgt = targetOffset.current;
+      const nx = cur.x + (tgt.x - cur.x) * 0.05;
+      const ny = cur.y + (tgt.y - cur.y) * 0.05;
+      if (Math.abs(nx - cur.x) > 5e-4 || Math.abs(ny - cur.y) > 5e-4) {
+        currentOffset.current = { x: nx, y: ny };
+        setOffset({ x: nx, y: ny });
+      }
+      rafId.current = requestAnimationFrame(lerp);
+    };
+    rafId.current = requestAnimationFrame(lerp);
+    return () => cancelAnimationFrame(rafId.current);
+  }, [reducedMotion, isVisible]);
+  useEffect(() => {
+    if (window.matchMedia("(pointer: coarse)").matches) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    const el = containerRef.current;
+    if (el) el.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      if (el) el.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [handleMouseMove, handleMouseLeave]);
+  const px = (layer) => {
+    if (reducedMotion) return "translate(0,0)";
+    return `translate(${offset.x * layer},${offset.y * layer})`;
+  };
+  const anim = !reducedMotion && isVisible;
+  const iconPositions = PROTOCOLS.map((_, i) => {
+    const angle = Math.PI * 2 * i / 7 - Math.PI / 2;
+    return { x: c + orbitR * Math.cos(angle), y: c + orbitR * Math.sin(angle) };
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative ${className}`,
+      style: size ? { width: size, height: size } : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 500 500",
+          width: "100%",
+          height: "100%",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "overflow-visible",
+          children: [
+            /* @__PURE__ */ jsxs("defs", { children: [
+              /* @__PURE__ */ jsxs("linearGradient", { id: "kh-grad-a", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stop-color", values: "#22c55e;#8a5cf6;#06b6d4;#F7931A;#22c55e", dur: "10s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stop-color", values: "#8a5cf6;#F7931A;#22c55e;#06b6d4;#8a5cf6", dur: "10s", repeatCount: "indefinite" }) })
+              ] }),
+              /* @__PURE__ */ jsxs("linearGradient", { id: "kh-grad-b", x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stop-color", values: "#06b6d4;#22c55e;#F7931A;#8a5cf6;#06b6d4", dur: "8s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stop-color", values: "#F7931A;#06b6d4;#8a5cf6;#22c55e;#F7931A", dur: "8s", repeatCount: "indefinite" }) })
+              ] }),
+              /* @__PURE__ */ jsxs("linearGradient", { id: "kh-grad-c", x1: "50%", y1: "0%", x2: "50%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stop-color", values: "#0e9dff;#8a5cf6;#15E99A;#0e9dff", dur: "6s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stop-color", values: "#8a5cf6;#15E99A;#0e9dff;#8a5cf6", dur: "6s", repeatCount: "indefinite" }) })
+              ] }),
+              /* @__PURE__ */ jsxs("linearGradient", { id: "kh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#22c55e" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#8a5cf6" })
+              ] }),
+              /* @__PURE__ */ jsxs("linearGradient", { id: "kh-oc", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#F7931A" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#06b6d4" })
+              ] }),
+              /* @__PURE__ */ jsxs("linearGradient", { id: "kh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#0e9dff" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#8a5cf6" })
+              ] }),
+              /* @__PURE__ */ jsxs("radialGradient", { id: "kh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
+                /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
+              ] }),
+              /* @__PURE__ */ jsxs("radialGradient", { id: "kh-haze", cx: "50%", cy: "50%", r: "50%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "transparent", stopOpacity: "0" }),
+                /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#0e9dff", stopOpacity: "0.03" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#8a5cf6", stopOpacity: "0.06" })
+              ] }),
+              /* @__PURE__ */ jsxs("filter", { id: "kh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "3", result: "blur" }),
+                /* @__PURE__ */ jsxs("feMerge", { children: [
+                  /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+                  /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("filter", { id: "kh-glow-lg", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "8", result: "blur" }),
+                /* @__PURE__ */ jsxs("feMerge", { children: [
+                  /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+                  /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: "248", fill: "url(#kh-haze)" }),
+            /* @__PURE__ */ jsxs("g", { transform: px(20), children: [
+              /* @__PURE__ */ jsxs("g", { children: [
+                anim && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: `0 ${c} ${c}`,
+                    to: `360 ${c} ${c}`,
+                    dur: "55s",
+                    repeatCount: "indefinite"
+                  }
+                ),
+                Array.from({ length: 6 }, (_, i) => {
+                  const a = Math.PI / 3 * i;
+                  return /* @__PURE__ */ jsxs("g", { transform: `translate(${c + outerR1 * Math.cos(a)},${c + outerR1 * Math.sin(a)})`, children: [
+                    /* @__PURE__ */ jsx("path", { d: hexPath(40), fill: "url(#kh-grad-a)", opacity: 0.08 + i % 3 * 0.04 }),
+                    /* @__PURE__ */ jsx("path", { d: hexPath(40), fill: "none", stroke: "url(#kh-grad-a)", strokeWidth: "0.5", opacity: 0.15, children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.1;0.25;0.1", dur: `${4 + i * 0.3}s`, repeatCount: "indefinite" }) })
+                  ] }, `ha-${i}`);
+                }),
+                Array.from({ length: 6 }, (_, i) => {
+                  const a = Math.PI / 3 * i + Math.PI / 6;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: triPath(14),
+                      transform: `translate(${c + outerR1 * 0.78 * Math.cos(a)},${c + outerR1 * 0.78 * Math.sin(a)}) rotate(${i * 60 + 30})`,
+                      fill: "url(#kh-grad-a)",
+                      opacity: 0.06
+                    },
+                    `ta-${i}`
+                  );
+                }),
+                Array.from({ length: 12 }, (_, i) => {
+                  const a = Math.PI / 6 * i;
+                  return /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c + outerR1 * 0.92 * Math.cos(a),
+                      cy: c + outerR1 * 0.92 * Math.sin(a),
+                      r: "1.5",
+                      fill: "url(#kh-grad-a)",
+                      opacity: "0.15",
+                      children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.08;0.25;0.08", dur: `${2 + i % 3 * 0.7}s`, repeatCount: "indefinite" })
+                    },
+                    `od-${i}`
+                  );
+                })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { children: [
+                anim && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: `0 ${c} ${c}`,
+                    to: `-360 ${c} ${c}`,
+                    dur: "40s",
+                    repeatCount: "indefinite"
+                  }
+                ),
+                Array.from({ length: 6 }, (_, i) => {
+                  const a = Math.PI / 3 * i + Math.PI / 6;
+                  return /* @__PURE__ */ jsxs("g", { transform: `translate(${c + outerR2 * Math.cos(a)},${c + outerR2 * Math.sin(a)})`, children: [
+                    /* @__PURE__ */ jsx("path", { d: hexPath(30), fill: "url(#kh-grad-b)", opacity: 0.06 + i % 2 * 0.04 }),
+                    /* @__PURE__ */ jsx("path", { d: hexPath(30), fill: "none", stroke: "url(#kh-grad-b)", strokeWidth: "0.5", opacity: 0.12 })
+                  ] }, `hb-${i}`);
+                }),
+                Array.from({ length: 6 }, (_, i) => {
+                  const a = Math.PI / 3 * i;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: diamondPath(8, 16),
+                      transform: `translate(${c + outerR2 * 0.85 * Math.cos(a)},${c + outerR2 * 0.85 * Math.sin(a)}) rotate(${i * 60})`,
+                      fill: "url(#kh-grad-b)",
+                      opacity: "0.08",
+                      children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.05;0.15;0.05", dur: `${3.5 + i * 0.4}s`, repeatCount: "indefinite" })
+                    },
+                    `db-${i}`
+                  );
+                })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { children: [
+                anim && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: `0 ${c} ${c}`,
+                    to: `360 ${c} ${c}`,
+                    dur: "70s",
+                    repeatCount: "indefinite"
+                  }
+                ),
+                Array.from({ length: 12 }, (_, i) => {
+                  const a = Math.PI / 6 * i;
+                  const r = outerR1 * (0.6 + i % 2 * 0.15);
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: triPath(10),
+                      transform: `translate(${c + r * Math.cos(a)},${c + r * Math.sin(a)}) rotate(${i * 30 + 15})`,
+                      fill: "url(#kh-grad-c)",
+                      opacity: "0.05",
+                      children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.03;0.1;0.03", dur: `${5 + i % 4 * 0.8}s`, repeatCount: "indefinite" })
+                    },
+                    `tc-${i}`
+                  );
+                })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { transform: px(14), children: [
+              /* @__PURE__ */ jsxs("g", { children: [
+                anim && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: `0 ${c} ${c}`,
+                    to: `360 ${c} ${c}`,
+                    dur: "50s",
+                    repeatCount: "indefinite"
+                  }
+                ),
+                Array.from({ length: 12 }, (_, i) => {
+                  const a = Math.PI / 6 * i;
+                  return /* @__PURE__ */ jsxs("g", { transform: `translate(${c + midR * Math.cos(a)},${c + midR * Math.sin(a)})`, children: [
+                    /* @__PURE__ */ jsx("path", { d: hexPath(12), fill: "url(#kh-grad-c)", opacity: 0.08 + i % 3 * 0.03 }),
+                    /* @__PURE__ */ jsx("path", { d: hexPath(12), fill: "none", stroke: "url(#kh-grad-c)", strokeWidth: "0.4", opacity: "0.12", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.08;0.2;0.08", dur: `${3 + i % 4 * 0.5}s`, repeatCount: "indefinite" }) })
+                  ] }, `mh-${i}`);
+                })
+              ] }),
+              Array.from({ length: 6 }, (_, i) => {
+                const a1 = Math.PI / 3 * i;
+                const a2 = Math.PI / 3 * (i + 1);
+                const x1 = c + midR * Math.cos(a1);
+                const y1 = c + midR * Math.sin(a1);
+                const x2 = c + midR * Math.cos(a2);
+                const y2 = c + midR * Math.sin(a2);
+                return /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: `M${x1},${y1} Q${c},${c} ${x2},${y2}`,
+                    fill: "none",
+                    stroke: "url(#kh-bp)",
+                    strokeWidth: "0.5",
+                    strokeDasharray: "3 5",
+                    opacity: "0.1",
+                    children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-16", dur: `${3 + i * 0.2}s`, repeatCount: "indefinite" })
+                  },
+                  `arc-${i}`
+                );
+              })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { transform: px(10), children: [
+              /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: orbitR, fill: "none", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1", strokeDasharray: "3 5", children: anim && /* @__PURE__ */ jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${c} ${c}`, to: `360 ${c} ${c}`, dur: "90s", repeatCount: "indefinite" }) }),
+              /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: orbitR + 4, fill: "none", stroke: "rgba(255,255,255,0.03)", strokeWidth: "0.5" }),
+              /* @__PURE__ */ jsxs("g", { children: [
+                anim && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: `0 ${c} ${c}`,
+                    to: `360 ${c} ${c}`,
+                    dur: "40s",
+                    repeatCount: "indefinite"
+                  }
+                ),
+                iconPositions.map((pos, i) => {
+                  const angle = Math.atan2(pos.y - c, pos.x - c);
+                  const dx = Math.cos(angle);
+                  const dy = Math.sin(angle);
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: c + dx * 52,
+                        y1: c + dy * 52,
+                        x2: pos.x,
+                        y2: pos.y,
+                        stroke: PROTOCOLS[i].color,
+                        strokeWidth: "0.8",
+                        strokeDasharray: "2 4",
+                        opacity: "0.2",
+                        children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("circle", { r: "2.5", fill: PROTOCOLS[i].color, opacity: "0", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("animate", { attributeName: "cx", values: `${c + dx * 52};${pos.x}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
+                      /* @__PURE__ */ jsx("animate", { attributeName: "cy", values: `${c + dy * 52};${pos.y}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
+                      /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0;0.8;0", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
+                      /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "1.5;3;1.5", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" })
+                    ] }) })
+                  ] }, `conn-${i}`);
+                }),
+                PROTOCOLS.map((proto, i) => {
+                  const pos = iconPositions[i];
+                  const labelWidth = Math.max(proto.name.length * 5.5 + 10, 32);
+                  const isHovered = hoveredProtocol === proto.name;
+                  return /* @__PURE__ */ jsx("g", { transform: `translate(${pos.x},${pos.y})`, children: /* @__PURE__ */ jsxs(
+                    "g",
+                    {
+                      onMouseEnter: () => setHoveredProtocol(proto.name),
+                      onMouseLeave: () => setHoveredProtocol(null),
+                      style: { cursor: "pointer" },
+                      children: [
+                        anim && /* @__PURE__ */ jsx(
+                          "animateTransform",
+                          {
+                            attributeName: "transform",
+                            type: "rotate",
+                            from: "0 0 0",
+                            to: "-360 0 0",
+                            dur: "40s",
+                            repeatCount: "indefinite"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            cx: "0",
+                            cy: "0",
+                            r: iconR,
+                            fill: "none",
+                            stroke: proto.color,
+                            strokeWidth: "1",
+                            opacity: "0",
+                            children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx("animate", { attributeName: "r", values: `${iconR};${iconR + 12}`, dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` }),
+                              /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.5;0", dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` })
+                            ] })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            cx: "0",
+                            cy: "0",
+                            r: iconR + 4,
+                            fill: "none",
+                            stroke: proto.color,
+                            strokeWidth: "1",
+                            opacity: "0.15",
+                            children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.15;0.4;0.15", dur: `${3 + i * 0.4}s`, repeatCount: "indefinite" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            cx: "0",
+                            cy: "0",
+                            r: iconR + 1,
+                            fill: "none",
+                            stroke: proto.color,
+                            strokeWidth: "1.5",
+                            opacity: "0.25",
+                            children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.2;0.5;0.2", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            cx: "0",
+                            cy: "0",
+                            r: iconR,
+                            fill: "rgba(10,15,30,0.8)",
+                            stroke: "rgba(255,255,255,0.15)",
+                            strokeWidth: "1"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: iconR - 2, fill: proto.color, opacity: "0.06" }),
+                        /* @__PURE__ */ jsx("foreignObject", { x: -iconR, y: -iconR, width: iconR * 2, height: iconR * 2, children: /* @__PURE__ */ jsx(
+                          NetworkBadge,
+                          {
+                            network: proto.network,
+                            iconBasePath,
+                            className: "w-full h-full"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs("g", { opacity: isHovered ? 1 : 0, style: { transition: "opacity 0.2s ease" }, children: [
+                          /* @__PURE__ */ jsx(
+                            "rect",
+                            {
+                              x: -labelWidth / 2,
+                              y: iconR + 6,
+                              width: labelWidth,
+                              height: 16,
+                              rx: 4,
+                              fill: "rgba(0,0,0,0.85)",
+                              stroke: proto.color,
+                              strokeWidth: 0.5,
+                              strokeOpacity: 0.4
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "text",
+                            {
+                              x: "0",
+                              y: iconR + 18,
+                              textAnchor: "middle",
+                              fill: "white",
+                              fontSize: "9",
+                              fontWeight: "600",
+                              fontFamily: "system-ui, -apple-system, sans-serif",
+                              children: proto.name
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ) }, proto.name);
+                })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { transform: px(5), children: [
+              /* @__PURE__ */ jsxs("g", { children: [
+                anim && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: `0 ${c} ${c}`,
+                    to: `-360 ${c} ${c}`,
+                    dur: "35s",
+                    repeatCount: "indefinite"
+                  }
+                ),
+                Array.from({ length: 6 }, (_, i) => {
+                  const a = Math.PI / 3 * i;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: diamondPath(10, 22),
+                      transform: `translate(${c + innerR * Math.cos(a)},${c + innerR * Math.sin(a)}) rotate(${i * 60})`,
+                      fill: "url(#kh-gp)",
+                      opacity: "0.15",
+                      children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.1;0.28;0.1", dur: `${2.8 + i * 0.35}s`, repeatCount: "indefinite" })
+                    },
+                    `d-${i}`
+                  );
+                }),
+                Array.from({ length: 6 }, (_, i) => {
+                  const a = Math.PI / 3 * i + Math.PI / 6;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: triPath(8),
+                      transform: `translate(${c + innerR * 0.75 * Math.cos(a)},${c + innerR * 0.75 * Math.sin(a)}) rotate(${i * 60 + 30})`,
+                      fill: "url(#kh-oc)",
+                      opacity: "0.1",
+                      children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${3.2 + i * 0.3}s`, repeatCount: "indefinite" })
+                    },
+                    `it-${i}`
+                  );
+                }),
+                Array.from({ length: 12 }, (_, i) => {
+                  const a = Math.PI / 6 * i;
+                  const r = innerR * (i % 2 === 0 ? 0.55 : 0.65);
+                  return /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c + r * Math.cos(a),
+                      cy: c + r * Math.sin(a),
+                      r: i % 2 === 0 ? 2 : 1.5,
+                      fill: "url(#kh-oc)",
+                      opacity: "0.2",
+                      children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.1;0.35;0.1", dur: `${2 + i % 4 * 0.5}s`, repeatCount: "indefinite" })
+                    },
+                    `id-${i}`
+                  );
+                })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { children: [
+                anim && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: `0 ${c} ${c}`,
+                    to: `360 ${c} ${c}`,
+                    dur: "25s",
+                    repeatCount: "indefinite"
+                  }
+                ),
+                Array.from({ length: 6 }, (_, i) => {
+                  const a = Math.PI / 3 * i + Math.PI / 6;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: hexPath(6),
+                      transform: `translate(${c + innerR * 0.42 * Math.cos(a)},${c + innerR * 0.42 * Math.sin(a)})`,
+                      fill: "url(#kh-bp)",
+                      opacity: "0.1",
+                      children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
+                    },
+                    `ih-${i}`
+                  );
+                })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("g", { transform: px(18), children: Array.from({ length: 16 }, (_, i) => {
+              const a = Math.PI * 2 * i / 16;
+              const baseR = 60 + i % 4 * 45;
+              const x = c + baseR * Math.cos(a);
+              const y = c + baseR * Math.sin(a);
+              const colors = ["#0e9dff", "#8a5cf6", "#22c55e", "#F7931A", "#06b6d4", "#15E99A"];
+              return /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: x,
+                  cy: y,
+                  r: 1 + i % 3 * 0.5,
+                  fill: colors[i % colors.length],
+                  opacity: "0",
+                  children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0;0.6;0", dur: `${3 + i % 5 * 0.8}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
+                    /* @__PURE__ */ jsx("animate", { attributeName: "cx", values: `${x};${x + Math.cos(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
+                    /* @__PURE__ */ jsx("animate", { attributeName: "cy", values: `${y};${y + Math.sin(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` })
+                  ] })
+                },
+                `p-${i}`
+              );
+            }) }),
+            /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: "75", fill: "url(#kh-center-glow)", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "70;80;70", dur: "4s", repeatCount: "indefinite" }) }),
+              /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: "52", fill: "none", stroke: "url(#kh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "48;65", dur: "3s", repeatCount: "indefinite" }),
+                /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
+              ] }) }),
+              /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: "48", fill: "none", stroke: "url(#kh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "48;60", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
+                /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: hexPath(50),
+                  transform: `translate(${c},${c})`,
+                  fill: "none",
+                  stroke: "url(#kh-gp)",
+                  strokeWidth: "1.5",
+                  opacity: "0.4",
+                  filter: "url(#kh-glow)",
+                  children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
+                    /* @__PURE__ */ jsx("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: hexPath(46),
+                  transform: `translate(${c},${c})`,
+                  fill: "rgba(10,15,30,0.6)",
+                  stroke: "rgba(255,255,255,0.08)",
+                  strokeWidth: "0.5"
+                }
+              ),
+              /* @__PURE__ */ jsxs("g", { transform: `translate(${c - 34},${c - 34}) scale(0.325)`, children: [
+                /* @__PURE__ */ jsx("path", { d: "M69.7141 207.3H0.908203L35.3243 172.936L69.7141 207.3Z", fill: "#6F32FF" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.441 0.96106V69.767L104.078 35.3508L138.441 0.96106Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.415 138.547V207.352L104.051 172.936L138.415 138.547Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.441 69.7406V0.96106L172.804 35.3772L138.441 69.767V69.7406Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M69.6614 138.494V69.6879L104.025 104.104L69.6614 138.494Z", fill: "#15E99A" }),
+                /* @__PURE__ */ jsx("path", { d: "M69.6615 69.7142V138.52L35.2981 104.104L69.6615 69.7142Z", fill: "#15E99A" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.467 207.379V138.573L172.831 172.989L138.467 207.379Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M0.908203 0.908325H69.7141L35.298 35.2718L0.908203 0.908325Z", fill: "#6F32FF" }),
+                /* @__PURE__ */ jsx("path", { d: "M207.22 207.3H138.415L172.831 172.936L207.22 207.3Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.415 0.987427H207.22L172.804 35.3509L138.415 0.987427Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.467 69.7143H69.6614L104.078 35.3508L138.467 69.7143Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M69.635 138.494H138.441L104.025 172.857L69.635 138.494Z", fill: "#17B581" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.415 138.494H69.635L104.025 104.157L138.388 138.494H138.415Z", fill: "#15E99A" }),
+                /* @__PURE__ */ jsx("path", { d: "M138.415 69.7142L104.051 104.051L69.6614 69.7142H138.441H138.415Z", fill: "#15E99A" })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+
+export {
+  KaleidoScopeHeroAnimation
+};