docs: animated SVG demo with gradient background and macOS chrome

sunilp · sunilp · commit 3f01ae8d08c9 · 2026-03-22T11:12:57.000+05:30
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ AI-powered agentic execution. 978 tests. Zero vendor lock-in.
 </div>
 
 <div align="center">
-  <img src="docs/assets/demo.gif" alt="jam CLI demo — trace, git wtf, agent" width="720">
+  <img src="docs/assets/demo.svg" alt="jam CLI — trace, git wtf, agent" width="720">
 </div>
 
 ---
diff --git a/docs/assets/demo.svg b/docs/assets/demo.svg
@@ -1,70 +1,89 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="560" viewBox="0 0 800 560">
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520">
   <defs>
     <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
-      <stop offset="50%" style="stop-color:#764ba2;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#f093fb;stop-opacity:1" />
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="50%" style="stop-color:#764ba2"/>
+      <stop offset="100%" style="stop-color:#f093fb"/>
     </linearGradient>
-    <filter id="shadow" x="-4%" y="-4%" width="108%" height="108%">
-      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.3"/>
+    <filter id="shadow">
+      <feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#000" flood-opacity="0.35"/>
     </filter>
+    <style>
+      .scene { opacity: 0; }
+      .scene1 { animation: fade1 18s infinite; }
+      .scene2 { animation: fade2 18s infinite; }
+      .scene3 { animation: fade3 18s infinite; }
+      @keyframes fade1 { 0%,3% { opacity:0 } 5%,30% { opacity:1 } 32%,100% { opacity:0 } }
+      @keyframes fade2 { 0%,33% { opacity:0 } 36%,63% { opacity:1 } 66%,100% { opacity:0 } }
+      @keyframes fade3 { 0%,66% { opacity:0 } 69%,95% { opacity:1 } 98%,100% { opacity:0 } }
+      .cursor { animation: blink 1s step-end infinite; }
+      @keyframes blink { 0%,50% { opacity:1 } 51%,100% { opacity:0 } }
+    </style>
   </defs>
 
   <!-- Background gradient -->
-  <rect width="800" height="560" rx="0" fill="url(#bg)"/>
+  <rect width="800" height="520" fill="url(#bg)"/>
 
   <!-- Terminal window -->
-  <rect x="32" y="28" width="736" height="504" rx="10" fill="#1e1e2e" filter="url(#shadow)"/>
-
+  <rect x="28" y="24" width="744" height="472" rx="10" fill="#1e1e2e" filter="url(#shadow)"/>
   <!-- Title bar -->
-  <rect x="32" y="28" width="736" height="36" rx="10" fill="#313244"/>
-  <rect x="32" y="54" width="736" height="10" fill="#313244"/>
-
+  <rect x="28" y="24" width="744" height="36" rx="10" fill="#313244"/>
+  <rect x="28" y="50" width="744" height="10" fill="#313244"/>
   <!-- Traffic lights -->
-  <circle cx="56" cy="46" r="6" fill="#f38ba8"/>
-  <circle cx="76" cy="46" r="6" fill="#f9e2af"/>
-  <circle cx="96" cy="46" r="6" fill="#a6e3a1"/>
-
-  <!-- Title text -->
-  <text x="400" y="51" text-anchor="middle" font-family="SF Mono, Menlo, monospace" font-size="12" fill="#cdd6f4">~/my-project</text>
-
-  <!-- Terminal content -->
-  <g font-family="SF Mono, Menlo, Consolas, monospace" font-size="13" fill="#cdd6f4">
-
-    <!-- Command -->
-    <text x="52" y="88"><tspan fill="#a6e3a1">$</tspan> jam trace updateBalance <tspan fill="#6c7086">--impact</tspan></text>
-
-    <!-- Section header -->
-    <text x="52" y="120" font-weight="bold" fill="#89b4fa">Impact Analysis for updateBalance</text>
-    <text x="52" y="138" fill="#585b70">═══════════════════════════════════════</text>
+  <circle cx="52" cy="42" r="6" fill="#f38ba8"/>
+  <circle cx="72" cy="42" r="6" fill="#f9e2af"/>
+  <circle cx="92" cy="42" r="6" fill="#a6e3a1"/>
+  <text x="400" y="47" text-anchor="middle" font-family="SF Mono,Menlo,monospace" font-size="12" fill="#a6adc8">~/my-project</text>
 
