feat(viz): interactive algorithm viz system

frontend/src/app/globals.css

@@ -61,6 +61,15 @@
   /* Badge colors - Optimal (green) */
   --badge-optimal: #16a34a;
   --badge-optimal-bg: #dcfce7;
+
+  /* Visualization colors */
+  --viz-default: #f3f4f6;
+  --viz-active: #3b82f6;
+  --viz-comparing: #f59e0b;
+  --viz-found: #22c55e;
+  --viz-visited: #9ca3af;
+  --viz-swapping: #8b5cf6;
+  --viz-transition: 300ms;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -125,6 +134,14 @@
     /* Badge colors - Optimal (green, dark mode) */
     --badge-optimal: #4ade80;
     --badge-optimal-bg: rgba(34, 197, 94, 0.2);
+
+    /* Visualization colors (dark mode) */
+    --viz-default: #374151;
+    --viz-active: #3b82f6;
+    --viz-comparing: #f59e0b;
+    --viz-found: #22c55e;
+    --viz-visited: #6b7280;
+    --viz-swapping: #8b5cf6;
   }
 }
 
@@ -139,3 +156,26 @@ body {
 .prose-content {
   line-height: 1.7;
 }
+
+/* Visualization element transitions */
+.viz-element {
+  transition:
+    background-color var(--viz-transition) ease,
+    transform var(--viz-transition) ease,
+    opacity var(--viz-transition) ease;
+}
+
+.viz-cell-bg {
+  transition:
+    fill var(--viz-transition) ease;
+}
+
+.viz-value {
+  transition:
+    fill var(--viz-transition) ease;
+}
+
+.viz-pointer {
+  transition:
+    transform var(--viz-transition) ease;
+}

frontend/src/app/patterns/[slug]/page.tsx

@@ -13,6 +13,7 @@ import {
   RecognitionSignals,
   RelatedPatterns,
 } from "@/components/patterns";
+import { PatternVisualization } from "@/components/visualization";
 
 interface PageProps {
   params: Promise<{ slug: string }>;
@@ -104,7 +105,19 @@ export default async function PatternDetailPage({ params }: PageProps) {
         </Card>
       )}
 
-      {/* Visualization - ASCII diagram walkthrough */}
+      {/* Interactive Visualization */}
+      {pattern.visualization_examples && pattern.visualization_examples.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Interactive Visualization</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <PatternVisualization examples={pattern.visualization_examples} />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Static Visualization - ASCII diagram walkthrough (fallback) */}
       {pattern.visualization && (
         <Card>
           <CardHeader>