@nice2dev/icons 1.3.16 → 1.3.17

package/dist/esm/iconStyles.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
+import { retimeTree, durationScale } from "./animationSpeed.js";
 const wrapperBase = {
   position: "relative",
   display: "inline-flex",
@@ -16,7 +17,8 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 2,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       vineColor = "#22c55e",
       petalColor = "#f472b6",
@@ -24,6 +26,7 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 2;
       const lc = leafColor ?? vineColor;
       const dur = `${duration}s`;
       const halfDur = `${duration * 0.5}s`;
@@ -64,137 +67,140 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const dashLen = 250;
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        children,
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
-            "aria-hidden": true,
-            children: [
-              [vine1, vine2, ...showExtra ? [vine3, vine4] : []].map((d, i) => /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d,
-                  fill: "none",
-                  stroke: vineColor,
-                  strokeWidth: i < 2 ? 1.5 : 1,
-                  strokeLinecap: "round",
-                  opacity: i < 2 ? 0.85 : 0.55,
-                  ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "stroke-dashoffset",
-                      from: `${dashLen}`,
-                      to: "0",
-                      dur,
-                      fill: "freeze",
-                      begin: i < 2 ? "0s" : `${duration * 0.3}s`
-                    }
-                  )
-                },
-                `v${i}`
-              )),
-              allLeaves.map((l, i) => /* @__PURE__ */ jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.8, children: [
-                /* @__PURE__ */ jsx("path", { d: leafD, fill: lc }),
-                /* @__PURE__ */ jsx(
-                  "line",
-                  {
-                    x1: 0,
-                    y1: -3,
-                    x2: 0,
-                    y2: 2.5,
-                    stroke: lc,
-                    strokeWidth: "0.4",
-                    opacity: 0.4
-                  }
-                ),
-                animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "opacity",
-                      from: "0",
-                      to: "0.8",
-                      dur: halfDur,
-                      begin: bloomAt,
-                      fill: "freeze"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "animateTransform",
-                    {
-                      attributeName: "transform",
-                      type: "scale",
-                      values: "0 0;1 1",
-                      keyTimes: "0;1",
-                      keySplines: "0.34 1 0.64 1",
-                      calcMode: "spline",
-                      dur: halfDur,
-                      begin: bloomAt,
-                      fill: "freeze"
-                    }
-                  )
-                ] })
-              ] }) }, `l${i}`)),
-              flowerPositions.map((f, fi) => /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 1, children: [
-                petalOffsets.map(([ox, oy], pi) => /* @__PURE__ */ jsx(
-                  "circle",
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          children,
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
+              "aria-hidden": true,
+              children: [
+                [vine1, vine2, ...showExtra ? [vine3, vine4] : []].map((d, i) => /* @__PURE__ */ jsx(
+                  "path",
                   {
-                    cx: f.x + ox * f.r,
-                    cy: f.y + oy * f.r,
-                    r: f.r * 0.5,
-                    fill: petalColor,
-                    opacity: 0.85
+                    d,
+                    fill: "none",
+                    stroke: vineColor,
+                    strokeWidth: i < 2 ? 1.5 : 1,
+                    strokeLinecap: "round",
+                    opacity: i < 2 ? 0.85 : 0.55,
+                    ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
+                    children: animate && /* @__PURE__ */ jsx(
+                      "animate",
+                      {
+                        attributeName: "stroke-dashoffset",
+                        from: `${dashLen}`,
+                        to: "0",
+                        dur,
+                        fill: "freeze",
+                        begin: i < 2 ? "0s" : `${duration * 0.3}s`
+                      }
+                    )
                   },
-                  pi
+                  `v${i}`
                 )),
-                /* @__PURE__ */ jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }),
-                animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                allLeaves.map((l, i) => /* @__PURE__ */ jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.8, children: [
+                  /* @__PURE__ */ jsx("path", { d: leafD, fill: lc }),
                   /* @__PURE__ */ jsx(
-                    "animate",
+                    "line",
                     {
-                      attributeName: "opacity",
-                      from: "0",
-                      to: "1",
-                      dur: halfDur,
-                      begin: flowerAt,
-                      fill: "freeze"
+                      x1: 0,
+                      y1: -3,
+                      x2: 0,
+                      y2: 2.5,
+                      stroke: lc,
+                      strokeWidth: "0.4",
+                      opacity: 0.4
                     }
                   ),
-                  /* @__PURE__ */ jsx(
-                    "animateTransform",
+                  animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.8",
+                        dur: halfDur,
+                        begin: bloomAt,
+                        fill: "freeze"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "animateTransform",
+                      {
+                        attributeName: "transform",
+                        type: "scale",
+                        values: "0 0;1 1",
+                        keyTimes: "0;1",
+                        keySplines: "0.34 1 0.64 1",
+                        calcMode: "spline",
+                        dur: halfDur,
+                        begin: bloomAt,
+                        fill: "freeze"
+                      }
+                    )
+                  ] })
+                ] }) }, `l${i}`)),
+                flowerPositions.map((f, fi) => /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 1, children: [
+                  petalOffsets.map(([ox, oy], pi) => /* @__PURE__ */ jsx(
+                    "circle",
                     {
-                      attributeName: "transform",
-                      type: "scale",
-                      values: "0.3 0.3;1 1",
-                      keyTimes: "0;1",
-                      keySplines: "0.34 1 0.64 1",
-                      calcMode: "spline",
-                      dur: halfDur,
-                      begin: flowerAt,
-                      fill: "freeze"
-                    }
-                  )
-                ] })
-              ] }, `f${fi}`)),
-              animate && /* @__PURE__ */ jsx(
-                "animateTransform",
-                {
-                  attributeName: "transform",
-                  type: "rotate",
-                  values: "0 50 50;1 50 50;-1 50 50;0 50 50",
-                  dur: "4s",
-                  repeatCount: "indefinite",
-                  begin: `${duration}s`
-                }
-              )
-            ]
-          }
-        )
-      ] });
+                      cx: f.x + ox * f.r,
+                      cy: f.y + oy * f.r,
+                      r: f.r * 0.5,
+                      fill: petalColor,
+                      opacity: 0.85
+                    },
+                    pi
+                  )),
+                  /* @__PURE__ */ jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }),
+                  animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "1",
+                        dur: halfDur,
+                        begin: flowerAt,
+                        fill: "freeze"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "animateTransform",
+                      {
+                        attributeName: "transform",
+                        type: "scale",
+                        values: "0.3 0.3;1 1",
+                        keyTimes: "0;1",
+                        keySplines: "0.34 1 0.64 1",
+                        calcMode: "spline",
+                        dur: halfDur,
+                        begin: flowerAt,
+                        fill: "freeze"
+                      }
+                    )
+                  ] })
+                ] }, `f${fi}`)),
+                animate && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    values: "0 50 50;1 50 50;-1 50 50;0 50 50",
+                    dur: "4s",
+                    repeatCount: "indefinite",
+                    begin: `${duration}s`
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconFloral" }
@@ -204,13 +210,15 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 1.5,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       colors,
       sparkleColor = "#fbbf24",
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 1.5;
       const cols = colors ?? ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ec4899"];
       const dur = `${duration * 0.6}s`;
       const baseConfetti = [
@@ -260,122 +268,125 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
           { cx: 97, cy: 45, r: 1.1 }
         ] : []
       ];
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        children,
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
-            "aria-hidden": true,
-            children: [
-              allConfetti.map((c, i) => {
-                const delay = `${(i * 0.07).toFixed(2)}s`;
-                const col = cols[c.ci % cols.length];
-                return /* @__PURE__ */ jsx("g", { transform: "translate(50,50)", children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.85, children: [
-                  /* @__PURE__ */ jsx(
-                    "rect",
-                    {
-                      x: c.x - 50 - 1.5,
-                      y: c.y - 50 - 3,
-                      width: 3,
-                      height: 6,
-                      rx: 0.5,
-                      fill: col,
-                      transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})`
-                    }
-                  ),
-                  animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          children,
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
+              "aria-hidden": true,
+              children: [
+                allConfetti.map((c, i) => {
+                  const delay = `${(i * 0.07).toFixed(2)}s`;
+                  const col = cols[c.ci % cols.length];
+                  return /* @__PURE__ */ jsx("g", { transform: "translate(50,50)", children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.85, children: [
                     /* @__PURE__ */ jsx(
-                      "animate",
+                      "rect",
                       {
-                        attributeName: "opacity",
-                        from: "0",
-                        to: "0.85",
-                        dur: "0.4s",
-                        begin: delay,
-                        fill: "freeze"
+                        x: c.x - 50 - 1.5,
+                        y: c.y - 50 - 3,
+                        width: 3,
+                        height: 6,
+                        rx: 0.5,
+                        fill: col,
+                        transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})`
                       }
                     ),
-                    /* @__PURE__ */ jsx(
-                      "animateTransform",
-                      {
-                        attributeName: "transform",
-                        type: "scale",
-                        values: "0 0;1 1",
-                        keyTimes: "0;1",
-                        keySplines: "0.34 1 0.64 1",
-                        calcMode: "spline",
-                        dur,
-                        begin: delay,
-                        fill: "freeze"
-                      }
-                    )
-                  ] })
-                ] }) }, `c${i}`);
-              }),
-              stars.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [
-                /* @__PURE__ */ jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && /* @__PURE__ */ jsx(
-                  "animate",
-                  {
-                    attributeName: "opacity",
-                    from: "0",
-                    to: "0.9",
-                    dur: "0.5s",
-                    begin: `${(i * 0.15 + 0.3).toFixed(2)}s`,
-                    fill: "freeze"
-                  }
-                ) }),
-                animate && /* @__PURE__ */ jsx(
-                  "animateTransform",
+                    animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.85",
+                          dur: "0.4s",
+                          begin: delay,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animateTransform",
+                        {
+                          attributeName: "transform",
+                          type: "scale",
+                          values: "0 0;1 1",
+                          keyTimes: "0;1",
+                          keySplines: "0.34 1 0.64 1",
+                          calcMode: "spline",
+                          dur,
+                          begin: delay,
+                          fill: "freeze"
+                        }
+                      )
+                    ] })
+                  ] }) }, `c${i}`);
+                }),
+                stars.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [
+                  /* @__PURE__ */ jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && /* @__PURE__ */ jsx(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      from: "0",
+                      to: "0.9",
+                      dur: "0.5s",
+                      begin: `${(i * 0.15 + 0.3).toFixed(2)}s`,
+                      fill: "freeze"
+                    }
+                  ) }),
+                  animate && /* @__PURE__ */ jsx(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      type: "scale",
+                      values: `${s.s};${s.s * 1.3};${s.s}`,
+                      dur: "1.5s",
+                      repeatCount: "indefinite",
+                      begin: `${duration + 0.5}s`
+                    }
+                  )
+                ] }, `s${i}`)),
+                sparkles.map((sp, i) => /* @__PURE__ */ jsx(
+                  "circle",
                   {
-                    attributeName: "transform",
-                    type: "scale",
-                    values: `${s.s};${s.s * 1.3};${s.s}`,
-                    dur: "1.5s",
-                    repeatCount: "indefinite",
-                    begin: `${duration + 0.5}s`
-                  }
-                )
-              ] }, `s${i}`)),
-              sparkles.map((sp, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: sp.cx,
-                  cy: sp.cy,
-                  r: sp.r,
-                  fill: sparkleColor,
-                  opacity: animate ? 0 : 0.7,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        from: "0",
-                        to: "0.7",
-                        dur: "0.3s",
-                        begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`,
-                        fill: "freeze"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        values: "0.3;0.9;0.3",
-                        dur: `${1 + i * 0.3}s`,
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
-                    )
-                  ] })
-                },
-                `sp${i}`
-              ))
-            ]
-          }
-        )
-      ] });
+                    cx: sp.cx,
+                    cy: sp.cy,
+                    r: sp.r,
+                    fill: sparkleColor,
+                    opacity: animate ? 0 : 0.7,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.7",
+                          dur: "0.3s",
+                          begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0.3;0.9;0.3",
+                          dur: `${1 + i * 0.3}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `sp${i}`
+                ))
+              ]
+            }
+          )
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconFestive" }
@@ -385,7 +396,8 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 4,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       glowColor = "#0ff",
       secondaryGlow,
