docs: give Claude Code and Codex distinct 3D animated badges

README.md

@@ -13,8 +13,8 @@
 <a href="docs/harness-origins.md"><img src="docs/assets/readme/badges/first-commit.svg?v=uniform-20261017" width="300" height="76" alt="Claude Flow lineage: first commit June 2, 2025 by rUv; inspect the evidence"></a>
 <a href="data/npm-downloads.latest.json"><img src="docs/assets/readme/badges/downloads.svg?v=uniform-20261017" width="300" height="76" alt="Ecosystem npm downloads: 97,022,120 observed events across 399 packages, October 13, 2025 through October 12, 2026; verified October 17, 2026"></a>
 <br>
-<a href="https://github.com/ruvnet/claude-flow"><img src="docs/assets/readme/badges/claude.svg?v=uniform-20261017" width="300" height="76" alt="Claude Code plugin"></a>
-<a href="https://www.npmjs.com/package/@claude-flow/codex"><img src="docs/assets/readme/badges/codex.svg?v=uniform-20261017" width="300" height="76" alt="Codex plugin"></a>
+<a href="https://github.com/ruvnet/claude-flow"><img src="docs/assets/readme/badges/claude.svg?v=3d-coral-20261017" width="300" height="76" alt="Claude Code plugin"></a>
+<a href="https://www.npmjs.com/package/@claude-flow/codex"><img src="docs/assets/readme/badges/codex.svg?v=3d-cyan-20261017" width="300" height="76" alt="Codex plugin"></a>
 </p>
 
 </div>

docs/assets/readme/badges/claude.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="300" height="76" viewBox="0 0 300 76" role="img" aria-labelledby="t d"><title id="t">Claude Code PLUGIN</title><desc id="d">Claude Code: PLUGIN. Ruflo ecosystem link.</desc><style>text{font-family:Arial,Helvetica,sans-serif}.signal{stroke-dasharray:36 250;animation:travel 7s linear infinite}.icon{animation:glow 4s ease-in-out infinite}@keyframes travel{to{stroke-dashoffset:-572}}@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=".5" y=".5" width="299" height="75" rx="8" fill="#0b111d" stroke="#314151"/><path d="M50 12V64" stroke="#314151"/><g class="icon" transform="translate(25 38)" fill="none" stroke="#ffe338" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M0 -11V11M-11 0H11M-8 -8L8 8M-8 8L8 -8"/></g><text x="63" y="21" fill="#b5c4d8" font-size="10" font-weight="600" letter-spacing="1.1">CLAUDE CODE</text><text x="63" y="44" fill="#ffe338" font-size="19" font-weight="700">Ruflo plugin</text><text x="63" y="62" fill="#b5c4d8" font-size="10">Tools, console and mods</text><path d="M9 73H291" stroke="#ffe338" stroke-opacity=".15"/><path class="signal" d="M9 73H291" stroke="#ffe338" stroke-width="1.4"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="76" viewBox="0 0 300 76" role="img" aria-labelledby="t d"><title id="t">Claude Code integration</title><desc id="d">Claude Code integration badge with a rotating three dimensional octahedron in warm coral. Animation pauses to a readable static frame with reduced motion.</desc><defs><linearGradient id="bg" x2="1" y2="1"><stop stop-color="#231820"/><stop offset="1" stop-color="#0b111d"/></linearGradient><radialGradient id="halo"><stop stop-color="#ffae82" stop-opacity=".3"/><stop offset="1" stop-color="#ffae82" stop-opacity="0"/></radialGradient></defs><style>text{font-family:Arial,Helvetica,sans-serif}.frame{opacity:0;animation:frame 6s steps(1,end) infinite}.signal{stroke-dasharray:36 250;animation:travel 7s linear infinite}.halo{animation:breathe 4s ease-in-out infinite}@keyframes frame{0%{opacity:1}2.08333333%,100%{opacity:0}}@keyframes travel{to{stroke-dashoffset:-572}}@keyframes breathe{0%,100%{opacity:.3}50%{opacity:.7}}@media(prefers-reduced-motion:reduce){*{animation:none!important}.frame{opacity:0!important}.frame[data-frame="0"]{opacity:1!important}}</style><rect x=".5" y=".5" width="299" height="75" rx="8" fill="url(#bg)" stroke="#ffae82" stroke-opacity=".45"/><path d="M57 12V64" stroke="#ffae82" stroke-opacity=".22"/><circle class="halo" cx="28" cy="37" r="25" fill="url(#halo)"/><ellipse cx="28" cy="60" rx="17" ry="3" fill="#ffae82" opacity=".14"/><g class="frame" data-frame="0" style="animation-delay:-0.000s"><polygon points="42.00,37.00 28.00,25.10 28.00,41.21" fill="#ffae82" fill-opacity="0.19" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="14.00,37.00 28.00,25.10 28.00,41.21" fill="#ffae82" fill-opacity="0.19" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="42.00,37.00 28.00,51.33 28.00,41.21" fill="#ffae82" fill-opacity="0.21" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="14.00,37.00 28.00,51.33 28.00,41.21" fill="#ffae82" fill-opacity="0.21" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="42.00,37.00 28.00,25.10 28.00,30.24" fill="#ffae82" fill-opacity="0.23" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="14.00,37.00 28.00,25.10 28.00,30.24" fill="#ffae82" fill-opacity="0.23" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="42.00,37.00 28.00,51.33 28.00,30.24" fill="#ffae82" fill-opacity="0.25" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="14.00,37.00 28.00,51.33 28.00,30.24" fill="#ffae82" fill-opacity="0.25" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/></g><g class="frame" data-frame="1" style="animation-delay:-0.125s"><polygon points="41.48,37.69 28.00,25.26 26.51,41.41" fill="#ffae82" fill-opacity="0.19" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.69,36.26 28.00,25.26 26.51,41.41" fill="#ffae82" fill-opacity="0.19" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="41.48,37.69 28.00,51.28 26.51,41.41" fill="#ffae82" fill-opacity="0.20" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.69,36.26 28.00,51.28 26.51,41.41" fill="#ffae82" fill-opacity="0.21" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="41.48,37.69 28.00,25.26 30.37,29.98" fill="#ffae82" fill-opacity="0.23" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.69,36.26 28.00,25.26 30.37,29.98" fill="#ffae82" fill-opacity="0.24" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="41.48,37.69 28.00,51.28 30.37,29.98" fill="#ffae82" fill-opacity="0.25" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.69,36.26 28.00,51.28 30.37,29.98" fill="#ffae82" fill-opacity="0.25" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/></g><g class="frame" data-frame="2" style="animation-delay:-0.250s"><polygon points="40.77,38.40 28.00,25.41 25.03,41.53" fill="#ffae82" fill-opacity="0.18" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.63,35.42 28.00,25.41 25.03,41.53" fill="#ffae82" fill-opacity="0.19" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="40.77,38.40 28.00,51.23 25.03,41.53" fill="#ffae82" fill-opacity="0.20" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.63,35.42 28.00,51.23 25.03,41.53" fill="#ffae82" fill-opacity="0.21" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="40.77,38.40 28.00,25.41 32.65,29.91" fill="#ffae82" fill-opacity="0.23" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.63,35.42 28.00,25.41 32.65,29.91" fill="#ffae82" fill-opacity="0.24" stroke="#ffae82" stroke-width=".8" stroke-linejoin="round"/><polygon points="40.77,38.40 28.00,51.23 32.65,29.91" fill="#ffae82" fill-opacitLine truncated

