From 5a88bceec74fef1ef8fdc7a7555f911ba376aac2 Mon Sep 17 00:00:00 2001
From: Diego Rodrigues de Sa e Souza <diegosouza.pw@gmail.com>
Date: Sun, 19 Jul 2026 04:31:59 -0300
Subject: [PATCH] =?UTF-8?q?docs(diagrams):=20pause-safe=20animation=20cycl?=
 =?UTF-8?q?es=20=E2=80=94=20first=20frame=20is=20the=20finished=20composit?=
 =?UTF-8?q?ion=20(Chrome=20pause-animated-images=20freezes=20SVG=20imgs=20?=
 =?UTF-8?q?at=20t=3D0,=20where=20animation=20values=20override=20static=20?=
 =?UTF-8?q?attrs);=20hero/promise=20drop=20entrance=20reveals,=20budget=20?=
 =?UTF-8?q?bar/strike/dot=20cycles=20start=20at=20rest=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/diagrams/free-tier-budget.svg |  8 ++++----
 docs/diagrams/promise-pillars.svg  | 16 ----------------
 docs/diagrams/readme-hero.svg      | 17 -----------------
 3 files changed, 4 insertions(+), 37 deletions(-)

diff --git a/docs/diagrams/free-tier-budget.svg b/docs/diagrams/free-tier-budget.svg
index 3236d4fb08..89b7d23d1c 100644
--- a/docs/diagrams/free-tier-budget.svg
+++ b/docs/diagrams/free-tier-budget.svg
@@ -22,7 +22,7 @@
     <clipPath id="barShapeF"><rect x="60" y="372" width="1080" height="18" rx="9"/></clipPath>
     <clipPath id="barRevF">
       <rect x="60" y="372" width="0" height="18">
-        <animate attributeName="width" values="0;1080;1080" keyTimes="0;0.22;1" dur="10s" repeatCount="indefinite"/>
+        <animate attributeName="width" values="1080;0;1080;1080" keyTimes="0;0.02;0.24;1" dur="10s" repeatCount="indefinite"/>
       </rect>
     </clipPath>
   </defs>
@@ -70,7 +70,7 @@
   <text x="704" y="116" font-family="Consolas, 'Courier New', monospace" font-size="10.5" letter-spacing="2.5" font-weight="700" fill="#a78bfa">THE HONEST MATH</text>
   <text x="704" y="172" font-family="Consolas, 'Courier New', monospace" font-size="34" font-weight="800" fill="#71717a">~10B</text>
   <line x1="698" y1="161" x2="810" y2="161" stroke="#ef4444" stroke-width="3" stroke-linecap="round" stroke-dasharray="112" stroke-dashoffset="112">
-    <animate attributeName="stroke-dashoffset" values="112;112;0;0" keyTimes="0;0.10;0.18;1" dur="10s" repeatCount="indefinite"/>
+    <animate attributeName="stroke-dashoffset" values="0;112;0;0" keyTimes="0;0.10;0.18;1" dur="10s" repeatCount="indefinite"/>
   </line>
   <text x="836" y="156" font-family="Consolas, 'Courier New', monospace" font-size="11.5" fill="#a1a1aa">every rate limit &#183; 24/7</text>
   <text x="836" y="176" font-family="Consolas, 'Courier New', monospace" font-size="11.5" fill="#ef4444" opacity="0.85">we don't publish that</text>
@@ -108,8 +108,8 @@
     </g>
   </g>
   <circle r="3.2" fill="#F7F6FC">
-    <animateMotion path="M 60,381 L 1140,381" keyPoints="0;1;1" keyTimes="0;0.22;1" calcMode="linear" dur="10s" repeatCount="indefinite"/>
-    <animate attributeName="opacity" values="1;1;0;0" keyTimes="0;0.21;0.24;1" dur="10s" repeatCount="indefinite"/>
+    <animateMotion path="M 60,381 L 1140,381" keyPoints="0;0;1;1" keyTimes="0;0.02;0.24;1" calcMode="linear" dur="10s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;0.02;0.23;0.26;1" dur="10s" repeatCount="indefinite"/>
   </circle>
   <text x="60" y="416" font-family="Consolas, 'Courier New', monospace" font-size="11.5" fill="#71717a">each segment = one free pool &#183; widths floored so every provider shows &#183; honest numbers below</text>
 