@@ -393,6 +405,7 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 4;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const glow2 = secondaryGlow ?? glowColor;
       const blur = intensity === "dense" ? 8 : intensity === "subtle" ? 3 : 5;
@@ -405,25 +418,28 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       ].filter(Boolean).join(" ");
       const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
       const animName = `ntd_neon_${uid}`;
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        animate && flicker && /* @__PURE__ */ jsx("style", { children: `
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          animate && flicker && /* @__PURE__ */ jsx("style", { children: `
             @keyframes ${animName} {
               0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; filter: ${filterValue}; }
               20%, 24%, 55% { opacity: 0.5; filter: ${dimFilter}; }
             }
           ` }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              display: "inline-flex",
-              filter: filterValue,
-              ...animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}
-            },
-            children
-          }
-        )
-      ] });
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                filter: filterValue,
+                ...animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}
+              },
+              children
+            }
+          )
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconNeon" }
@@ -433,13 +449,15 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 1.5,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       strokeColor = "#374151",
       roughness = 2,
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 1.5;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const filterId = `ntd_sketch_${uid}`;
       const dur = `${duration}s`;
@@ -455,112 +473,115 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
         { x1: 10, y1: 12, x2: 16, y2: 10 },
         { x1: 84, y1: 12, x2: 90, y2: 10 }
       ];
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
-          /* @__PURE__ */ jsx(
-            "feTurbulence",
-            {
-              type: "turbulence",
-              baseFrequency: 0.02 + roughness * 8e-3,
-              numOctaves: 3,
-              seed: 2,
-              result: "noise"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "feDisplacementMap",
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
+            /* @__PURE__ */ jsx(
+              "feTurbulence",
+              {
+                type: "turbulence",
+                baseFrequency: 0.02 + roughness * 8e-3,
+                numOctaves: 3,
+                seed: 2,
+                result: "noise"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "feDisplacementMap",
+              {
+                in: "SourceGraphic",
+                in2: "noise",
+                scale: roughness,
+                xChannelSelector: "R",
+                yChannelSelector: "G"
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", filter: `url(#${filterId})` }, children }),
+          /* @__PURE__ */ jsxs(
+            "svg",
             {
-              in: "SourceGraphic",
-              in2: "noise",
-              scale: roughness,
-              xChannelSelector: "R",
-              yChannelSelector: "G"
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%" },
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: scribbleMain,
+                    fill: "none",
+                    stroke: strokeColor,
+                    strokeWidth: "1",
+                    strokeLinecap: "round",
+                    opacity: 0.5,
+                    ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
+                    children: animate && /* @__PURE__ */ jsx(
+                      "animate",
+                      {
+                        attributeName: "stroke-dashoffset",
+                        from: `${dashLen}`,
+                        to: "0",
+                        dur,
+                        fill: "freeze"
+                      }
+                    )
+                  }
+                ),
+                intensity !== "subtle" && scribbleExtra.slice(0, intensity === "dense" ? 2 : 1).map((d, i) => /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d,
+                    fill: "none",
+                    stroke: strokeColor,
+                    strokeWidth: "0.8",
+                    strokeLinecap: "round",
+                    opacity: 0.35,
+                    ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
+                    children: animate && /* @__PURE__ */ jsx(
+                      "animate",
+                      {
+                        attributeName: "stroke-dashoffset",
+                        from: `${dashLen}`,
+                        to: "0",
+                        dur,
+                        fill: "freeze",
+                        begin: `${0.3 + i * 0.2}s`
+                      }
+                    )
+                  },
+                  `se${i}`
+                )),
+                hatchPositions.slice(0, hatchCount).map((p, i) => /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: p.x1,
+                    y1: p.y1,
+                    x2: p.x2,
+                    y2: p.y2,
+                    stroke: strokeColor,
+                    strokeWidth: "0.6",
+                    strokeLinecap: "round",
+                    opacity: animate ? 0 : 0.3,
+                    children: animate && /* @__PURE__ */ jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.3",
+                        dur: "0.3s",
+                        begin: `${duration * 0.7 + i * 0.1}s`,
+                        fill: "freeze"
+                      }
+                    )
+                  },
+                  `h${i}`
+                ))
+              ]
             }
           )
