molecule-ai/docs
47
0
Fork 0
Code Issues Pull Requests 11 Actions Packages Projects Releases Wiki Activity

docs(diagram): replace flowing-line animation with staggered section fade-in #74

Merged
documentation-specialist merged 1 commits from docs/diagram-section-reveal into main 2026-06-02 17:11:32 +00:00
Conversation 1 Commits 1 Files Changed 1
+30 -16
1 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/diagrams/platform-architecture.svg
+30 -16
View File
@@ -1,16 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1360 1410" font-family="Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
<defs>
<style>
@keyframes mol-flow { to { stroke-dashoffset: -18; } }
@keyframes mol-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes mol-beat { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
.mol-flow { stroke-dasharray: 6 5; animation: mol-flow 1.05s linear infinite; }
.mol-flow-slow { stroke-dasharray: 5 4; animation: mol-flow 1.6s linear infinite; }
.mol-pulse { animation: mol-pulse 2.4s ease-in-out infinite; }
.mol-beat { transform-box: fill-box; transform-origin: center; animation: mol-beat 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.mol-flow, .mol-flow-slow, .mol-pulse, .mol-beat { animation: none; }
}
@keyframes mol-appear { from { opacity: 0; } to { opacity: 1; } }
.mol-sec { animation: mol-appear .5s ease-out both; }
@media (prefers-reduced-motion: reduce) { .mol-sec { animation: none; } }
</style>
<filter id="sh" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#0b1220" flood-opacity="0.10"/></filter>
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#64748b"/></marker>
@@ -20,12 +13,16 @@
<rect width="1360" height="1410" fill="#fbfcfe"/>
<!-- ===== Title ===== -->
<g class="mol-sec" style="animation-delay:0s">
<text x="44" y="48" font-size="26" font-weight="700" fill="#15181f">Molecule AI — the open-source OS for AI agent organizations</text>
<text x="44" y="76" font-size="14" fill="#5b6472">Self-host the whole stack or use the hosted SaaS · provider-agnostic · plug in any runtime, model, or device · grow your ecosystem.</text>
<g filter="url(#sh)"><rect x="44" y="92" width="470" height="30" rx="15" fill="#ecfdf5" stroke="#10b981" stroke-width="1.3"/></g>
<text x="62" y="112" font-size="12.5" font-weight="700" fill="#047857">Open source · self-hostable · one binary · community ecosystem</text>
</g>
<!-- ===== SURFACES ===== -->
<g class="mol-sec" style="animation-delay:0.1s">
<text x="44" y="156" font-size="12" font-weight="700" fill="#64748b" letter-spacing="0.4">SURFACES — how you drive &amp; reach the org</text>
<g filter="url(#sh)">
<rect x="44" y="166" width="232" height="60" rx="11" fill="#f6f4ff" stroke="#7c6df2" stroke-width="1.4"/>
@@ -45,7 +42,7 @@
<text x="1180" y="192" font-size="13" font-weight="700" fill="#15181f" text-anchor="middle">REST API / SDK</text>
<text x="1180" y="211" font-size="10.5" fill="#5b6472" text-anchor="middle">automate everything</text>
<g stroke="#64748b" stroke-width="1.3" fill="none" class="mol-flow">
<g stroke="#64748b" stroke-width="1.3" fill="none">
<path d="M160,226 L160,250" marker-end="url(#a)"/>
<path d="M406,226 L406,250" marker-end="url(#a)"/>
<path d="M652,226 L652,250" marker-end="url(#a)"/>
@@ -53,7 +50,10 @@
<path d="M1180,226 L1180,250" marker-end="url(#a)"/>
</g>
</g>
<!-- ===== CONTROL PLANE (thin central SaaS) ===== -->
<g class="mol-sec" style="animation-delay:0.2s">
<g filter="url(#sh)"><rect x="44" y="252" width="1272" height="116" rx="16" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.7"/></g>
<text x="66" y="280" font-size="17" font-weight="700" fill="#3730a3">Control Plane · Platform</text>
<text x="300" y="280" font-size="12" fill="#6366f1">Go / Gin — central SaaS: manages orgs &amp; provisions tenants (open source)</text>
@@ -67,12 +67,15 @@
<text x="66" y="358" font-size="11.5" fill="#6366f1">Manages tenants &amp; billing — never in the agent↔agent data path. Self-host: same binary, your infrastructure.</text>
<!-- CP -> tenant arrows -->
<g stroke="#4f46e5" stroke-width="1.6" fill="none" class="mol-flow">
<g stroke="#4f46e5" stroke-width="1.6" fill="none">
<path d="M300,368 L300,402" marker-end="url(#ai)"/><text x="308" y="392" font-size="11" font-weight="700" fill="#4338ca">provisions tenant</text>
<path d="M780,402 L780,368" marker-end="url(#ai)" stroke-dasharray="5 4"/><text x="788" y="392" font-size="10.5" fill="#6366f1">register · heartbeat · billing</text>
</g>
</g>
<!-- ===== ORG TENANT — its own control + workspace hierarchy ===== -->
<g class="mol-sec" style="animation-delay:0.3s">
<g filter="url(#sh)"><rect x="44" y="404" width="1272" height="400" rx="16" fill="#ffffff" stroke="#cdd3df" stroke-width="1.7"/></g>
<text x="66" y="432" font-size="16" font-weight="700" fill="#0f172a">Org Tenant — its own control + a hierarchy of Workspaces</text>
<text x="560" y="432" font-size="12" fill="#64748b">one isolated tenant per org · own EC2 · each Workspace = one agent on its OWN machine</text>
@@ -136,8 +139,8 @@
<text x="545" y="780" font-size="10" fill="#dc2626" text-anchor="middle">hard gate</text>
<text x="815" y="780" font-size="10" fill="#dc2626" text-anchor="middle">hard gate</text>
<path class="mol-pulse" d="M520,688 C545,664 570,664 570,688" stroke="#10b981" stroke-width="2.2" fill="none" marker-end="url(#ag)" marker-start="url(#ag)"/>
<path class="mol-pulse" d="M790,688 C815,664 840,664 840,688" stroke="#10b981" stroke-width="2.2" fill="none" marker-end="url(#ag)" marker-start="url(#ag)"/>
<path d="M520,688 C545,664 570,664 570,688" stroke="#10b981" stroke-width="2.2" fill="none" marker-end="url(#ag)" marker-start="url(#ag)"/>
<path d="M790,688 C815,664 840,664 840,688" stroke="#10b981" stroke-width="2.2" fill="none" marker-end="url(#ag)" marker-start="url(#ag)"/>
<text x="1086" y="690" font-size="12" font-weight="700" fill="#047857">A2A — the ONLY channel</text>
<text x="1086" y="708" font-size="10.5" fill="#0f766e">network-only · hierarchy-gated.</text>
<text x="1086" y="724" font-size="10.5" fill="#dc2626">No shared FS / env / secrets —</text>
@@ -149,7 +152,10 @@
<text x="82" y="736" font-size="10" fill="#0f766e">memory scope · approvals</text>
<text x="82" y="752" font-size="10" fill="#0f766e">the org chart IS the ACL</text>
</g>
<!-- ===== DEEP MEMORY ===== -->
<g class="mol-sec" style="animation-delay:0.4s">
<g filter="url(#sh)"><rect x="44" y="824" width="1272" height="150" rx="16" fill="#fff7ed" stroke="#f59e0b" stroke-width="1.6"/></g>
<text x="66" y="851" font-size="16" font-weight="700" fill="#b45309">Deep memory — hierarchical &amp; namespaced (HMA)</text>
<text x="610" y="851" font-size="11.5" fill="#92560a">durable per-workspace namespace · scoped reach follows the org tree</text>
@@ -168,10 +174,13 @@
<text x="800" y="946" font-size="10.5" font-weight="600" fill="#b45309">promotion: memory → repeated success → skill (hot-reload)</text>
<!-- arrow tenant -> runtimes -->
<path class="mol-flow-slow" d="M300,804 L300,1008" stroke="#64748b" stroke-width="1.4" fill="none" marker-end="url(#a)"/>
<path d="M300,804 L300,1008" stroke="#64748b" stroke-width="1.4" fill="none" marker-end="url(#a)"/>
<text x="312" y="998" font-size="10.5" fill="#475569">each workspace selects a runtime ▸</text>
</g>
<!-- ===== PLUGGABLE RUNTIMES + DEVICES ===== -->
<g class="mol-sec" style="animation-delay:0.5s">
<text x="44" y="1010" font-size="12" font-weight="700" fill="#64748b" letter-spacing="0.4">PLUGGABLE RUNTIMES — any agent, any device (one BaseAdapter contract)</text>
<g filter="url(#sh)"><rect x="44" y="1020" width="860" height="222" rx="14" fill="#f8fafc" stroke="#0ea5e9" stroke-width="1.5"/></g>
@@ -211,9 +220,12 @@
<text x="942" y="1230" font-size="10" fill="#7c8aa3">Orchestration core is provider-agnostic — all swappable.</text>
<!-- runtime -> provider -->
<path class="mol-flow-slow" d="M904,1130 L920,1130" stroke="#64748b" stroke-width="1.6" fill="none" marker-end="url(#a)"/>
<path d="M904,1130 L920,1130" stroke="#64748b" stroke-width="1.6" fill="none" marker-end="url(#a)"/>
</g>
<!-- ===== PLUGINS — per-workspace capabilities & service proxies ===== -->
<g class="mol-sec" style="animation-delay:0.6s">
<text x="44" y="1276" font-size="12" font-weight="700" fill="#64748b" letter-spacing="0.4">PLUGINS — install capabilities &amp; services per workspace (no external site to configure)</text>
<g filter="url(#sh)"><rect x="44" y="1286" width="1272" height="112" rx="14" fill="#f3fbf6" stroke="#10b981" stroke-width="1.5"/></g>
<text x="66" y="1312" font-size="13" font-weight="700" fill="#047857">Per-workspace · installed like an app · UNION with org defaults</text>
@@ -234,4 +246,6 @@
<rect x="624" y="1364" width="60" height="30" rx="8" fill="#fff" stroke="#a7e3c5"/><text x="654" y="1384" fill="#5b6472">…</text>
<rect x="740" y="1364" width="556" height="30" rx="8" fill="#fff7ed" stroke="#f4b860" stroke-width="1.4" stroke-dasharray="5 4"/><text x="1018" y="1384" fill="#b45309">Molecule Marketplace — third-party devs publish &amp; sell · roadmap</text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB