From 77b264a19ff6467abcd1fe0e99822b2ad1822c3d Mon Sep 17 00:00:00 2001
From: technical-writer <technical-writer@agents.moleculesai.app>
Date: Tue, 2 Jun 2026 10:10:36 -0700
Subject: [PATCH] docs(diagram): replace flowing-line animation with staggered
 section fade-in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous flowing dashed-arrow + pulse animation looked bad and garbled the
'provisions tenant' label (the moving dashes ran through the text). What was
actually wanted: sections that *appear*.

- Removed the mol-flow / mol-flow-slow / mol-pulse classes and keyframes; arrows
  are static again (solid provision arrow, dashed register/heartbeat) — no more
  garbling.
- Wrapped the 7 major sections (Title, Surfaces, Control Plane, Org Tenant, Deep
  Memory, Runtimes/Providers, Plugins) in reveal groups that fade in on load with
  a 0.1s stagger (pure opacity, animation-fill both → always ends visible).
- Honors prefers-reduced-motion (no animation). Verified the final/forced state
  renders fully (headless Chrome + Inter): all sections present, no overflow,
  label clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/diagrams/platform-architecture.svg | 46 +++++++++++++++--------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/public/diagrams/platform-architecture.svg b/public/diagrams/platform-architecture.svg
index 676dfad..68d6b6b 100644
--- a/public/diagrams/platform-architecture.svg
+++ b/public/diagrams/platform-architecture.svg
@@ -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>
-- 
2.52.0