diff --git a/docs/diagrams/promise-pillars.svg b/docs/diagrams/promise-pillars.svg
index 820a7aa863..b8dde69c1a 100644
--- a/docs/diagrams/promise-pillars.svg
+++ b/docs/diagrams/promise-pillars.svg
@@ -23,13 +23,10 @@
 
   <!-- header -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.167;1" begin="0s" dur="0.6s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <text x="40" y="58" font-family="Consolas, 'Courier New', monospace" font-size="13" letter-spacing="2.5" fill="#a78bfa">THE PROMISE</text>
     <line x1="150" y1="53" x2="1160" y2="53" stroke="#232b38" stroke-width="1.5"/>
   </g>
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.333;1" begin="0s" dur="0.8999999999999999s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-    <animateTransform attributeName="transform" type="translate" values="0 10;0 10;0 0" keyTimes="0;0.333;1" begin="0s" dur="0.8999999999999999s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <text x="40" y="100" font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" font-size="23" font-weight="600" fill="#c9d1d9">One endpoint. <tspan fill="#a78bfa" font-weight="800">268 providers.</tspan> Never stop building — OmniRoute picks <tspan fill="#7ee787" font-weight="700">the cheapest one that works</tspan>.</text>
   </g>
 
@@ -37,8 +34,6 @@
 
     <!-- cell 1: never hit limits (blue) -->
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.524;1" begin="0s" dur="1.05s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-      <animateTransform attributeName="transform" type="translate" values="0 12;0 12;0 0" keyTimes="0;0.524;1" begin="0s" dur="1.05s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="40" y="130" width="360" height="164" rx="14" fill="#161c28" stroke="#232b38" stroke-width="1.5"/>
       <rect x="40" y="130" width="360" height="164" rx="14" fill="none" stroke="#74b9ff" stroke-width="1.5" opacity="0">
         <animate attributeName="opacity" values="0;0.9;0;0" keyTimes="0;0.055;0.12;1" dur="12s" begin="3s" repeatCount="indefinite"/>
@@ -56,8 +51,6 @@
 
     <!-- cell 2: save tokens (orange) -->
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.573;1" begin="0s" dur="1.17s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-      <animateTransform attributeName="transform" type="translate" values="0 12;0 12;0 0" keyTimes="0;0.573;1" begin="0s" dur="1.17s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="420" y="130" width="360" height="164" rx="14" fill="#161c28" stroke="#232b38" stroke-width="1.5"/>
       <rect x="420" y="130" width="360" height="164" rx="14" fill="none" stroke="#e17055" stroke-width="1.5" opacity="0">
         <animate attributeName="opacity" values="0;0;0.9;0;0" keyTimes="0;0.167;0.222;0.287;1" dur="12s" begin="3s" repeatCount="indefinite"/>
@@ -76,8 +69,6 @@
 
     <!-- cell 3: $0 to start (gold) -->
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.612;1" begin="0s" dur="1.29s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-      <animateTransform attributeName="transform" type="translate" values="0 12;0 12;0 0" keyTimes="0;0.612;1" begin="0s" dur="1.29s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="800" y="130" width="360" height="164" rx="14" fill="#161c28" stroke="#232b38" stroke-width="1.5"/>
       <rect x="800" y="130" width="360" height="164" rx="14" fill="none" stroke="#fdcb6e" stroke-width="1.5" opacity="0">
         <animate attributeName="opacity" values="0;0;0.9;0;0" keyTimes="0;0.334;0.389;0.454;1" dur="12s" begin="3s" repeatCount="indefinite"/>
@@ -95,8 +86,6 @@
 
     <!-- cell 4: every tool works (violet) -->
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.645;1" begin="0s" dur="1.4100000000000001s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-      <animateTransform attributeName="transform" type="translate" values="0 12;0 12;0 0" keyTimes="0;0.645;1" begin="0s" dur="1.4100000000000001s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="40" y="314" width="360" height="164" rx="14" fill="#161c28" stroke="#232b38" stroke-width="1.5"/>
       <rect x="40" y="314" width="360" height="164" rx="14" fill="none" stroke="#a78bfa" stroke-width="1.5" opacity="0">
         <animate attributeName="opacity" values="0;0;0.9;0;0" keyTimes="0;0.5;0.555;0.62;1" dur="12s" begin="3s" repeatCount="indefinite"/>
