docs: add banner + how-it-works SVG diagrams to README

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-04 00:28:12 +02:00
parent 2c1777ae4e
commit ee1932a534
3 changed files with 124 additions and 0 deletions
@@ -0,0 +1,44 @@
+<svg width="880" height="260" viewBox="0 0 880 260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ComfyUI-Tenaciousload — instant page loads for massive model and LoRA libraries">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0b0b0f"/>
+      <stop offset="1" stop-color="#1a1a22"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#60a5fa"/>
+      <stop offset="0.55" stop-color="#a78bfa"/>
+      <stop offset="1" stop-color="#ff9cf9"/>
+    </linearGradient>
+    <linearGradient id="bolt" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#bae6fd"/>
+      <stop offset="1" stop-color="#60a5fa"/>
+    </linearGradient>
+    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
+      <feGaussianBlur stdDeviation="5" result="b"/>
+      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+
+  <rect x="2" y="2" width="876" height="256" rx="26" fill="url(#bg)" stroke="#27272a" stroke-width="2"/>
+  <rect x="2" y="2" width="9" height="256" rx="4.5" fill="url(#accent)"/>
+
+  <!-- icon badge with lightning bolt (speed) -->
+  <g transform="translate(48,70)">
+    <rect width="120" height="120" rx="30" fill="#111118" stroke="url(#accent)" stroke-width="2.5"/>
+    <path d="M68 20 L42 66 L60 66 L50 102 L86 52 L64 52 Z" fill="url(#bolt)" filter="url(#glow)"/>
+  </g>
+
+  <!-- wordmark -->
+  <text x="208" y="84" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="19" letter-spacing="7" font-weight="600" fill="#71717a">COMFYUI</text>
+  <text x="205" y="150" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="58" font-weight="800" fill="url(#accent)">Tenaciousload</text>
+  <text x="208" y="187" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="19" fill="#a1a1aa">Instant page loads for massive model &amp; LoRA libraries.</text>
+
+  <!-- speed pills: before vs after -->
+  <g transform="translate(208,206)" font-family="Consolas, ui-monospace, monospace" font-size="15" font-weight="600">
+    <rect width="156" height="34" rx="17" fill="#1f1216" stroke="#7f1d1d" stroke-width="1.5"/>
+    <text x="20" y="22" fill="#fca5a5">cold build 234 s</text>
+    <text x="176" y="24" font-size="20" fill="#52525b">→</text>
+    <rect x="206" width="150" height="34" rx="17" fill="#0d1a13" stroke="#166534" stroke-width="1.5"/>
+    <text x="226" y="22" fill="#86efac">cached 4 ms</text>
+  </g>
+</svg>