-        ] }) }) }),
-        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", filter: `url(#${filterId})` }, children }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%" },
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: scribbleMain,
-                  fill: "none",
-                  stroke: strokeColor,
-                  strokeWidth: "1",
-                  strokeLinecap: "round",
-                  opacity: 0.5,
-                  ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "stroke-dashoffset",
-                      from: `${dashLen}`,
-                      to: "0",
-                      dur,
-                      fill: "freeze"
-                    }
-                  )
-                }
-              ),
-              intensity !== "subtle" && scribbleExtra.slice(0, intensity === "dense" ? 2 : 1).map((d, i) => /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d,
-                  fill: "none",
-                  stroke: strokeColor,
-                  strokeWidth: "0.8",
-                  strokeLinecap: "round",
-                  opacity: 0.35,
-                  ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "stroke-dashoffset",
-                      from: `${dashLen}`,
-                      to: "0",
-                      dur,
-                      fill: "freeze",
-                      begin: `${0.3 + i * 0.2}s`
-                    }
-                  )
-                },
-                `se${i}`
-              )),
-              hatchPositions.slice(0, hatchCount).map((p, i) => /* @__PURE__ */ jsx(
-                "line",
-                {
-                  x1: p.x1,
-                  y1: p.y1,
-                  x2: p.x2,
-                  y2: p.y2,
-                  stroke: strokeColor,
-                  strokeWidth: "0.6",
-                  strokeLinecap: "round",
-                  opacity: animate ? 0 : 0.3,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "opacity",
-                      from: "0",
-                      to: "0.3",
-                      dur: "0.3s",
-                      begin: `${duration * 0.7 + i * 0.1}s`,
-                      fill: "freeze"
-                    }
-                  )
-                },
-                `h${i}`
-              ))
-            ]
-          }
-        )
-      ] });
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconSketch" }
@@ -570,13 +591,15 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 2,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       tintColor = "#818cf8",
       bleedColor = "#f0abfc",
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 2;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const filterId = `ntd_wc_${uid}`;
       const blobFilter = `${filterId}_blob`;