-    <!-- Direct callers -->
-    <text x="52" y="166">Direct callers:</text>
-    <text x="52" y="186">  → PaymentService.processRefund() <tspan fill="#585b70">[Java]</tspan> <tspan fill="#585b70">(line 142)</tspan></text>
-    <text x="52" y="206">  → BATCH_NIGHTLY_RECONCILE <tspan fill="#585b70">[SQL]</tspan> <tspan fill="#585b70">(line 34)</tspan></text>
-
-    <!-- Column dependents -->
-    <text x="52" y="236">Column dependents:</text>
-    <text x="52" y="256">  → VIEW v_customer_summary <tspan fill="#585b70">(reads customer.balance)</tspan></text>
-    <text x="52" y="276">  → PROC_MONTHLY_STATEMENT <tspan fill="#585b70">(reads customer.balance)</tspan></text>
-
-    <!-- Trigger chain -->
-    <text x="52" y="306">Trigger chain:</text>
-    <text x="52" y="326">  → TRG_CUSTOMER_AUDIT fires on UPDATE customer</text>
-
-    <!-- Risk -->
-    <text x="52" y="356">Risk: <tspan fill="#f9e2af" font-weight="bold">HIGH</tspan> — 2 callers across 2 languages, 2 column dependents</text>
-
-    <!-- Separator -->
-    <text x="52" y="386" fill="#585b70">───────────────────────────────────────────────────────</text>
+  <!-- SCENE 1: jam trace --impact -->
+  <g class="scene scene1" font-family="SF Mono,Menlo,Consolas,monospace" font-size="12.5" fill="#cdd6f4">
+    <text x="48" y="82"><tspan fill="#a6e3a1">$</tspan> jam trace updateBalance <tspan fill="#6c7086">--impact</tspan></text>
+    <text x="48" y="112" font-weight="bold" fill="#89b4fa">Impact Analysis for updateBalance</text>
+    <text x="48" y="128" fill="#585b70">═══════════════════════════════════════</text>
+    <text x="48" y="154">Direct callers:</text>
+    <text x="48" y="172">  → PaymentService.processRefund() <tspan fill="#6c7086">[Java]</tspan> <tspan fill="#6c7086">(line 142)</tspan></text>
+    <text x="48" y="190">  → BATCH_NIGHTLY_RECONCILE <tspan fill="#6c7086">[SQL]</tspan> <tspan fill="#6c7086">(line 34)</tspan></text>
+    <text x="48" y="218">Column dependents:</text>
+    <text x="48" y="236">  → VIEW v_customer_summary <tspan fill="#6c7086">(reads customer.balance)</tspan></text>
+    <text x="48" y="254">  → PROC_MONTHLY_STATEMENT <tspan fill="#6c7086">(reads customer.balance)</tspan></text>
+    <text x="48" y="282">Trigger chain:</text>
+    <text x="48" y="300">  → TRG_CUSTOMER_AUDIT fires on UPDATE customer</text>
+    <text x="48" y="328">Risk: <tspan fill="#f9e2af" font-weight="bold">HIGH</tspan> — 2 callers across 2 languages, 2 column dependents</text>
+    <text x="48" y="370" fill="#585b70">───────────────────────────────────────────────────</text>
+    <text x="48" y="394"><tspan fill="#a6e3a1">$</tspan> <tspan class="cursor" fill="#cdd6f4">▊</tspan></text>
+  </g>
 