@@ -115,8 +104,6 @@
 
     <!-- cell 5: one endpoint (cyan) -->
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.673;1" begin="0s" dur="1.53s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-      <animateTransform attributeName="transform" type="translate" values="0 12;0 12;0 0" keyTimes="0;0.673;1" begin="0s" dur="1.53s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="420" y="314" width="360" height="164" rx="14" fill="#161c28" stroke="#232b38" stroke-width="1.5"/>
       <rect x="420" y="314" width="360" height="164" rx="14" fill="none" stroke="#00cec9" stroke-width="1.5" opacity="0">
         <animate attributeName="opacity" values="0;0;0.9;0;0" keyTimes="0;0.667;0.722;0.787;1" dur="12s" begin="3s" repeatCount="indefinite"/>
@@ -134,8 +121,6 @@
 
     <!-- cell 6: production-grade (green) -->
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.697;1" begin="0s" dur="1.65s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-      <animateTransform attributeName="transform" type="translate" values="0 12;0 12;0 0" keyTimes="0;0.697;1" begin="0s" dur="1.65s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="800" y="314" width="360" height="164" rx="14" fill="#161c28" stroke="#232b38" stroke-width="1.5"/>
       <rect x="800" y="314" width="360" height="164" rx="14" fill="none" stroke="#7ee787" stroke-width="1.5" opacity="0">
         <animate attributeName="opacity" values="0;0;0.9;0;0" keyTimes="0;0.834;0.889;0.954;1" dur="12s" begin="3s" repeatCount="indefinite"/>
@@ -154,7 +139,6 @@
 
   <!-- footer -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.714;1" begin="0s" dur="2.1s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <text x="40" y="516" font-family="Consolas, 'Courier New', monospace" font-size="12" fill="#71717a">$ npm i -g omniroute&#160;&#160;·&#160;&#160;point your tool at http://localhost:20128/v1&#160;&#160;·&#160;&#160;$0</text>
     <text x="1160" y="516" text-anchor="end" font-family="Consolas, 'Courier New', monospace" font-size="12" letter-spacing="1.5" fill="#71717a">MIT · OPEN SOURCE</text>
   </g>
diff --git a/docs/diagrams/readme-hero.svg b/docs/diagrams/readme-hero.svg
index d54156a501..e5da53aa33 100644
--- a/docs/diagrams/readme-hero.svg
+++ b/docs/diagrams/readme-hero.svg
@@ -32,29 +32,22 @@
 
   <!-- kicker -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.167;1" begin="0s" dur="0.6s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <text x="48" y="66" font-family="Consolas, 'Courier New', monospace" font-size="13" letter-spacing="2.5" fill="#a78bfa">OMNIROUTE — THE FREE AI GATEWAY</text>
     <text x="1152" y="66" text-anchor="end" font-family="Consolas, 'Courier New', monospace" font-size="12" letter-spacing="1.5" fill="#71717a">ONE ENDPOINT · /v1</text>
   </g>
 
   <!-- tagline -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.294;1" begin="0s" dur="0.85s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-    <animateTransform attributeName="transform" type="translate" values="0 14;0 14;0 0" keyTimes="0;0.294;1" begin="0s" dur="0.85s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <text x="48" y="138" font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" font-size="60" font-weight="800" fill="#e9edf3">Never stop coding<tspan fill="#a855f7">.</tspan></text>
   </g>
 
   <!-- subheadline -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.455;1" begin="0s" dur="1.1s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-    <animateTransform attributeName="transform" type="translate" values="0 12;0 12;0 0" keyTimes="0;0.455;1" begin="0s" dur="1.1s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <text x="48" y="184" font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" font-size="25" font-weight="600" fill="#c9d1d9">Every AI tool → <tspan fill="#a78bfa" font-weight="800">268 providers</tspan> — <tspan fill="#7ee787" font-weight="800">90+ free</tspan> — through one endpoint.</text>
   </g>
 
   <!-- plug line -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.538;1" begin="0s" dur="1.2999999999999998s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-    <animateTransform attributeName="transform" type="translate" values="0 10;0 10;0 0" keyTimes="0;0.538;1" begin="0s" dur="1.2999999999999998s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <text x="48" y="222" font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" font-size="16.5" fill="#a1a1aa">Claude Code · Codex · Cursor · Cline · Copilot · Antigravity&#160;&#160;→&#160;&#160;<tspan fill="#7ee787" font-weight="700">FREE</tspan> Claude / GPT / Gemini · auto-fallback</text>
   </g>
 