@@ -605,115 +628,118 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
           { cx: 92, cy: 55, r: 1 }
         ] : []
       ];
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
-            /* @__PURE__ */ jsx(
-              "feTurbulence",
-              {
-                type: "fractalNoise",
-                baseFrequency: "0.04",
-                numOctaves: 4,
-                seed: 5,
-                result: "noise"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "feDisplacementMap",
-              {
-                in: "SourceGraphic",
-                in2: "noise",
-                scale: 3,
-                xChannelSelector: "R",
-                yChannelSelector: "G",
-                result: "displaced"
-              }
-            ),
-            /* @__PURE__ */ jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })
-          ] }),
-          /* @__PURE__ */ jsx("filter", { id: blobFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "3" }) })
-        ] }) }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
-            "aria-hidden": true,
-            children: [
-              splotches.map((s, i) => /* @__PURE__ */ jsx(
-                "circle",
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
                 {
-                  cx: s.cx,
-                  cy: s.cy,
-                  r: animate ? 0 : s.r,
-                  fill: s.color,
-                  opacity: s.op,
-                  filter: `url(#${blobFilter})`,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
+                  type: "fractalNoise",
+                  baseFrequency: "0.04",
+                  numOctaves: 4,
+                  seed: 5,
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: 3,
+                  xChannelSelector: "R",
+                  yChannelSelector: "G",
+                  result: "displaced"
+                }
+              ),
+              /* @__PURE__ */ jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })
+            ] }),
+            /* @__PURE__ */ jsx("filter", { id: blobFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "3" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                splotches.map((s, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: s.cx,
+                    cy: s.cy,
+                    r: animate ? 0 : s.r,
+                    fill: s.color,
+                    opacity: s.op,
+                    filter: `url(#${blobFilter})`,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          from: "0",
+                          to: `${s.r}`,
+                          dur: `${duration * 0.7}s`,
+                          begin: `${(i * 0.15).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: `${s.op};${s.op * 1.3};${s.op}`,
+                          dur: "3s",
+                          begin: `${duration}s`,
+                          repeatCount: "indefinite"
+                        }
+                      )
+                    ] })
+                  },
+                  `sp${i}`
+                )),
+                splatters.map((d, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: d.cx,
+                    cy: d.cy,
+                    r: d.r,
+                    fill: i % 2 === 0 ? tintColor : bleedColor,
+                    opacity: animate ? 0 : 0.3,
+                    filter: `url(#${blobFilter})`,
+                    children: animate && /* @__PURE__ */ jsx(
                       "animate",
                       {
-                        attributeName: "r",
+                        attributeName: "opacity",
                         from: "0",
-                        to: `${s.r}`,
-                        dur: `${duration * 0.7}s`,
-                        begin: `${(i * 0.15).toFixed(2)}s`,
+                        to: "0.3",
+                        dur: "0.3s",
+                        begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`,
                         fill: "freeze"
                       }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        values: `${s.op};${s.op * 1.3};${s.op}`,
-                        dur: "3s",
-                        begin: `${duration}s`,
-                        repeatCount: "indefinite"
-                      }
                     )
-                  ] })
-                },
-                `sp${i}`
-              )),
-              splatters.map((d, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: d.cx,
-                  cy: d.cy,
-                  r: d.r,
-                  fill: i % 2 === 0 ? tintColor : bleedColor,
-                  opacity: animate ? 0 : 0.3,
-                  filter: `url(#${blobFilter})`,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "opacity",
-                      from: "0",
-                      to: "0.3",
-                      dur: "0.3s",
-                      begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`,
-                      fill: "freeze"
-                    }
-                  )
-                },
-                `dot${i}`
-              ))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              display: "inline-flex",
-              filter: `url(#${filterId})`,
-              position: "relative",
-              zIndex: 1
-            },
-            children
-          }
-        )
-      ] });
+                  },
+                  `dot${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                filter: `url(#${filterId})`,
+                position: "relative",
+                zIndex: 1
+              },
+              children
+            }
+          )
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconWatercolor" }
@@ -723,7 +749,8 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 2,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       starColor = "#e2e8f0",
       nebulaColor = "#7c3aed",