-    <!-- Second command -->
-    <text x="52" y="416"><tspan fill="#a6e3a1">$</tspan> jam git wtf</text>
-    <text x="52" y="444"><tspan font-weight="bold">Branch:</tspan>  feat/auth-refactor <tspan fill="#585b70">(4 ahead of main)</tspan></text>
-    <text x="52" y="464"><tspan font-weight="bold">Staged:</tspan>  3 files — src/auth/*.ts</text>
-    <text x="52" y="484"><tspan fill="#a6e3a1" font-weight="bold">Suggestion:</tspan> Commit staged files, then rebase onto main.</text>
+  <!-- SCENE 2: jam git wtf -->
+  <g class="scene scene2" font-family="SF Mono,Menlo,Consolas,monospace" font-size="12.5" fill="#cdd6f4">
+    <text x="48" y="82"><tspan fill="#a6e3a1">$</tspan> jam git wtf</text>
+    <text x="48" y="112" font-weight="bold" fill="#89b4fa">Git Status — Explained</text>
+    <text x="48" y="128" fill="#585b70">───────────────────────────────────</text>
+    <text x="48" y="154"><tspan font-weight="bold">Branch:</tspan>  feat/auth-refactor <tspan fill="#6c7086">(4 ahead of main)</tspan></text>
+    <text x="48" y="172"><tspan font-weight="bold">Staged:</tspan>  3 files — src/auth/*.ts</text>
+    <text x="48" y="190"><tspan font-weight="bold">Modified:</tspan> 1 file — package.json</text>
+    <text x="48" y="208"><tspan font-weight="bold">Stash:</tspan>   1 entry</text>
+    <text x="48" y="244"><tspan fill="#a6e3a1" font-weight="bold">Suggestion:</tspan> Your auth refactor looks ready.</text>
+    <text x="48" y="262">Commit the staged files, then rebase onto main.</text>
+    <text x="48" y="310" fill="#585b70">───────────────────────────────────────────────────</text>
+    <text x="48" y="334"><tspan fill="#a6e3a1">$</tspan> <tspan class="cursor" fill="#cdd6f4">▊</tspan></text>
+  </g>
 
-    <!-- Prompt -->
-    <text x="52" y="514"><tspan fill="#a6e3a1">$</tspan> <tspan fill="#585b70">▊</tspan></text>
+  <!-- SCENE 3: jam run -->
+  <g class="scene scene3" font-family="SF Mono,Menlo,Consolas,monospace" font-size="12.5" fill="#cdd6f4">
+    <text x="48" y="82"><tspan fill="#a6e3a1">$</tspan> jam run 'add input validation' <tspan fill="#6c7086">--yes</tspan></text>
+    <text x="48" y="112">Provider: <tspan fill="#89dceb">copilot</tspan>, Model: <tspan fill="#89dceb">default</tspan></text>
+    <text x="48" y="130"><tspan fill="#585b70">───</tspan> <tspan fill="#cba6f7" font-weight="bold">Plan: Add validation</tspan> <tspan fill="#585b70">(3 subtasks) ───</tspan></text>
+    <text x="48" y="158"><tspan fill="#f9e2af">[Worker 1]</tspan> Reading src/api/users.ts</text>
+    <text x="48" y="176"><tspan fill="#89b4fa">[Worker 2]</tspan> Reading src/api/posts.ts</text>
+    <text x="48" y="194"><tspan fill="#f9e2af">[Worker 1]</tspan> Added Zod validation to createUser</text>
+    <text x="48" y="212"><tspan fill="#89b4fa">[Worker 2]</tspan> Added Zod validation to createPost</text>
+    <text x="48" y="230"><tspan fill="#a6e3a1">[Worker 3]</tspan> Writing tests...</text>
+    <text x="48" y="258"><tspan fill="#f9e2af">[Worker 1]</tspan> <tspan fill="#a6e3a1">✓ Done</tspan></text>
+    <text x="48" y="276"><tspan fill="#89b4fa">[Worker 2]</tspan> <tspan fill="#a6e3a1">✓ Done</tspan></text>
+    <text x="48" y="294"><tspan fill="#a6e3a1">[Worker 3]</tspan> <tspan fill="#a6e3a1">✓ Done</tspan> — 6/6 tests pass</text>
+    <text x="48" y="322" fill="#585b70">[3/3 complete | 2,400 tokens]</text>
+    <text x="48" y="350" fill="#a6e3a1">Task complete.</text>
+    <text x="48" y="388" fill="#585b70">───────────────────────────────────────────────────</text>
+    <text x="48" y="412"><tspan fill="#a6e3a1">$</tspan> <tspan class="cursor" fill="#cdd6f4">▊</tspan></text>
   </g>
 </svg>
