From b39733dca921220870331a04d3e96d5c0d785822 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Sat, 28 Feb 2026 18:00:39 -0800
Subject: [PATCH] feat(ui): add AnimatedStream component

---
 .../routing_groups/AnimatedStream.tsx         | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/components/routing_groups/AnimatedStream.tsx

diff --git a/ui/litellm-dashboard/src/components/routing_groups/AnimatedStream.tsx b/ui/litellm-dashboard/src/components/routing_groups/AnimatedStream.tsx
new file mode 100644
index 00000000000..0154df3a48b
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/routing_groups/AnimatedStream.tsx
@@ -0,0 +1,48 @@
+"use client";
+import React from "react";
+
+interface AnimatedStreamProps {
+  /** SVG path d string */
+  path: string;
+  color: string;
+  /** stroke-width in px */
+  thickness: number;
+  animated?: boolean;
+}
+
+export default function AnimatedStream({ path, color, thickness, animated = true }: AnimatedStreamProps) {
+  const dashLen = Math.max(8, thickness * 3);
+  const gapLen = Math.max(4, thickness * 2);
+
+  return (
+    <g>
+      {/* Dim base */}
+      <path d={path} fill="none" stroke={color} strokeWidth={thickness} strokeOpacity={0.12} />
+      {/* Glow */}
+      <path d={path} fill="none" stroke={color} strokeWidth={thickness + 6} strokeOpacity={0.06} />
+      {/* Animated dashes */}
+      <path
+        d={path}
+        fill="none"
+        stroke={color}
+        strokeWidth={thickness}
+        strokeOpacity={0.7}
+        strokeDasharray={`${dashLen} ${gapLen}`}
+        style={
+          animated
+            ? {
+                animation: `routingFlow 0.9s linear infinite`,
+                strokeDashoffset: 0,
+              }
+            : undefined
+        }
+      />
+      <style>{`
+        @keyframes routingFlow {
+          from { stroke-dashoffset: ${dashLen + gapLen}; }
+          to   { stroke-dashoffset: 0; }
+        }
+      `}</style>
+    </g>
+  );
+}