@@ -731,6 +758,7 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 2;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const nebulaFilter = `ntd_cosm_${uid}`;
       const baseStars = [
@@ -781,154 +809,157 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const lineLen = 80;
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: nebulaFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
-            "aria-hidden": true,
-            children: [
-              nebulae.map((n, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: n.cx,
-                  cy: n.cy,
-                  r: n.r,
-                  fill: n.color,
-                  opacity: animate ? 0 : n.op,
-                  filter: `url(#${nebulaFilter})`,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        from: "0",
-                        to: `${n.op}`,
-                        dur: `${duration}s`,
-                        fill: "freeze"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        values: `${n.op};${n.op * 1.5};${n.op}`,
-                        dur: "5s",
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "r",
-                        values: `${n.r};${n.r * 1.1};${n.r}`,
-                        dur: "6s",
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
-                    )
-                  ] })
-                },
-                `nb${i}`
-              )),
-              constellations.map((c, i) => /* @__PURE__ */ jsx(
-                "line",
-                {
-                  x1: c.from[0],
-                  y1: c.from[1],
-                  x2: c.to[0],
-                  y2: c.to[1],
-                  stroke: starColor,
-                  strokeWidth: "0.3",
-                  opacity: 0.25,
-                  ...animate ? { strokeDasharray: lineLen, strokeDashoffset: lineLen } : {},
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "stroke-dashoffset",
-                      from: `${lineLen}`,
-                      to: "0",
-                      dur: `${duration * 0.8}s`,
-                      begin: `${(i * 0.2).toFixed(1)}s`,
-                      fill: "freeze"
-                    }
-                  )
-                },
-                `cl${i}`
-              ))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 2 },
-            "aria-hidden": true,
-            children: [
-              allStars.map((s, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: s.cx,
-                  cy: s.cy,
-                  r: s.r,
-                  fill: starColor,
-                  opacity: animate ? 0 : 0.8,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: nebulaFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                nebulae.map((n, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: n.cx,
+                    cy: n.cy,
+                    r: n.r,
+                    fill: n.color,
+                    opacity: animate ? 0 : n.op,
+                    filter: `url(#${nebulaFilter})`,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: `${n.op}`,
+                          dur: `${duration}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: `${n.op};${n.op * 1.5};${n.op}`,
+                          dur: "5s",
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${n.r};${n.r * 1.1};${n.r}`,
+                          dur: "6s",
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `nb${i}`
+                )),
+                constellations.map((c, i) => /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: c.from[0],
+                    y1: c.from[1],
+                    x2: c.to[0],
+                    y2: c.to[1],
+                    stroke: starColor,
+                    strokeWidth: "0.3",
+                    opacity: 0.25,
+                    ...animate ? { strokeDasharray: lineLen, strokeDashoffset: lineLen } : {},
+                    children: animate && /* @__PURE__ */ jsx(
                       "animate",
                       {
-                        attributeName: "opacity",
-                        from: "0",
-                        to: "0.8",
-                        dur: `${duration * 0.5}s`,
-                        begin: `${(i * 0.1).toFixed(2)}s`,
+                        attributeName: "stroke-dashoffset",
+                        from: `${lineLen}`,
+                        to: "0",
+                        dur: `${duration * 0.8}s`,
+                        begin: `${(i * 0.2).toFixed(1)}s`,
                         fill: "freeze"
                       }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        values: "0.4;1;0.4",
-                        dur: `${1.5 + i % 4 * 0.4}s`,
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "r",
-                        values: `${s.r};${s.r * 1.4};${s.r}`,
-                        dur: `${2 + i % 3 * 0.5}s`,
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
                     )
-                  ] })
-                },
-                `st${i}`
-              )),
-              animate && /* @__PURE__ */ jsx(
-                "animateTransform",
-                {
-                  attributeName: "transform",
-                  type: "rotate",
-                  from: "0 50 50",
-                  to: "360 50 50",
-                  dur: "120s",
-                  repeatCount: "indefinite"
-                }
-              )
-            ]
-          }
-        )
-      ] });
+                  },
+                  `cl${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 2 },
+              "aria-hidden": true,
+              children: [
+                allStars.map((s, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: s.cx,
+                    cy: s.cy,
+                    r: s.r,
+                    fill: starColor,
+                    opacity: animate ? 0 : 0.8,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.8",
+                          dur: `${duration * 0.5}s`,
+                          begin: `${(i * 0.1).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0.4;1;0.4",
+                          dur: `${1.5 + i % 4 * 0.4}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${s.r};${s.r * 1.4};${s.r}`,
+                          dur: `${2 + i % 3 * 0.5}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `st${i}`
+                )),
+                animate && /* @__PURE__ */ jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: "0 50 50",
+                    to: "360 50 50",
+                    dur: "120s",
+                    repeatCount: "indefinite"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconCosmic" }
@@ -938,7 +969,8 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 3,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       brassColor = "#b45309",
       pipeColor = "#78350f",
@@ -946,6 +978,7 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 3;
       const makeGear = (cx, cy, r, teeth) => {
         const inner = r * 0.68;
         const step = Math.PI * 2 / teeth;
@@ -997,110 +1030,113 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
         { cx: 55, cy: -4, r: 2.2 },
         { cx: 47, cy: -10, r: 1.6 }
       ];
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 0 },
-            "aria-hidden": true,
-            children: [
-              pipes.map((p, i) => /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: p.d,
-                  stroke: pipeColor,
-                  strokeWidth: p.w,
-                  fill: "none",
-                  strokeLinecap: "round",
-                  opacity: 0.55
-                },
-                `pipe${i}`
-              )),
-              rivets.map((rv, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: rv.cx,
-                  cy: rv.cy,
-                  r: 1.5,
-                  fill: brassColor,
-                  opacity: 0.7
-                },
-                `rv${i}`
-              ))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 2 },
-            "aria-hidden": true,
-            children: [
-              gears.map((g, i) => /* @__PURE__ */ jsxs("g", { children: [
-                /* @__PURE__ */ jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && /* @__PURE__ */ jsx(
-                  "animateTransform",
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                pipes.map((p, i) => /* @__PURE__ */ jsx(
+                  "path",
                   {
-                    attributeName: "transform",
-                    type: "rotate",
-                    from: `0 ${g.cx} ${g.cy}`,
-                    to: `${g.dir * 360} ${g.cx} ${g.cy}`,
-                    dur: `${duration * g.dm}s`,
-                    repeatCount: "indefinite"
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }),
-                /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })
-              ] }, `gear${i}`)),
-              animate && steamPuffs.map((sp, i) => /* @__PURE__ */ jsxs(
-                "circle",
-                {
-                  cx: sp.cx,
-                  cy: sp.cy,
-                  r: sp.r,
-                  fill: steamColor,
-                  opacity: 0,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        values: "0;0.45;0",
-                        dur: "2.4s",
-                        begin: `${i * 0.7}s`,
-                        repeatCount: "indefinite"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "cy",
-                        values: `${sp.cy};${sp.cy - 12}`,
-                        dur: "2.4s",
-                        begin: `${i * 0.7}s`,
-                        repeatCount: "indefinite"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "r",
-                        values: `${sp.r};${sp.r * 2.2}`,
-                        dur: "2.4s",
-                        begin: `${i * 0.7}s`,
-                        repeatCount: "indefinite"
-                      }
-                    )
-                  ]
-                },
-                `stm${i}`
-              ))
-            ]
-          }
-        )
-      ] });
+                    d: p.d,
+                    stroke: pipeColor,
+                    strokeWidth: p.w,
+                    fill: "none",
+                    strokeLinecap: "round",
+                    opacity: 0.55
+                  },
+                  `pipe${i}`
+                )),
+                rivets.map((rv, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: rv.cx,
+                    cy: rv.cy,
+                    r: 1.5,
+                    fill: brassColor,
+                    opacity: 0.7
+                  },
+                  `rv${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 2 },
+              "aria-hidden": true,
+              children: [
+                gears.map((g, i) => /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && /* @__PURE__ */ jsx(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      type: "rotate",
+                      from: `0 ${g.cx} ${g.cy}`,
+                      to: `${g.dir * 360} ${g.cx} ${g.cy}`,
+                      dur: `${duration * g.dm}s`,
+                      repeatCount: "indefinite"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }),
+                  /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })
+                ] }, `gear${i}`)),
+                animate && steamPuffs.map((sp, i) => /* @__PURE__ */ jsxs(
+                  "circle",
+                  {
+                    cx: sp.cx,
+                    cy: sp.cy,
+                    r: sp.r,
+                    fill: steamColor,
+                    opacity: 0,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0;0.45;0",
+                          dur: "2.4s",
+                          begin: `${i * 0.7}s`,
+                          repeatCount: "indefinite"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "cy",
+                          values: `${sp.cy};${sp.cy - 12}`,
+                          dur: "2.4s",
+                          begin: `${i * 0.7}s`,
+                          repeatCount: "indefinite"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${sp.r};${sp.r * 2.2}`,
+                          dur: "2.4s",
+                          begin: `${i * 0.7}s`,
+                          repeatCount: "indefinite"
+                        }
+                      )
+                    ]
+                  },
+                  `stm${i}`
+                ))
+              ]
+            }
+          )
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconSteampunk" }
@@ -1110,13 +1146,15 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 2,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       crystalColor = "#bae6fd",
       glowColor = "#38bdf8",
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 2;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const glowFilterId = `ntd_frost_${uid}`;
       const crystalDefs = [
@@ -1173,124 +1211,127 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
         { cx: 14, cy: 96, r: 1 },
         { cx: 86, cy: 96, r: 1.1 }
       ];
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: glowFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: "50",
-                  cy: "50",
-                  r: "30",
-                  fill: glowColor,
-                  opacity: 0.07,
-                  filter: `url(#${glowFilterId})`,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "opacity",
-                      values: "0.04;0.11;0.04",
-                      dur: "4s",
-                      repeatCount: "indefinite"
-                    }
-                  )
-                }
-              ),
-              allArms.map((arm, i) => /* @__PURE__ */ jsx(
-                "line",
-                {
-                  x1: arm.x1,
-                  y1: arm.y1,
-                  x2: arm.x2,
-                  y2: arm.y2,
-                  stroke: crystalColor,
-                  strokeWidth: "0.9",
-                  strokeLinecap: "round",
-                  opacity: animate ? 0 : 0.7,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "opacity",
-                      from: "0",
-                      to: "0.7",
-                      dur: `${duration * 0.4}s`,
-                      begin: `${arm.delay.toFixed(2)}s`,
-                      fill: "freeze"
-                    }
-                  )
-                },
-                `arm${i}`
-              )),
-              allTicks.map((tick, i) => /* @__PURE__ */ jsx(
-                "line",
-                {
-                  x1: tick.x1,
-                  y1: tick.y1,
-                  x2: tick.x2,
-                  y2: tick.y2,
-                  stroke: crystalColor,
-                  strokeWidth: "0.6",
-                  strokeLinecap: "round",
-                  opacity: animate ? 0 : 0.45,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "opacity",
-                      from: "0",
-                      to: "0.45",
-                      dur: `${duration * 0.3}s`,
-                      begin: `${tick.delay.toFixed(2)}s`,
-                      fill: "freeze"
-                    }
-                  )
-                },
-                `tick${i}`
-              )),
-              sparkles.slice(0, intensity === "subtle" ? 4 : 8).map((sp, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: sp.cx,
-                  cy: sp.cy,
-                  r: sp.r,
-                  fill: glowColor,
-                  opacity: animate ? 0 : 0.8,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: glowFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "50",
+                    cy: "50",
+                    r: "30",
+                    fill: glowColor,
+                    opacity: 0.07,
+                    filter: `url(#${glowFilterId})`,
+                    children: animate && /* @__PURE__ */ jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        values: "0.04;0.11;0.04",
+                        dur: "4s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                ),
+                allArms.map((arm, i) => /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: arm.x1,
+                    y1: arm.y1,
+                    x2: arm.x2,
+                    y2: arm.y2,
+                    stroke: crystalColor,
+                    strokeWidth: "0.9",
+                    strokeLinecap: "round",
+                    opacity: animate ? 0 : 0.7,
+                    children: animate && /* @__PURE__ */ jsx(
                       "animate",
                       {
                         attributeName: "opacity",
                         from: "0",
-                        to: "0.8",
-                        dur: "0.35s",
-                        begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`,
+                        to: "0.7",
+                        dur: `${duration * 0.4}s`,
+                        begin: `${arm.delay.toFixed(2)}s`,
                         fill: "freeze"
                       }
-                    ),
-                    /* @__PURE__ */ jsx(
+                    )
+                  },
+                  `arm${i}`
+                )),
+                allTicks.map((tick, i) => /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: tick.x1,
+                    y1: tick.y1,
+                    x2: tick.x2,
+                    y2: tick.y2,
+                    stroke: crystalColor,
+                    strokeWidth: "0.6",
+                    strokeLinecap: "round",
+                    opacity: animate ? 0 : 0.45,
+                    children: animate && /* @__PURE__ */ jsx(
                       "animate",
                       {
                         attributeName: "opacity",
-                        values: "0.3;1;0.3",
-                        dur: `${1 + i * 0.2}s`,
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
+                        from: "0",
+                        to: "0.45",
+                        dur: `${duration * 0.3}s`,
+                        begin: `${tick.delay.toFixed(2)}s`,
+                        fill: "freeze"
                       }
                     )
-                  ] })
-                },
-                `fsp${i}`
-              ))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
-      ] });
+                  },
+                  `tick${i}`
+                )),
+                sparkles.slice(0, intensity === "subtle" ? 4 : 8).map((sp, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sp.cx,
+                    cy: sp.cy,
+                    r: sp.r,
+                    fill: glowColor,
+                    opacity: animate ? 0 : 0.8,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.8",
+                          dur: "0.35s",
+                          begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0.3;1;0.3",
+                          dur: `${1 + i * 0.2}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `fsp${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconFrost" }
@@ -1300,7 +1341,8 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 0.5,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       pixelColor = "#22d3ee",
       scanlineColor = "#000000",
@@ -1308,6 +1350,7 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 0.5;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const scanAnimName = `ntd_pixel_scan_${uid}`;
       const glitchAnimName = `ntd_pixel_glitch_${uid}`;
@@ -1345,8 +1388,9 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
         { x: 48, y: 96 }
       ] : [];
       const allPixels = intensity === "subtle" ? basePixels.filter((_, i) => i % 2 === 0) : [...basePixels, ...extraPixels];
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        animate && /* @__PURE__ */ jsx("style", { children: `
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          animate && /* @__PURE__ */ jsx("style", { children: `
             @keyframes ${scanAnimName} {
               from { transform: translateY(-100%); }
               to   { transform: translateY(200%);  }
@@ -1358,74 +1402,76 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
               96%  { transform: translate(-1px, 2px); clip-path: none; }
             }
           ` }),
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-5%", width: "110%", height: "110%", zIndex: 2 },
-            "aria-hidden": true,
-            children: allPixels.map((p, i) => /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: p.x,
-                y: p.y,
-                width: SZ - 0.5,
-                height: SZ - 0.5,
-                fill: pixelColor,
-                opacity: 0.75,
-                children: animate && /* @__PURE__ */ jsx(
-                  "animate",
-                  {
-                    attributeName: "opacity",
-                    values: "0.3;1;0.3",
-                    dur: `${0.7 + i % 5 * 0.17}s`,
-                    repeatCount: "indefinite",
-                    begin: `${(i * 0.06 % 1).toFixed(2)}s`
-                  }
-                )
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-5%", width: "110%", height: "110%", zIndex: 2 },
+              "aria-hidden": true,
+              children: allPixels.map((p, i) => /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: p.x,
+                  y: p.y,
+                  width: SZ - 0.5,
+                  height: SZ - 0.5,
+                  fill: pixelColor,
+                  opacity: 0.75,
+                  children: animate && /* @__PURE__ */ jsx(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      values: "0.3;1;0.3",
+                      dur: `${0.7 + i % 5 * 0.17}s`,
+                      repeatCount: "indefinite",
+                      begin: `${(i * 0.06 % 1).toFixed(2)}s`
+                    }
+                  )
+                },
+                `px${i}`
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                position: "relative",
+                zIndex: 1,
+                ...animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}
               },
-              `px${i}`
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              display: "inline-flex",
-              position: "relative",
-              zIndex: 1,
-              ...animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}
-            },
-            children
-          }
-        ),
-        animate && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              overflow: "hidden",
-              pointerEvents: "none",
-              zIndex: 3,
-              background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`
-            },
-            children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  display: "block",
-                  width: "100%",
-                  height: "30%",
-                  background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
-                  animation: `${scanAnimName} ${duration + 2}s linear infinite`
+              children
+            }
+          ),
+          animate && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                overflow: "hidden",
+                pointerEvents: "none",
+                zIndex: 3,
+                background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    height: "30%",
+                    background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
+                    animation: `${scanAnimName} ${duration + 2}s linear infinite`
+                  }
                 }
-              }
-            )
-          }
-        )
-      ] });
+              )
+            }
+          )
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconPixel" }
@@ -1435,7 +1481,8 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 3,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       cellColor = "#86efac",
       membraneColor = "#4ade80",
@@ -1443,6 +1490,7 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 3;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const blobFilterId = `ntd_org_${uid}`;
       const cells = [
@@ -1472,125 +1520,128 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
         { cx: 60, cy: 95, r: 1.5 }
       ];
       const bubbleCount = intensity === "subtle" ? 2 : intensity === "dense" ? 6 : 4;
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: blobFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
-            "aria-hidden": true,
-            children: [
-              cells.map((c, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: c.cx,
-                  cy: c.cy,
-                  r: c.r,
-                  fill: c.color,
-                  opacity: animate ? 0 : c.op,
-                  filter: `url(#${blobFilterId})`,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        from: "0",
-                        to: `${c.op}`,
-                        dur: `${duration * 0.55}s`,
-                        begin: `${(i * 0.2).toFixed(2)}s`,
-                        fill: "freeze"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "r",
-                        values: `${c.r};${c.r * 1.3};${c.r}`,
-                        dur: c.pd,
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "opacity",
-                        values: `${c.op};${c.op * 1.7};${c.op}`,
-                        dur: c.pd,
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
-                    )
-                  ] })
-                },
-                `oc${i}`
-              )),
-              intensity !== "subtle" && [
-                { cx: 8, cy: 8, r: 10 },
-                { cx: 92, cy: 92, r: 10 }
-              ].map((ring, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: ring.cx,
-                  cy: ring.cy,
-                  r: ring.r,
-                  fill: "none",
-                  stroke: membraneColor,
-                  strokeWidth: "0.7",
-                  opacity: animate ? 0 : 0.35,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "opacity",
-                      from: "0",
-                      to: "0.35",
-                      dur: `${duration * 0.7}s`,
-                      fill: "freeze"
-                    }
-                  )
-                },
-                `ring${i}`
-              )),
-              bubbles.slice(0, bubbleCount).map((b, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: b.cx,
-                  cy: b.cy,
-                  r: b.r,
-                  fill: nucleusColor,
-                  opacity: animate ? 0 : 0.28,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: blobFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                cells.map((c, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: c.cx,
+                    cy: c.cy,
+                    r: c.r,
+                    fill: c.color,
+                    opacity: animate ? 0 : c.op,
+                    filter: `url(#${blobFilterId})`,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: `${c.op}`,
+                          dur: `${duration * 0.55}s`,
+                          begin: `${(i * 0.2).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${c.r};${c.r * 1.3};${c.r}`,
+                          dur: c.pd,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: `${c.op};${c.op * 1.7};${c.op}`,
+                          dur: c.pd,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `oc${i}`
+                )),
+                intensity !== "subtle" && [
+                  { cx: 8, cy: 8, r: 10 },
+                  { cx: 92, cy: 92, r: 10 }
+                ].map((ring, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: ring.cx,
+                    cy: ring.cy,
+                    r: ring.r,
+                    fill: "none",
+                    stroke: membraneColor,
+                    strokeWidth: "0.7",
+                    opacity: animate ? 0 : 0.35,
+                    children: animate && /* @__PURE__ */ jsx(
                       "animate",
                       {
                         attributeName: "opacity",
                         from: "0",
-                        to: "0.28",
-                        dur: "0.5s",
-                        begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`,
+                        to: "0.35",
+                        dur: `${duration * 0.7}s`,
                         fill: "freeze"
                       }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "animate",
-                      {
-                        attributeName: "cy",
-                        values: `${b.cy};${b.cy - 5};${b.cy}`,
-                        dur: `${2.2 + i * 0.45}s`,
-                        repeatCount: "indefinite",
-                        begin: `${duration}s`
-                      }
                     )
-                  ] })
-                },
-                `ob${i}`
-              ))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
-      ] });
+                  },
+                  `ring${i}`
+                )),
+                bubbles.slice(0, bubbleCount).map((b, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: b.cx,
+                    cy: b.cy,
+                    r: b.r,
+                    fill: nucleusColor,
+                    opacity: animate ? 0 : 0.28,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.28",
+                          dur: "0.5s",
+                          begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "cy",
+                          values: `${b.cy};${b.cy - 5};${b.cy}`,
+                          dur: `${2.2 + i * 0.45}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `ob${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconOrganic" }
@@ -1600,7 +1651,8 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
     ({
       children,
       animate = true,
-      duration = 8,
+      duration: durationProp,
+      animationSpeed,
       intensity = "normal",
       primaryColor = "#6366f1",
       secondaryColor = "#8b5cf6",
@@ -1608,6 +1660,7 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const duration = durationProp ?? 8;
       const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
         const a = (i * 120 - 90 + rotDeg) * Math.PI / 180;
         return `${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`;
@@ -1639,99 +1692,102 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
-      return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
-            "aria-hidden": true,
-            children: [
-              rings.map((ring, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: "50",
-                  cy: "50",
-                  r: ring.r,
-                  fill: "none",
-                  stroke: ring.color,
-                  strokeWidth: "0.6",
-                  strokeDasharray: ring.dash,
-                  opacity: ring.op,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animateTransform",
-                    {
-                      attributeName: "transform",
-                      type: "rotate",
-                      from: "0 50 50",
-                      to: `${ring.dir * 360} 50 50`,
-                      dur: `${ring.dur}s`,
-                      repeatCount: "indefinite"
-                    }
-                  )
-                },
-                `rng${i}`
-              )),
-              triangles.map((t, i) => /* @__PURE__ */ jsx(
-                "polygon",
-                {
-                  points: makeTriangle(50, 50, t.r, t.rot),
-                  fill: "none",
-                  stroke: t.color,
-                  strokeWidth: "0.5",
-                  opacity: t.op,
-                  children: animate && /* @__PURE__ */ jsx(
-                    "animateTransform",
-                    {
-                      attributeName: "transform",
-                      type: "rotate",
-                      from: "0 50 50",
-                      to: `${t.dir * 360} 50 50`,
-                      dur: `${t.dur}s`,
-                      repeatCount: "indefinite"
-                    }
-                  )
-                },
-                `tri${i}`
-              )),
-              diamonds.map((d, i) => /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: diamondPath(d.cx, d.cy),
-                  fill: accentColor,
-                  opacity: animate ? 0 : 0.5,
-                  children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      "animate",
+      return retimeTree(
+        /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                rings.map((ring, i) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "50",
+                    cy: "50",
+                    r: ring.r,
+                    fill: "none",
+                    stroke: ring.color,
+                    strokeWidth: "0.6",
+                    strokeDasharray: ring.dash,
+                    opacity: ring.op,
+                    children: animate && /* @__PURE__ */ jsx(
+                      "animateTransform",
                       {
-                        attributeName: "opacity",
-                        from: "0",
-                        to: "0.5",
-                        dur: `${duration * 0.25}s`,
-                        begin: `${(i * 0.09).toFixed(2)}s`,
-                        fill: "freeze"
+                        attributeName: "transform",
+                        type: "rotate",
+                        from: "0 50 50",
+                        to: `${ring.dir * 360} 50 50`,
+                        dur: `${ring.dur}s`,
+                        repeatCount: "indefinite"
                       }
-                    ),
-                    /* @__PURE__ */ jsx(
+                    )
+                  },
+                  `rng${i}`
+                )),
+                triangles.map((t, i) => /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: makeTriangle(50, 50, t.r, t.rot),
+                    fill: "none",
+                    stroke: t.color,
+                    strokeWidth: "0.5",
+                    opacity: t.op,
+                    children: animate && /* @__PURE__ */ jsx(
                       "animateTransform",
                       {
                         attributeName: "transform",
                         type: "rotate",
-                        from: `0 ${d.cx} ${d.cy}`,
-                        to: `360 ${d.cx} ${d.cy}`,
-                        dur: `${3 + i * 0.6}s`,
+                        from: "0 50 50",
+                        to: `${t.dir * 360} 50 50`,
+                        dur: `${t.dur}s`,
                         repeatCount: "indefinite"
                       }
                     )
-                  ] })
-                },
-                `dm${i}`
-              ))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
-      ] });
+                  },
+                  `tri${i}`
+                )),
+                diamonds.map((d, i) => /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: diamondPath(d.cx, d.cy),
+                    fill: accentColor,
+                    opacity: animate ? 0 : 0.5,
+                    children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.5",
+                          dur: `${duration * 0.25}s`,
+                          begin: `${(i * 0.09).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "animateTransform",
+                        {
+                          attributeName: "transform",
+                          type: "rotate",
+                          from: `0 ${d.cx} ${d.cy}`,
+                          to: `360 ${d.cx} ${d.cy}`,
+                          dur: `${3 + i * 0.6}s`,
+                          repeatCount: "indefinite"
+                        }
+                      )
+                    ] })
+                  },
+                  `dm${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
+        ] }),
+        durationScale(durationProp !== void 0, animationSpeed)
+      );
     }
   ),
   { displayName: "NtdIconGeometric" }