docs/assets/readme/badges/codex.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="300" height="76" viewBox="0 0 300 76" role="img" aria-labelledby="t d"><title id="t">Codex PLUGIN</title><desc id="d">Codex: PLUGIN. Ruflo ecosystem link.</desc><style>text{font-family:Arial,Helvetica,sans-serif}.signal{stroke-dasharray:36 250;animation:travel 7s linear infinite}.icon{animation:glow 4s ease-in-out infinite}@keyframes travel{to{stroke-dashoffset:-572}}@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=".5" y=".5" width="299" height="75" rx="8" fill="#0b111d" stroke="#314151"/><path d="M50 12V64" stroke="#314151"/><g class="icon" transform="translate(25 38)" fill="none" stroke="#ffe338" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M-4 -8L-12 0L-4 8M4 -8L12 0L4 8"/></g><text x="63" y="21" fill="#b5c4d8" font-size="10" font-weight="600" letter-spacing="1.1">CODEX</text><text x="63" y="44" fill="#ffe338" font-size="19" font-weight="700">Ruflo plugin</text><text x="63" y="62" fill="#b5c4d8" font-size="10">Codex integration</text><path d="M9 73H291" stroke="#ffe338" stroke-opacity=".15"/><path class="signal" d="M9 73H291" stroke="#ffe338" stroke-width="1.4"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="76" viewBox="0 0 300 76" role="img" aria-labelledby="t d"><title id="t">Codex integration</title><desc id="d">Codex integration badge with a rotating three dimensional cube in cool cyan. Animation pauses to a readable static frame with reduced motion.</desc><defs><linearGradient id="bg" x2="1" y2="1"><stop stop-color="#0c2330"/><stop offset="1" stop-color="#0b111d"/></linearGradient><radialGradient id="halo"><stop stop-color="#5de4f2" stop-opacity=".3"/><stop offset="1" stop-color="#5de4f2" stop-opacity="0"/></radialGradient></defs><style>text{font-family:Arial,Helvetica,sans-serif}.frame{opacity:0;animation:frame 6s steps(1,end) infinite}.signal{stroke-dasharray:36 250;animation:travel 7s linear infinite}.halo{animation:breathe 4s ease-in-out infinite}@keyframes frame{0%{opacity:1}2.08333333%,100%{opacity:0}}@keyframes travel{to{stroke-dashoffset:-572}}@keyframes breathe{0%,100%{opacity:.3}50%{opacity:.7}}@media(prefers-reduced-motion:reduce){*{animation:none!important}.frame{opacity:0!important}.frame[data-frame="0"]{opacity:1!important}}</style><rect x=".5" y=".5" width="299" height="75" rx="8" fill="url(#bg)" stroke="#5de4f2" stroke-opacity=".45"/><path d="M57 12V64" stroke="#5de4f2" stroke-opacity=".22"/><circle class="halo" cx="28" cy="37" r="25" fill="url(#halo)"/><ellipse cx="28" cy="60" rx="17" ry="3" fill="#5de4f2" opacity=".14"/><g class="frame" data-frame="0" style="animation-delay:-0.000s"><polygon points="17.43,31.11 38.57,31.11 40.29,52.97 15.71,52.97" fill="#5de4f2" fill-opacity="0.15" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="17.43,31.11 38.57,31.11 44.27,15.86 11.73,15.86" fill="#5de4f2" fill-opacity="0.19" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="38.57,31.11 40.29,52.97 48.74,48.57 44.27,15.86" fill="#5de4f2" fill-opacity="0.22" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="17.43,31.11 15.71,52.97 7.26,48.57 11.73,15.86" fill="#5de4f2" fill-opacity="0.22" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="40.29,52.97 15.71,52.97 7.26,48.57 48.74,48.57" fill="#5de4f2" fill-opacity="0.25" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="11.73,15.86 44.27,15.86 48.74,48.57 7.26,48.57" fill="#5de4f2" fill-opacity="0.29" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/></g><g class="frame" data-frame="1" style="animation-delay:-0.125s"><polygon points="15.88,30.68 36.89,32.01 38.38,53.39 13.73,52.99" fill="#5de4f2" fill-opacity="0.15" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="15.88,30.68 36.89,32.01 45.46,17.44 13.64,14.34" fill="#5de4f2" fill-opacity="0.19" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="36.89,32.01 38.38,53.39 50.30,48.62 45.46,17.44" fill="#5de4f2" fill-opacity="0.21" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="15.88,30.68 13.73,52.99 9.29,47.49 13.64,14.34" fill="#5de4f2" fill-opacity="0.23" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="38.38,53.39 13.73,52.99 9.29,47.49 50.30,48.62" fill="#5de4f2" fill-opacity="0.25" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.64,14.34 45.46,17.44 50.30,48.62 9.29,47.49" fill="#5de4f2" fill-opacity="0.29" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/></g><g class="frame" data-frame="2" style="animation-delay:-0.250s"><polygon points="14.43,30.09 35.16,32.83 36.41,53.81 11.81,52.89" fill="#5de4f2" fill-opacity="0.16" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="14.43,30.09 35.16,32.83 46.22,19.12 15.97,12.95" fill="#5de4f2" fill-opacity="0.19" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="35.16,32.83 36.41,53.81 51.28,48.85 46.22,19.12" fill="#5de4f2" fill-opacity="0.20" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="14.43,30.09 11.81,52.89 11.99,46.32 15.97,12.95" fill="#5de4f2" fill-opacity="0.24" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="36.41,53.81 11.81,52.89 11.99,46.32 51.28,48.85" fill="#5de4f2" fill-opacity="0.25" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="15.97,12.95 46.22,19.12 51.28,48.85 11.99,46.32" fill="#5de4f2" fill-opacity="0.28" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/></g><g class="frame" data-frame="3" style="animation-delay:-0.375s"><polygon points="13.12,29.33 33.40,33.54 34.37,54.22 9.99,52.65" fill="#5de4f2" fill-opacity="0.16" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="13.12,29.33 33.40,33.54 46.58,20.85 18.66,11.77" fill="#5de4f2" fill-opacity="0.19" stroke="#5de4f2" stroke-width=".8" stroke-linejoin="round"/><polygon points="33.40,33.54 34.37,54.22 51.73,49.22 46.58,20.85" fill="#5de4f2" fill-opacity="0Line truncated