-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
497 lines (479 loc) · 30.4 KB
/
index.html
File metadata and controls
497 lines (479 loc) · 30.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SYNAPSE — Stop Building AI Teams. Start Redesigning Collaboration.</title>
<meta name="description" content="SYNAPSE is an open-source organizational framework that unifies humans and AI into a single cognitive system. Self-host for free or use SYNAPSE Cloud.">
<meta property="og:title" content="SYNAPSE — Cognitive Agility Framework">
<meta property="og:description" content="Stop building AI teams. Start redesigning collaboration. An open-source organizational framework for the AI era.">
<meta property="og:image" content="https://synapse-origin.github.io/og-image.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://synapse-origin.github.io/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<nav>
<a href="#" class="nav-logo">SYNAPSE<span>.</span></a>
<button class="nav-mobile-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Toggle menu">☰</button>
<ul class="nav-links">
<li><a href="#problem">The Problem</a></li>
<li><a href="#approach">Approach</a></li>
<li><a href="#framework">Framework</a></li>
<li><a href="#platform">Platform</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#status">Status</a></li>
<li><a href="/fr/" class="nav-lang">FR</a></li>
<li><a href="https://github.com/synapse-origin/synapse-en" class="nav-cta">GitHub →</a></li>
</ul>
</nav>
<header class="hero">
<div class="hero-badge"><span class="pulse"></span> Cloud Beta — Signup open</div>
<h1>Stop building AI teams.<br>Start redesigning <em>collaboration.</em></h1>
<p class="hero-sub">Everyone's assembling multi-agent swarms. Research shows most will fail. SYNAPSE is an organizational framework that unifies humans and AI into a single cognitive system — instead of replicating human limitations in AI architecture.</p>
<div class="hero-actions">
<a href="#pricing" class="btn-primary">Join the Cloud Beta →</a>
<a href="https://github.com/synapse-origin/synapse-en" class="btn-secondary">Self-host for free</a>
</div>
<div class="hero-proof">
<div class="hero-proof-item"><strong>7</strong><span>AI Agents</span></div>
<div class="hero-proof-item"><strong>4</strong><span>Human Roles</span></div>
<div class="hero-proof-item"><strong>11</strong><span>Cognitive Metrics</span></div>
<div class="hero-proof-item"><strong>100K+</strong><span>Words of Docs</span></div>
</div>
</header>
<section class="problem-section reveal" id="problem">
<div class="section-label">The Problem</div>
<h2 class="section-title">Multi-agent AI is organizational debt disguised as architecture</h2>
<p class="section-subtitle">The industry is racing to build AI agent swarms. But the failures aren't technical — they're structural.</p>
<div class="problem-grid">
<div class="problem-card"><div class="card-number">01</div><h3>Errors cascade, not cancel</h3><p>For sequential tasks — which is most of what teams actually do — adding more agents makes things worse. Each handoff introduces drift, ambiguity, and compounding failures.</p></div>
<div class="problem-card"><div class="card-number">02</div><h3>Coordination eats the gain</h3><p>Research shows the effective ceiling is 3-4 agents before communication overhead outpaces reasoning value. Beyond that, you're paying for coordination, not intelligence.</p></div>
<div class="problem-card"><div class="card-number">03</div><h3>You're blindfolding what can see</h3><p>An AI that can process an entire codebase doesn't need to be split into a "research agent" and a "review agent." That fragmentation destroys its core advantage: holistic understanding.</p></div>
<div class="problem-card"><div class="card-number">04</div><h3>Agile wasn't built for this</h3><p>Scrum, Kanban, SAFe optimized human coordination. But they have no model for integrating a non-human cognitive partner that doesn't share our constraints of attention, fatigue, or specialization.</p></div>
</div>
</section>
<section class="reframe-section reveal">
<div class="section-label">The Shift</div>
<h2 class="section-title">It's not a technology problem. It's an org design problem.</h2>
<p class="section-subtitle">The question isn't "how many agents do we need?" — it's "how do we redesign collaboration when one side of the team has fundamentally different capabilities?"</p>
<div class="reframe-block">
<div class="reframe-columns">
<div class="reframe-col old"><h3>Current approach</h3><p>"Let's build an AI team that mirrors our org chart — a research agent, a writing agent, a review agent, an orchestrator..."</p></div>
<div class="reframe-arrow">→</div>
<div class="reframe-col new"><h3>SYNAPSE approach</h3><p>"Let's define how one AI partner collaborates with humans at graduated levels of autonomy — based on task type, risk, and trust."</p></div>
</div>
</div>
</section>
<section class="scenario-section reveal">
<div class="section-label">In Practice</div>
<h2 class="section-title">Monday morning. A blocker is about to cost your team a week.</h2>
<p class="section-subtitle">Here's how SYNAPSE handles it — before your standup even starts.</p>
<div class="scenario-timeline">
<div class="scenario-step">
<div class="scenario-time">9:15 AM</div>
<div class="scenario-dot"></div>
<h3>Detection</h3>
<p>The Coordination Agent detects 3 tasks blocked by the same unresolved dependency. It alerts the System Orchestrator instantly.</p>
</div>
<div class="scenario-step">
<div class="scenario-time">9:30 AM</div>
<div class="scenario-dot"></div>
<h3>Memory</h3>
<p>The Memory Agent surfaces a similar situation from 4 months ago — and the solution that worked. The Pattern Agent confirms: this is the 3rd occurrence.</p>
</div>
<div class="scenario-step">
<div class="scenario-time">10:00 AM</div>
<div class="scenario-dot"></div>
<h3>Simulation</h3>
<p>The Simulation Agent generates 3 resolution scenarios with time and cost estimates. The team reviews and picks the fastest path.</p>
</div>
<div class="scenario-step scenario-resolved">
<div class="scenario-time">11:00 AM</div>
<div class="scenario-dot"></div>
<h3>Resolved</h3>
<p>Done. The blocker is cleared in under 2 hours with a proven approach, not a guess.</p>
</div>
</div>
<div class="scenario-punchline">
<strong>Without SYNAPSE?</strong> This blocker surfaces at the next standup... on Wednesday. The team loses 3 days guessing at a solution someone already found 4 months ago.
</div>
</section>
<section class="approach-section reveal" id="approach">
<div class="section-label">How It Works</div>
<h2 class="section-title">Three layers, one continuous loop</h2>
<p class="section-subtitle">SYNAPSE organizes human-AI collaboration into three layers that feed into each other continuously — not in fixed cycles.</p>
<div class="approach-flow">
<div class="flow-step">
<div class="flow-step-number">01</div>
<h3><span class="layer-tag">Layer 1 — Humans</span>Intention</h3>
<p>Define explicit, shared objectives. Formalize strategic intent. The Intent Architect and Ethical Guardian set direction and guardrails.</p>
</div>
<div class="flow-step">
<div class="flow-step-number">02</div>
<h3><span class="layer-tag">Layer 2 — AI + Humans</span>Cognition</h3>
<p>AI agents analyze patterns, detect drifts, run simulations, and surface organizational memory. Humans receive enlightened options, not raw data.</p>
</div>
<div class="flow-step">
<div class="flow-step-number">03</div>
<h3><span class="layer-tag">Layer 3 — Humans + AI</span>Execution</h3>
<p>Sovereign Makers materialize decisions. The Coordination Agent optimizes workflows, detects blockers, and proposes task adjustments.</p>
</div>
<div class="feedback-loop">
<span class="loop-arrow">←</span> Continuous feedback via 3 governance loops: Intent Sync · Pattern Review · Decision Moment <span class="loop-arrow">←</span>
</div>
</div>
</section>
<section class="impact-section reveal">
<div class="section-label">Projected Impact</div>
<h2 class="section-title">Numbers that matter, not story points</h2>
<p class="section-subtitle">Projected gains based on framework design principles and cognitive science research. Real-world validation in progress with pilot organizations.</p>
<div class="impact-grid">
<div class="impact-card">
<div class="impact-number">10x</div>
<div class="impact-label">Faster decisions</div>
<div class="impact-detail">Memory + Simulation = informed choices in hours, not weeks</div>
</div>
<div class="impact-card">
<div class="impact-number">-40%</div>
<div class="impact-label">Time to production</div>
<div class="impact-detail">Coordination Agent eliminates invisible blockers</div>
</div>
<div class="impact-card">
<div class="impact-number">-50%</div>
<div class="impact-label">Cost of pivots</div>
<div class="impact-detail">Simulation accelerates strategic direction changes</div>
</div>
<div class="impact-card">
<div class="impact-number">-40%</div>
<div class="impact-label">Meeting time</div>
<div class="impact-detail">Adaptive loops replace fixed agile rituals</div>
</div>
</div>
<p class="impact-note">These projections are derived from the framework's theoretical model. We're currently validating them with pilot teams — results expected Q3 2026.</p>
</section>
<section class="framework-section reveal" id="framework">
<div class="section-label">What's Inside</div>
<h2 class="section-title">A complete organizational framework — not another tool</h2>
<p class="section-subtitle">SYNAPSE specifies roles, agents, governance loops, and metrics. Self-host it for free or let us run it for you.</p>
<div class="framework-grid">
<div class="framework-card">
<span class="card-icon">🎯</span>
<h3>4 Human Roles</h3>
<p>Intent Architect, Ethical Guardian, System Orchestrator, Sovereign Maker. Clear responsibilities with explicit veto powers. Humans stay in control.</p>
</div>
<div class="framework-card">
<span class="card-icon">🧠</span>
<h3>7 AI Agents</h3>
<p>Memory, Pattern, Simulation, Coordination, IntentSync, BiasDetection, and Orchestrator — defined as functional specs, not code. Implement them with Claude, GPT, Mistral, or anything else.</p>
</div>
<div class="framework-card">
<span class="card-icon">🔄</span>
<h3>3 Governance Loops</h3>
<p>Intent Sync, Pattern Review, Decision Moment. Adaptive rhythms triggered by events, not sprints. Meetings drop from ~18% to ~9% of team time.</p>
</div>
<div class="framework-card">
<span class="card-icon">📊</span>
<h3>11 Cognitive Metrics</h3>
<p>Measure what matters in a human-AI system — not velocity or burndown, but real organizational health.</p>
<div class="metrics-categories">
<div class="metric-cat">
<h4>System (5)</h4>
<p>Time to Coherence, Adaptation Rate, Active Memory, Intent Clarity, Decision Latency</p>
</div>
<div class="metric-cat">
<h4>Human (3)</h4>
<p>Cognitive Load, Perceived Autonomy, System Trust</p>
</div>
<div class="metric-cat">
<h4>Value (3)</h4>
<p>Time to Production, Quality Delivered, Cost of Adaptation</p>
</div>
</div>
</div>
<div class="framework-card">
<span class="card-icon">⚖️</span>
<h3>Ethics Charter</h3>
<p>8 non-negotiable principles: mandatory transparency, human veto right, data protection, anti-discrimination, right to contest, surveillance limits, informed consent, and human responsibility. Plus 8 employee rights including the right to disconnect and the right to audit.</p>
</div>
<div class="framework-card">
<span class="card-icon">📐</span>
<h3>Graduated Autonomy</h3>
<p>A 4-level progression model that defines how much autonomy AI gets based on task complexity, risk level, and accumulated trust. Any agent can be paused or disabled at any time.</p>
</div>
</div>
</section>
<div class="mid-cta reveal">
<p><strong>Want to see it live?</strong> The framework isn't just documentation — it's a running application. <a href="#platform">See the platform ↓</a></p>
</div>
<section class="platform-section reveal" id="platform">
<div class="section-label">The Platform</div>
<h2 class="section-title">Not just a framework — a complete application</h2>
<p class="section-subtitle">SYNAPSE Cloud brings the framework to life with a full-featured platform. Self-host or let us run it for you.</p>
<div class="platform-grid">
<div class="platform-card">
<div class="mockup mockup-chat">
<div class="mockup-bubble mockup-bubble-ai wide"></div>
<div class="mockup-bubble mockup-bubble-user"></div>
<div class="mockup-bubble mockup-bubble-ai" style="width:55%"></div>
<div class="mockup-bubble mockup-bubble-ai wide"></div>
<div class="mockup-input"><div class="mockup-send"></div></div>
</div>
<div class="platform-card-content">
<h3>Conversational AI</h3>
<p>Chat with your organizational AI partner. Streaming responses, multi-turn conversations, full organizational context.</p>
</div>
</div>
<div class="platform-card">
<div class="mockup mockup-graph">
<div class="mockup-node purple" style="top:25%;left:20%"></div>
<div class="mockup-node blue" style="top:15%;left:55%"></div>
<div class="mockup-node green" style="top:50%;left:45%"></div>
<div class="mockup-node orange" style="top:60%;left:75%"></div>
<div class="mockup-node purple" style="top:70%;left:25%"></div>
<div class="mockup-node blue" style="top:35%;left:80%"></div>
<div class="mockup-edge" style="top:30%;left:24%;width:100px;transform:rotate(-10deg)"></div>
<div class="mockup-edge" style="top:40%;left:48%;width:80px;transform:rotate(35deg)"></div>
<div class="mockup-edge" style="top:55%;left:30%;width:60px;transform:rotate(-25deg)"></div>
<div class="mockup-edge" style="top:25%;left:60%;width:70px;transform:rotate(20deg)"></div>
<div class="mockup-edge" style="top:65%;left:50%;width:90px;transform:rotate(5deg)"></div>
</div>
<div class="platform-card-content">
<h3>Knowledge Graph</h3>
<p>Interactive visualization of relationships between intents, decisions, entities, and detected patterns.</p>
</div>
</div>
<div class="platform-card">
<div class="mockup mockup-dashboard">
<div class="mockup-dash-hero"></div>
<div class="mockup-dash-stats">
<div class="mockup-dash-stat"><div class="mockup-dash-stat-num"></div><div class="mockup-dash-stat-label"></div></div>
<div class="mockup-dash-stat"><div class="mockup-dash-stat-num"></div><div class="mockup-dash-stat-label"></div></div>
<div class="mockup-dash-stat"><div class="mockup-dash-stat-num"></div><div class="mockup-dash-stat-label"></div></div>
</div>
<div class="mockup-dash-bar"><div class="mockup-dash-bar-fill good"></div></div>
<div class="mockup-dash-bar"><div class="mockup-dash-bar-fill high"></div></div>
<div class="mockup-dash-bar"><div class="mockup-dash-bar-fill mid"></div></div>
</div>
<div class="platform-card-content">
<h3>Role-Specific Dashboards</h3>
<p>Each of the 4 roles gets a dedicated dashboard focused on their responsibilities and decision scope.</p>
</div>
</div>
<div class="platform-card">
<div class="mockup mockup-brief">
<div class="mockup-brief-header">
<div class="mockup-brief-icon"></div>
<div class="mockup-brief-title"></div>
<div class="mockup-brief-badge"><div class="mockup-brief-badge-dot"></div></div>
</div>
<div class="mockup-brief-line w90"></div>
<div class="mockup-brief-line w75"></div>
<div class="mockup-brief-line w80"></div>
<div class="mockup-brief-line w45"></div>
<div style="height:0.75rem"></div>
<div class="mockup-brief-line w65"></div>
<div class="mockup-brief-line w90"></div>
<div class="mockup-brief-line w75"></div>
</div>
<div class="platform-card-content">
<h3>Daily Brief</h3>
<p>AI-generated daily summary with insights, health scores, and recommended action items from the Orchestrator agent.</p>
</div>
</div>
<div class="platform-card">
<div class="mockup mockup-integrations">
<div class="mockup-int-icon gh">GH</div>
<div class="mockup-int-arrows"><span>→</span><span>←</span></div>
<div class="mockup-int-icon syn">S.</div>
<div class="mockup-int-arrows"><span>←</span><span>→</span></div>
<div class="mockup-int-icon jira">JR</div>
</div>
<div class="platform-card-content">
<h3>GitHub & Jira Sync</h3>
<p>Bidirectional task synchronization from your existing tools. Import issues, track dependencies, detect blockers.</p>
</div>
</div>
<div class="platform-card">
<div class="mockup mockup-sim">
<div class="mockup-sim-bar"><div class="mockup-sim-fill a"></div><div class="mockup-sim-pct">78%</div><div class="mockup-sim-label">Plan A</div></div>
<div class="mockup-sim-bar"><div class="mockup-sim-fill b"></div><div class="mockup-sim-pct">52%</div><div class="mockup-sim-label">Plan B</div></div>
<div class="mockup-sim-bar"><div class="mockup-sim-fill c"></div><div class="mockup-sim-pct">23%</div><div class="mockup-sim-label">Plan C</div></div>
</div>
<div class="platform-card-content">
<h3>Decision Simulations</h3>
<p>Generate 3-5 realistic scenarios with probability scores before making major decisions. Informed choices, not gut calls.</p>
</div>
</div>
</div>
</section>
<section class="compare-section reveal">
<div class="section-label">Comparison</div>
<h2 class="section-title">SYNAPSE vs. traditional agile</h2>
<p class="section-subtitle">Not a replacement — an evolution for the AI era.</p>
<table class="compare-table">
<thead><tr><th>Dimension</th><th>Traditional Agile</th><th>SYNAPSE</th></tr></thead>
<tbody>
<tr><td>Decisions</td><td>Humans alone</td><td>Humans + AI simulation</td></tr>
<tr><td>Adaptation</td><td>Fixed cycles (sprints)</td><td>Continuous, event-driven</td></tr>
<tr><td>Memory</td><td>Manual documentation</td><td>Auto-generated knowledge graph</td></tr>
<tr><td>Coordination</td><td>Human rituals</td><td>AI-detected, human-decided</td></tr>
<tr><td>Governance</td><td>Unclear roles</td><td>4 defined roles with explicit veto powers</td></tr>
<tr><td>Ethics</td><td>Not addressed</td><td>8 non-negotiable principles + Ethical Guardian</td></tr>
<tr><td>Metrics</td><td>Velocity, burndown</td><td>11 cognitive metrics (system + human + value)</td></tr>
<tr><td>Meeting time</td><td>~15-20% of team time</td><td>~9-10% of team time</td></tr>
<tr><td>AI integration</td><td>Bolt-on tools</td><td>Native cognitive partner</td></tr>
</tbody>
</table>
</section>
<section class="pricing-section reveal" id="pricing">
<div class="section-label">Choose Your Path</div>
<h2 class="section-title">Open source at the core. Cloud when you need it.</h2>
<p class="section-subtitle">Like n8n or GitLab — the framework is free forever. We handle the infrastructure when you'd rather focus on your team.</p>
<div class="pricing-grid">
<div class="pricing-card">
<span class="pricing-tag free">Community</span>
<h3>Self-Hosted</h3>
<p class="pricing-price">Free & open source — forever</p>
<p class="pricing-desc">The complete SYNAPSE framework on your own infrastructure. Full control, full sovereignty. Perfect for technical teams and early adopters who want to explore and customize.</p>
<ul class="pricing-features">
<li><span class="check">✓</span> Full framework specs & documentation</li>
<li><span class="check">✓</span> All 7 AI agent specifications</li>
<li><span class="check">✓</span> Templates, guides & getting started kit</li>
<li><span class="check">✓</span> Deploy on your infra (Raspberry Pi to cloud)</li>
<li><span class="check">✓</span> Use any LLM (Claude, GPT, Mistral, Llama)</li>
<li><span class="check">✓</span> Community support via GitHub</li>
</ul>
<a href="https://github.com/synapse-origin/synapse-en" class="btn-secondary">Browse on GitHub</a>
</div>
<div class="pricing-card featured">
<span class="pricing-tag beta">Cloud Beta</span>
<h3>SYNAPSE Cloud</h3>
<p class="pricing-price">Free during beta · Paid plans coming</p>
<p class="pricing-desc">Everything in Community, managed for you. No setup, no maintenance. Get your team running on SYNAPSE in minutes, not weeks. Currently in private beta — sign up for early access.</p>
<ul class="pricing-features">
<li><span class="check">✓</span> Everything in Community</li>
<li><span class="check">✓</span> Guided setup & onboarding</li>
<li><span class="check">✓</span> Cognitive metrics dashboard</li>
<li><span class="check">✓</span> Pre-configured agent templates</li>
<li><span class="check">✓</span> Automatic updates</li>
<li><span class="check">✓</span> Priority support</li>
</ul>
<a href="mailto:synapse-origin@proton.me" class="btn-primary">Request Beta Access →</a>
</div>
<div class="pricing-card">
<span class="pricing-tag custom">Enterprise</span>
<h3>Dedicated</h3>
<p class="pricing-price">Custom pricing</p>
<p class="pricing-desc">On-premise deployment with hands-on support. We help your organization adopt SYNAPSE end-to-end — from intent definition to full team rollout, with workshops, coaching, and dedicated SLA.</p>
<ul class="pricing-features">
<li><span class="check">✓</span> Everything in Cloud</li>
<li><span class="check">✓</span> On-premise or private cloud deployment</li>
<li><span class="check">✓</span> Custom agent configuration</li>
<li><span class="check">✓</span> Workshop: define your Intent Statement</li>
<li><span class="check">✓</span> Team training on the 4 roles</li>
<li><span class="check">✓</span> Dedicated SLA & support</li>
</ul>
<a href="mailto:synapse-origin@proton.me" class="btn-secondary">Contact us</a>
</div>
</div>
</section>
<section class="status-section reveal" id="status">
<div class="section-label">Project Status</div>
<h2 class="section-title">Framework complete. Cloud in beta. Seeking pilot teams.</h2>
<p class="section-subtitle">SYNAPSE v1.0 is fully specified. The Cloud platform is entering private beta. We're looking for teams ready to be among the first.</p>
<div class="status-grid">
<div class="status-done">
<h3>✓ Completed</h3>
<ul class="status-list">
<li><span class="check">✓</span> 7 AI agent specifications (functional + guardrails)</li>
<li><span class="check">✓</span> 4 human roles with veto powers</li>
<li><span class="check">✓</span> 3 adaptive governance loops</li>
<li><span class="check">✓</span> 11 cognitive metrics defined</li>
<li><span class="check">✓</span> Ethics charter (8 principles + 8 employee rights)</li>
<li><span class="check">✓</span> Graduated autonomy model (4 levels)</li>
<li><span class="check">✓</span> 100K+ words of documentation</li>
<li><span class="check">✓</span> Cloud platform development</li>
</ul>
</div>
<div class="status-next">
<h3>◇ Next Steps</h3>
<ul class="status-list">
<li><span class="pending">◐</span> Cloud private beta (now open)</li>
<li><span class="pending">◐</span> Pilot organizations (recruiting)</li>
<li><span class="pending">○</span> Field validation (Q2-Q3 2026)</li>
<li><span class="pending">○</span> Academic publication</li>
<li><span class="pending">○</span> Cloud general availability</li>
</ul>
</div>
</div>
<div class="sovereignty-tags-inline">
<div class="sovereignty-tag">🏠 100% self-hostable</div>
<div class="sovereignty-tag">🔒 GDPR by design</div>
<div class="sovereignty-tag">🔓 Open-source LLMs supported</div>
<div class="sovereignty-tag">📊 Your data stays yours</div>
</div>
</section>
<section class="cta-section reveal">
<div class="section-label">Join the shift</div>
<h2 class="section-title">Ready to redesign how your team works with AI?</h2>
<p class="section-subtitle">Self-host for free today, or sign up for the Cloud beta and get running in minutes. Either way, the framework is yours.</p>
<div class="cta-actions">
<a href="mailto:synapse-origin@proton.me" class="btn-primary">Request Beta Access →</a>
<a href="https://github.com/synapse-origin/synapse-en" class="btn-secondary">Browse on GitHub</a>
</div>
</section>
<div class="author-section reveal">
<div class="section-label">Who's behind this</div>
<p><strong>[Your name]</strong> — [Your bio here: 1-2 sentences about your background, what led you to build SYNAPSE, and why you believe in it.] <a href="#">LinkedIn</a> · <a href="#">Twitter/X</a></p>
</div>
<footer>
<div class="footer-top">
<div class="footer-brand">
<a href="#" class="nav-logo">SYNAPSE<span>.</span></a>
<p>"We're not making the old world more efficient. We're building the next one."</p>
</div>
<div class="footer-cols">
<div class="footer-col">
<h4>Framework</h4>
<ul>
<li><a href="https://github.com/synapse-origin/synapse-en">Documentation</a></li>
<li><a href="https://github.com/synapse-origin/synapse-en">Getting Started</a></li>
<li><a href="https://github.com/synapse-origin/synapse-en">Templates</a></li>
<li><a href="https://github.com/synapse-origin/synapse-en">FAQ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/synapse-origin/synapse-en/discussions">Discussions</a></li>
<li><a href="https://github.com/synapse-origin/synapse-en">Contribute</a></li>
<li><a href="https://github.com/synapse-origin/synapse-en">Research</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Product</h4>
<ul>
<li><a href="mailto:synapse-origin@proton.me">Cloud Beta</a></li>
<li><a href="mailto:synapse-origin@proton.me">Enterprise</a></li>
<li><a href="mailto:synapse-origin@proton.me">Partnerships</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025-2026 SYNAPSE Origin. Framework licensed under CC BY-SA 4.0</p>
<p>Made with 🧠 in France</p>
</div>
</footer>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>
</body>
</html>