@@ -69,7 +62,6 @@
 
   <!-- 1.6B stat block -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.588;1" begin="0s" dur="1.7s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <ellipse cx="200" cy="360" rx="230" ry="110" fill="url(#statGlowH)"/>
     <text x="48" y="392" font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" font-size="84" font-weight="800" fill="url(#gradTokenH)">~1.6B</text>
     <text x="340" y="336" font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" font-size="20" font-weight="700" fill="#e9edf3">documented free tokens / month</text>
@@ -80,8 +72,6 @@
 
   <!-- compression panel -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.676;1" begin="0s" dur="1.85s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
-    <animateTransform attributeName="transform" type="translate" values="0 10;0 10;0 0" keyTimes="0;0.676;1" begin="0s" dur="1.85s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <rect x="756" y="284" width="396" height="140" rx="14" fill="#1c2230" stroke="#232b38" stroke-width="1.5"/>
     <text x="780" y="314" font-family="Consolas, 'Courier New', monospace" font-size="11" letter-spacing="2" fill="#e17055">RTK + CAVEMAN · STACKED COMPRESSION</text>
     <text x="780" y="344" font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" font-size="22" font-weight="800" fill="#e9edf3">Save 15–95% tokens</text>
@@ -102,37 +92,31 @@
   <!-- stat chips -->
   <g font-family="Inter, 'Segoe UI', Arial, Helvetica, system-ui, sans-serif" text-anchor="middle">
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.769;1" begin="0s" dur="1.95s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="48" y="462" width="172" height="52" rx="12" fill="#1c2230" stroke="#6c5ce7" stroke-opacity="0.55" stroke-width="1.5"/>
       <text x="134" y="485" font-size="17" font-weight="800" fill="#a78bfa">268</text>
       <text x="134" y="504" font-size="11" fill="#a1a1aa">AI PROVIDERS</text>
     </g>
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.783;1" begin="0s" dur="2.0700000000000003s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="234" y="462" width="172" height="52" rx="12" fill="#1c2230" stroke="#22c55e" stroke-opacity="0.55" stroke-width="1.5"/>
       <text x="320" y="485" font-size="17" font-weight="800" fill="#7ee787">90+</text>
       <text x="320" y="504" font-size="11" fill="#a1a1aa">FREE TIERS</text>
     </g>
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.795;1" begin="0s" dur="2.19s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="420" y="462" width="172" height="52" rx="12" fill="#1c2230" stroke="#22c55e" stroke-opacity="0.55" stroke-width="1.5"/>
       <text x="506" y="485" font-size="17" font-weight="800" fill="#7ee787">~1.6B</text>
       <text x="506" y="504" font-size="11" fill="#a1a1aa">FREE TOKENS / MO</text>
     </g>
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.805;1" begin="0s" dur="2.31s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="606" y="462" width="172" height="52" rx="12" fill="#1c2230" stroke="#e17055" stroke-opacity="0.55" stroke-width="1.5"/>
       <text x="692" y="485" font-size="17" font-weight="800" fill="#e17055">15–95%</text>
       <text x="692" y="504" font-size="11" fill="#a1a1aa">TOKEN SAVINGS</text>
     </g>
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.815;1" begin="0s" dur="2.43s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="792" y="462" width="172" height="52" rx="12" fill="#1c2230" stroke="#0984e3" stroke-opacity="0.55" stroke-width="1.5"/>
       <text x="878" y="485" font-size="17" font-weight="800" fill="#74b9ff">18</text>
       <text x="878" y="504" font-size="11" fill="#a1a1aa">ROUTING STRATEGIES</text>
     </g>
     <g>
-      <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.824;1" begin="0s" dur="2.5500000000000003s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
       <rect x="978" y="462" width="174" height="52" rx="12" fill="#1c2230" stroke="#fdcb6e" stroke-opacity="0.55" stroke-width="1.5"/>
       <text x="1065" y="485" font-size="17" font-weight="800" fill="#fdcb6e">$0</text>
       <text x="1065" y="504" font-size="11" fill="#a1a1aa">TO START</text>
@@ -141,7 +125,6 @@
 
   <!-- star CTA -->
   <g>
-    <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.8;1" begin="0s" dur="3.0s" calcMode="spline" keySplines="0 0 1 1;0.16 1 0.3 1" fill="freeze"/>
     <g transform="translate(58,570)">
       <path d="M 0,-11 L 3.1,-3.6 L 11,-3.2 L 4.9,1.9 L 6.9,9.6 L 0,5.2 L -6.9,9.6 L -4.9,1.9 L -11,-3.2 L -3.1,-3.6 Z" fill="#fdcb6e">
         <animateTransform attributeName="transform" type="scale" values="1;1.22;1" keyTimes="0;0.5;1" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1;0.4 0 0.2 1"/>