pjandro/OmniRoute
1
0
Fork 0
mirror of https://github.com/diegosouzapw/OmniRoute.git synced 2026-08-16 20:22:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

docs(diagrams): pause-safe animation cycles — first frame is the finished composition (Chrome pause-animated-images freezes SVG imgs at t=0, where animation values override static attrs); hero/promise drop entrance reveals, budget bar/strike/dot cycles start at rest state

Browse Source
This commit is contained in:
Diego Rodrigues de Sa e Souza
2026-07-19 04:31:59 -03:00
parent 5770afa2b9
commit 5a88bceec7
3 changed files with 4 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/diagrams/free-tier-budget.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

16
docs/diagrams/promise-pillars.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 10 KiB

17
docs/diagrams/readme-hero.svg
View File

@@ -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"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB