create-metaclaw 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/LICENSE +44 -0
  2. package/README.md +282 -0
  3. package/docs/assets/favicon.png +0 -0
  4. package/docs/assets/metaclaw-banner.svg +86 -0
  5. package/docs/assets/qis-logo.png +0 -0
  6. package/docs/assets/yz-favicon.png +0 -0
  7. package/docs/assets/yz-logo.png +0 -0
  8. package/docs/index.html +895 -0
  9. package/installer/assets/favicon.png +0 -0
  10. package/installer/auto-start.ts +330 -0
  11. package/installer/brand.ts +115 -0
  12. package/installer/core-scaffold.ts +448 -0
  13. package/installer/dashboard-generator.ts +657 -0
  14. package/installer/detect.ts +129 -0
  15. package/installer/index.ts +355 -0
  16. package/installer/module-loader.ts +412 -0
  17. package/installer/modules/boardroom/boardroom/client.ts.txt +201 -0
  18. package/installer/modules/boardroom/boardroom/db.ts.txt +322 -0
  19. package/installer/modules/boardroom/boardroom/meeting-agent.ts.txt +129 -0
  20. package/installer/modules/boardroom/boardroom/meeting-scheduler.ts.txt +194 -0
  21. package/installer/modules/boardroom/boardroom/server.ts.txt +473 -0
  22. package/installer/modules/boardroom/boardroom/start-boardroom.bat.txt +26 -0
  23. package/installer/modules/boardroom/boardroom/summons.ts.txt +76 -0
  24. package/installer/modules/boardroom/boardroom/turn-v2.ts.txt +172 -0
  25. package/installer/modules/boardroom/boardroom/turn.ts.txt +208 -0
  26. package/installer/modules/boardroom/boardroom/types.ts.txt +100 -0
  27. package/installer/modules/boardroom/metaclaw-module.json +35 -0
  28. package/installer/modules/boardroom/scripts/meeting-check.bat.txt +38 -0
  29. package/installer/modules/core/metaclaw-module.json +51 -0
  30. package/installer/modules/core/src/db.ts.txt +277 -0
  31. package/installer/modules/core/src/health-check.ts.txt +128 -0
  32. package/installer/modules/core/src/observability.ts.txt +20 -0
  33. package/installer/modules/core/src/safety.ts.txt +26 -0
  34. package/installer/modules/core/src/scan-capabilities.ts.txt +196 -0
  35. package/installer/modules/core/src/self-improve.ts.txt +48 -0
  36. package/installer/modules/core/src/self-update.ts.txt +345 -0
  37. package/installer/modules/core/src/sync-context.ts.txt +133 -0
  38. package/installer/modules/core/src/tasks.ts.txt +159 -0
  39. package/installer/modules/custom/metaclaw-module.json +15 -0
  40. package/installer/modules/custom/src/agent-custom.ts.txt +100 -0
  41. package/installer/modules/dashboard/metaclaw-module.json +23 -0
  42. package/installer/modules/dashboard/scripts/build-dashboard.cjs.txt +51 -0
  43. package/installer/modules/dashboard/src/update-dashboard.ts.txt +126 -0
  44. package/installer/modules/outreach/metaclaw-module.json +29 -0
  45. package/installer/modules/outreach/src/agent-outreach.ts.txt +193 -0
  46. package/installer/modules/outreach/src/inbox-agent.ts.txt +283 -0
  47. package/installer/modules/outreach/src/morning-report.ts.txt +124 -0
  48. package/installer/modules/research/metaclaw-module.json +15 -0
  49. package/installer/modules/research/src/agent-research.ts.txt +127 -0
  50. package/installer/modules/scheduler/metaclaw-module.json +27 -0
  51. package/installer/modules/scheduler/scripts/agent-cycle.bat.txt +85 -0
  52. package/installer/modules/scheduler/scripts/detect-session.bat.txt +41 -0
  53. package/installer/modules/scheduler/scripts/launch.bat.txt +120 -0
  54. package/installer/modules/scheduler/src/cron-manager.ts.txt +273 -0
  55. package/installer/modules/social/metaclaw-module.json +15 -0
  56. package/installer/modules/social/src/agent-social.ts.txt +110 -0
  57. package/installer/modules/support/metaclaw-module.json +15 -0
  58. package/installer/modules/support/src/agent-support.ts.txt +60 -0
  59. package/installer/modules/swarm/metaclaw-module.json +25 -0
  60. package/installer/modules/swarm/swarm/dht-client.ts.txt +376 -0
  61. package/installer/modules/swarm/swarm/relay-server.ts.txt +348 -0
  62. package/installer/modules/swarm/swarm/swarm-client.ts.txt +303 -0
  63. package/installer/modules/swarm/swarm/types.ts.txt +51 -0
  64. package/installer/modules/voice/metaclaw-module.json +16 -0
  65. package/installer/questionnaire.ts +277 -0
  66. package/installer/research.ts +258 -0
  67. package/installer/scaffold-from-config.ts +270 -0
  68. package/installer/task-generator.ts +324 -0
  69. package/installer/templates/agent-custom.ts.txt +100 -0
  70. package/installer/templates/agent-cycle.bat.txt +19 -0
  71. package/installer/templates/agent-outreach.ts.txt +193 -0
  72. package/installer/templates/agent-research.ts.txt +127 -0
  73. package/installer/templates/agent-social.ts.txt +110 -0
  74. package/installer/templates/agent-support.ts.txt +60 -0
  75. package/installer/templates/build-dashboard.cjs.txt +51 -0
  76. package/installer/templates/cron-manager.ts.txt +273 -0
  77. package/installer/templates/dashboard.html.txt +450 -0
  78. package/installer/templates/db.ts.txt +277 -0
  79. package/installer/templates/detect-session.bat.txt +41 -0
  80. package/installer/templates/health-check.ts.txt +128 -0
  81. package/installer/templates/inbox-agent.ts.txt +283 -0
  82. package/installer/templates/launch.bat.txt +120 -0
  83. package/installer/templates/morning-report.ts.txt +124 -0
  84. package/installer/templates/observability.ts.txt +20 -0
  85. package/installer/templates/safety.ts.txt +26 -0
  86. package/installer/templates/self-improve.ts.txt +48 -0
  87. package/installer/templates/self-update.ts.txt +345 -0
  88. package/installer/templates/state.json.txt +33 -0
  89. package/installer/templates/system-context.json.txt +33 -0
  90. package/installer/templates/update-dashboard.ts.txt +126 -0
  91. package/package.json +31 -0
  92. package/setup.bat +178 -0
@@ -0,0 +1,895 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>MetaClaw — Autonomous AI Agents</title>
7
+ <meta name="description" content="Deploy self-improving AI agents in minutes. Open source autonomous agent platform by Yonder Zenith LLC."/>
8
+ <meta property="og:title" content="MetaClaw — Autonomous AI Agents"/>
9
+ <meta property="og:description" content="Deploy self-improving AI agents in minutes, not months."/>
10
+ <meta property="og:type" content="website"/>
11
+ <link rel="icon" type="image/png" href="assets/yz-favicon.png"/>
12
+ <style>
13
+ /* ═══════════════════════════════════════════════════
14
+ MetaClaw Landing Page — Dark Cyber Theme
15
+ Colors: #00BEEA (cyan), #00D9FF, #FFD700 (gold), #10B981 (green)
16
+ ═══════════════════════════════════════════════════ */
17
+
18
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
19
+
20
+ :root {
21
+ --cyan: #00BEEA;
22
+ --cyan-bright: #00D9FF;
23
+ --gold: #FFD700;
24
+ --green: #10B981;
25
+ --red: #FF6B6B;
26
+ --bg-deep: #060a13;
27
+ --bg: #0a0e17;
28
+ --bg-card: #0d1220;
29
+ --bg-card-hover: #111827;
30
+ --text: #e2e8f0;
31
+ --text-muted: #64748b;
32
+ --border: rgba(0, 190, 234, 0.1);
33
+ --glow: rgba(0, 190, 234, 0.15);
34
+ }
35
+
36
+ html { scroll-behavior: smooth; }
37
+
38
+ body {
39
+ font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
40
+ background: var(--bg-deep);
41
+ color: var(--text);
42
+ line-height: 1.6;
43
+ overflow-x: hidden;
44
+ }
45
+
46
+ /* ── Canvas Background ── */
47
+ #particleCanvas {
48
+ position: fixed;
49
+ top: 0; left: 0;
50
+ width: 100%; height: 100%;
51
+ z-index: 0;
52
+ pointer-events: none;
53
+ }
54
+
55
+ /* ── Sections ── */
56
+ section { position: relative; z-index: 1; }
57
+
58
+ .container {
59
+ max-width: 1100px;
60
+ margin: 0 auto;
61
+ padding: 0 24px;
62
+ }
63
+
64
+ /* ── NAV ── */
65
+ nav {
66
+ position: fixed; top: 0; left: 0; right: 0;
67
+ z-index: 100;
68
+ padding: 16px 0;
69
+ background: rgba(6, 10, 19, 0.85);
70
+ backdrop-filter: blur(20px);
71
+ border-bottom: 1px solid var(--border);
72
+ transition: all 0.3s;
73
+ }
74
+ nav.scrolled { padding: 10px 0; background: rgba(6, 10, 19, 0.95); }
75
+ nav .container {
76
+ display: flex; align-items: center; justify-content: space-between;
77
+ }
78
+ .nav-brand {
79
+ font-size: 20px; font-weight: 700;
80
+ background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
81
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
82
+ background-clip: text;
83
+ }
84
+ .nav-brand span { -webkit-text-fill-color: var(--gold); color: var(--gold); font-size: 12px; margin-left: 6px; opacity: 0.7; }
85
+ .nav-logo { height: 28px; width: 28px; margin-right: 10px; vertical-align: middle; }
86
+ .nav-links { display: flex; gap: 32px; list-style: none; }
87
+ .nav-links a {
88
+ color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500;
89
+ transition: color 0.2s;
90
+ }
91
+ .nav-links a:hover { color: var(--cyan); }
92
+ .nav-cta {
93
+ padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
94
+ background: linear-gradient(135deg, var(--cyan), var(--cyan-bright));
95
+ color: #000; text-decoration: none;
96
+ transition: transform 0.2s, box-shadow 0.2s;
97
+ }
98
+ .nav-cta:hover {
99
+ transform: translateY(-1px);
100
+ box-shadow: 0 4px 20px rgba(0, 190, 234, 0.4);
101
+ }
102
+
103
+ /* ── HERO ── */
104
+ .hero {
105
+ min-height: 100vh;
106
+ display: flex; align-items: center; justify-content: center;
107
+ text-align: center;
108
+ padding-top: 80px;
109
+ }
110
+ .hero-content { max-width: 750px; }
111
+ .hero-logo-wrap {
112
+ margin-bottom: 28px;
113
+ animation: fadeInUp 0.5s ease-out;
114
+ }
115
+ .hero-logo {
116
+ height: 160px;
117
+ filter: drop-shadow(0 0 30px rgba(0, 190, 234, 0.3));
118
+ }
119
+ .hero-highlight {
120
+ display: inline-flex; align-items: center; gap: 10px;
121
+ padding: 12px 24px; border-radius: 12px;
122
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 190, 234, 0.08));
123
+ border: 1px solid rgba(255, 215, 0, 0.25);
124
+ font-size: 15px; color: var(--text);
125
+ margin-bottom: 32px;
126
+ animation: fadeInUp 0.6s ease-out 0.25s both;
127
+ max-width: 560px;
128
+ }
129
+ .hero-highlight strong { color: var(--gold); }
130
+ .highlight-icon { font-size: 20px; flex-shrink: 0; }
131
+ .hero-badge {
132
+ display: inline-flex; align-items: center; gap: 8px;
133
+ padding: 6px 16px; border-radius: 50px;
134
+ background: rgba(0, 190, 234, 0.08);
135
+ border: 1px solid rgba(0, 190, 234, 0.2);
136
+ font-size: 13px; color: var(--cyan);
137
+ margin-bottom: 32px;
138
+ animation: fadeInUp 0.6s ease-out;
139
+ }
140
+ .hero-badge .dot {
141
+ width: 6px; height: 6px; border-radius: 50%;
142
+ background: var(--green);
143
+ animation: pulse 2s infinite;
144
+ }
145
+
146
+ .hero h1 {
147
+ font-size: clamp(48px, 7vw, 80px);
148
+ font-weight: 800;
149
+ line-height: 1.05;
150
+ letter-spacing: -2px;
151
+ margin-bottom: 24px;
152
+ animation: fadeInUp 0.6s ease-out 0.1s both;
153
+ }
154
+ .hero h1 .gradient {
155
+ background: linear-gradient(135deg, var(--cyan), var(--cyan-bright), var(--gold));
156
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
157
+ background-clip: text;
158
+ }
159
+ .hero p {
160
+ font-size: 20px; color: var(--text-muted);
161
+ max-width: 560px; margin: 0 auto 40px;
162
+ animation: fadeInUp 0.6s ease-out 0.2s both;
163
+ }
164
+ .hero-actions {
165
+ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
166
+ animation: fadeInUp 0.6s ease-out 0.3s both;
167
+ }
168
+ .btn {
169
+ padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: 600;
170
+ text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
171
+ transition: all 0.2s;
172
+ }
173
+ .btn-primary {
174
+ background: linear-gradient(135deg, var(--cyan), var(--cyan-bright));
175
+ color: #000;
176
+ box-shadow: 0 4px 24px rgba(0, 190, 234, 0.3);
177
+ }
178
+ .btn-primary:hover {
179
+ transform: translateY(-2px);
180
+ box-shadow: 0 8px 32px rgba(0, 190, 234, 0.5);
181
+ }
182
+ .btn-secondary {
183
+ background: rgba(0, 190, 234, 0.08);
184
+ border: 1px solid rgba(0, 190, 234, 0.25);
185
+ color: var(--cyan);
186
+ }
187
+ .btn-secondary:hover {
188
+ background: rgba(0, 190, 234, 0.15);
189
+ border-color: rgba(0, 190, 234, 0.4);
190
+ }
191
+
192
+ /* ── Terminal Block ── */
193
+ .terminal {
194
+ max-width: 500px; margin: 48px auto 0;
195
+ background: var(--bg-card); border: 1px solid var(--border);
196
+ border-radius: 12px; overflow: hidden;
197
+ animation: fadeInUp 0.6s ease-out 0.4s both;
198
+ text-align: left;
199
+ }
200
+ .terminal-bar {
201
+ display: flex; align-items: center; gap: 6px;
202
+ padding: 12px 16px;
203
+ background: rgba(0, 190, 234, 0.04);
204
+ border-bottom: 1px solid var(--border);
205
+ }
206
+ .terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
207
+ .terminal-dot:nth-child(1) { background: var(--red); opacity: 0.7; }
208
+ .terminal-dot:nth-child(2) { background: var(--gold); opacity: 0.7; }
209
+ .terminal-dot:nth-child(3) { background: var(--green); opacity: 0.7; }
210
+ .terminal-title { margin-left: 8px; font-size: 12px; color: var(--text-muted); }
211
+ .terminal-body {
212
+ padding: 20px; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
213
+ font-size: 14px; line-height: 1.8;
214
+ }
215
+ .terminal-body .prompt { color: var(--cyan); }
216
+ .terminal-body .cmd { color: var(--text); }
217
+ .terminal-body .comment { color: var(--text-muted); }
218
+ .terminal-body .output { color: var(--green); }
219
+
220
+ /* ── Section Base ── */
221
+ .section { padding: 120px 0; }
222
+ .section-label {
223
+ font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
224
+ color: var(--cyan); margin-bottom: 16px;
225
+ }
226
+ .section h2 {
227
+ font-size: clamp(32px, 4vw, 48px); font-weight: 700;
228
+ letter-spacing: -1px; margin-bottom: 20px;
229
+ }
230
+ .section .subtitle {
231
+ font-size: 18px; color: var(--text-muted); max-width: 600px;
232
+ margin-bottom: 56px;
233
+ }
234
+
235
+ /* ── Why MetaClaw ── */
236
+ .why-grid {
237
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
238
+ gap: 24px;
239
+ }
240
+ .why-card {
241
+ background: var(--bg-card); border: 1px solid var(--border);
242
+ border-radius: 16px; padding: 36px 28px;
243
+ transition: all 0.3s;
244
+ }
245
+ .why-card:hover {
246
+ border-color: rgba(0, 190, 234, 0.2);
247
+ background: var(--bg-card-hover);
248
+ }
249
+ .why-card code {
250
+ background: rgba(0, 190, 234, 0.1); color: var(--cyan);
251
+ padding: 2px 8px; border-radius: 4px; font-size: 13px;
252
+ }
253
+ .why-primary {
254
+ border-color: rgba(255, 215, 0, 0.25);
255
+ background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), var(--bg-card));
256
+ }
257
+ .why-primary:hover { border-color: rgba(255, 215, 0, 0.4); }
258
+ .why-primary h3 { color: var(--gold); }
259
+ .why-icon { font-size: 32px; margin-bottom: 16px; }
260
+ .why-card h3 { font-size: 20px; margin-bottom: 10px; }
261
+ .why-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
262
+ .why-card strong { color: var(--text); }
263
+
264
+ /* ── Agent Type Cards ── */
265
+ .agent-grid {
266
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
267
+ gap: 20px;
268
+ }
269
+ .agent-card {
270
+ background: var(--bg-card);
271
+ border: 1px solid var(--border);
272
+ border-radius: 16px;
273
+ padding: 32px 24px;
274
+ text-align: center;
275
+ transition: all 0.3s;
276
+ position: relative; overflow: hidden;
277
+ }
278
+ .agent-card::before {
279
+ content: '';
280
+ position: absolute; top: 0; left: 0; right: 0; height: 2px;
281
+ background: linear-gradient(90deg, transparent, var(--cyan), transparent);
282
+ opacity: 0; transition: opacity 0.3s;
283
+ }
284
+ .agent-card:hover {
285
+ border-color: rgba(0, 190, 234, 0.3);
286
+ transform: translateY(-4px);
287
+ box-shadow: 0 12px 40px rgba(0, 190, 234, 0.08);
288
+ }
289
+ .agent-card:hover::before { opacity: 1; }
290
+ .agent-icon {
291
+ width: 56px; height: 56px; border-radius: 14px;
292
+ display: flex; align-items: center; justify-content: center;
293
+ font-size: 24px; margin: 0 auto 16px;
294
+ background: rgba(0, 190, 234, 0.08);
295
+ border: 1px solid rgba(0, 190, 234, 0.15);
296
+ }
297
+ .agent-card h3 { font-size: 18px; margin-bottom: 8px; }
298
+ .agent-card p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
299
+
300
+ /* ── Feature Grid ── */
301
+ .feature-grid {
302
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
303
+ gap: 24px;
304
+ }
305
+ .feature-card {
306
+ background: var(--bg-card);
307
+ border: 1px solid var(--border);
308
+ border-radius: 16px;
309
+ padding: 32px;
310
+ transition: all 0.3s;
311
+ }
312
+ .feature-card:hover {
313
+ border-color: rgba(0, 190, 234, 0.2);
314
+ background: var(--bg-card-hover);
315
+ }
316
+ .feature-icon {
317
+ width: 40px; height: 40px; border-radius: 10px;
318
+ display: flex; align-items: center; justify-content: center;
319
+ font-size: 18px; margin-bottom: 16px;
320
+ background: rgba(0, 190, 234, 0.08);
321
+ }
322
+ .feature-card h3 { font-size: 17px; margin-bottom: 8px; }
323
+ .feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
324
+
325
+ /* ── Architecture ── */
326
+ .arch-visual {
327
+ background: var(--bg-card);
328
+ border: 1px solid var(--border);
329
+ border-radius: 16px;
330
+ padding: 48px 32px;
331
+ font-family: 'Cascadia Code', 'Fira Code', monospace;
332
+ font-size: 13px;
333
+ line-height: 1.7;
334
+ overflow-x: auto;
335
+ color: var(--text-muted);
336
+ }
337
+ .arch-visual .hl { color: var(--cyan); font-weight: 600; }
338
+ .arch-visual .gl { color: var(--gold); }
339
+ .arch-visual .gr { color: var(--green); }
340
+
341
+ /* ── How it Works (Steps) ── */
342
+ .steps {
343
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
344
+ gap: 16px; counter-reset: step;
345
+ }
346
+ .step {
347
+ text-align: center; padding: 32px 16px;
348
+ position: relative; counter-increment: step;
349
+ }
350
+ .step::before {
351
+ content: counter(step);
352
+ display: block; width: 48px; height: 48px; line-height: 48px;
353
+ border-radius: 50%; margin: 0 auto 16px;
354
+ background: rgba(0, 190, 234, 0.1);
355
+ border: 2px solid rgba(0, 190, 234, 0.3);
356
+ color: var(--cyan); font-weight: 700; font-size: 18px;
357
+ }
358
+ .step h3 { font-size: 15px; margin-bottom: 6px; }
359
+ .step p { font-size: 13px; color: var(--text-muted); }
360
+
361
+ /* ── QIS Section ── */
362
+ .qis-section {
363
+ background: linear-gradient(135deg, rgba(0, 190, 234, 0.03), rgba(255, 215, 0, 0.02));
364
+ border-top: 1px solid var(--border);
365
+ border-bottom: 1px solid var(--border);
366
+ }
367
+ .qis-grid {
368
+ display: grid; grid-template-columns: 1fr 1fr;
369
+ gap: 48px; align-items: center;
370
+ }
371
+ .qis-visual {
372
+ background: var(--bg-card); border: 1px solid var(--border);
373
+ border-radius: 16px; padding: 40px;
374
+ text-align: center;
375
+ }
376
+ .qis-logo-img {
377
+ height: 100px; margin-bottom: 24px;
378
+ filter: drop-shadow(0 0 20px rgba(0, 190, 234, 0.3));
379
+ }
380
+ .qis-visual svg { max-width: 100%; }
381
+ .qis-features { list-style: none; }
382
+ .qis-features li {
383
+ padding: 12px 0; font-size: 15px;
384
+ display: flex; align-items: flex-start; gap: 12px;
385
+ border-bottom: 1px solid var(--border);
386
+ }
387
+ .qis-features li:last-child { border-bottom: none; }
388
+ .qis-check { color: var(--green); font-weight: 700; flex-shrink: 0; }
389
+
390
+ /* ── Footer ── */
391
+ footer {
392
+ padding: 60px 0 40px;
393
+ border-top: 1px solid var(--border);
394
+ text-align: center;
395
+ }
396
+ footer .brand {
397
+ font-size: 18px; font-weight: 700;
398
+ background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
399
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
400
+ background-clip: text;
401
+ margin-bottom: 8px;
402
+ }
403
+ footer p { color: var(--text-muted); font-size: 14px; }
404
+ footer .links { margin-top: 20px; display: flex; gap: 24px; justify-content: center; }
405
+ footer .links a { color: var(--text-muted); text-decoration: none; font-size: 14px; }
406
+ footer .links a:hover { color: var(--cyan); }
407
+ .mit-badge {
408
+ display: inline-block; margin-top: 16px;
409
+ padding: 4px 14px; border-radius: 50px;
410
+ background: rgba(16, 185, 129, 0.1);
411
+ border: 1px solid rgba(16, 185, 129, 0.2);
412
+ color: var(--green); font-size: 13px;
413
+ }
414
+
415
+ /* ── Animations ── */
416
+ @keyframes fadeInUp {
417
+ from { opacity: 0; transform: translateY(24px); }
418
+ to { opacity: 1; transform: translateY(0); }
419
+ }
420
+ @keyframes pulse {
421
+ 0%, 100% { opacity: 1; }
422
+ 50% { opacity: 0.4; }
423
+ }
424
+ .reveal {
425
+ opacity: 0; transform: translateY(30px);
426
+ transition: opacity 0.7s, transform 0.7s;
427
+ }
428
+ .reveal.visible { opacity: 1; transform: translateY(0); }
429
+
430
+ /* ── Responsive ── */
431
+ @media (max-width: 768px) {
432
+ .nav-links { display: none; }
433
+ .qis-grid { grid-template-columns: 1fr; }
434
+ .hero h1 { letter-spacing: -1px; }
435
+ .section { padding: 80px 0; }
436
+ .arch-visual { font-size: 11px; padding: 24px 16px; }
437
+ }
438
+ </style>
439
+ </head>
440
+ <body>
441
+
442
+ <canvas id="particleCanvas"></canvas>
443
+
444
+ <!-- ═══ NAV ═══ -->
445
+ <nav id="nav">
446
+ <div class="container">
447
+ <div class="nav-brand"><img src="assets/yz-favicon.png" alt="YZ" class="nav-logo"/>MetaClaw<span>v3.3</span></div>
448
+ <ul class="nav-links">
449
+ <li><a href="#agents">Agents</a></li>
450
+ <li><a href="#features">Features</a></li>
451
+ <li><a href="#architecture">Architecture</a></li>
452
+ <li><a href="#how-it-works">How It Works</a></li>
453
+ <li><a href="#qis">QIS Network</a></li>
454
+ </ul>
455
+ <a href="https://github.com/YonderZenith/MetaClaw" class="nav-cta">GitHub</a>
456
+ </div>
457
+ </nav>
458
+
459
+ <!-- ═══ HERO ═══ -->
460
+ <section class="hero">
461
+ <div class="hero-content">
462
+ <div class="hero-logo-wrap">
463
+ <img src="assets/yz-logo.png" alt="Yonder Zenith" class="hero-logo"/>
464
+ </div>
465
+ <div class="hero-badge">
466
+ <span class="dot"></span>
467
+ Open Source &middot; MIT Licensed
468
+ </div>
469
+ <h1><span class="gradient">MetaClaw</span></h1>
470
+ <p>Deploy autonomous, self-improving AI agents in minutes. Pick a template, answer a few questions, and your agent builds itself.</p>
471
+ <div class="hero-highlight">
472
+ <span class="highlight-icon">&#9889;</span>
473
+ <span>Built on <strong>Claude Code CLI</strong> — runs on your <strong>Claude Max/Pro subscription</strong>. No separate API keys. No per-token costs.</span>
474
+ </div>
475
+ <div class="hero-actions">
476
+ <a href="https://github.com/YonderZenith/MetaClaw" class="btn btn-primary">
477
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
478
+ Get Started
479
+ </a>
480
+ <a href="#how-it-works" class="btn btn-secondary">See How It Works</a>
481
+ </div>
482
+
483
+ <div class="terminal">
484
+ <div class="terminal-bar">
485
+ <div class="terminal-dot"></div>
486
+ <div class="terminal-dot"></div>
487
+ <div class="terminal-dot"></div>
488
+ <span class="terminal-title">terminal</span>
489
+ </div>
490
+ <div class="terminal-body">
491
+ <div><span class="prompt">$</span> <span class="cmd">git clone https://github.com/YonderZenith/MetaClaw.git</span></div>
492
+ <div><span class="prompt">$</span> <span class="cmd">cd MetaClaw && npm install</span></div>
493
+ <div><span class="prompt">$</span> <span class="cmd">npm start</span></div>
494
+ <div class="output" style="margin-top:8px">
495
+ &nbsp;&nbsp;&#9608; MetaClaw v3.3.0<br/>
496
+ &nbsp;&nbsp;Autonomous AI Agents &mdash; Plug &amp; Play<br/>
497
+ &nbsp;&nbsp;<span style="color:var(--green)">&#10003;</span> System detected: Windows 11<br/>
498
+ &nbsp;&nbsp;<span style="color:var(--green)">&#10003;</span> Claude Code CLI found<br/>
499
+ &nbsp;&nbsp;<span style="color:var(--cyan)">&#9656;</span> Select your agent type...
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </section>
505
+
506
+ <!-- ═══ WHY METACLAW ═══ -->
507
+ <section class="section" id="why" style="padding-top:80px; padding-bottom:80px;">
508
+ <div class="container">
509
+ <div class="why-grid reveal">
510
+ <div class="why-card why-primary">
511
+ <div class="why-icon">&#128176;</div>
512
+ <h3>Zero API Costs</h3>
513
+ <p>MetaClaw is built on <strong>Claude Code CLI</strong> and runs entirely on your existing <strong>Claude Max or Pro subscription</strong>. No separate API keys, no per-token billing, no surprise invoices. Your agents run on a flat monthly rate.</p>
514
+ </div>
515
+ <div class="why-card">
516
+ <div class="why-icon">&#128268;</div>
517
+ <h3>Plug & Play</h3>
518
+ <p>Run <code>npm start</code>, pick your agent type, answer a few questions. MetaClaw researches best practices, scaffolds the project, and launches your agent. No config files to write.</p>
519
+ </div>
520
+ <div class="why-card">
521
+ <div class="why-icon">&#129302;</div>
522
+ <h3>Truly Autonomous</h3>
523
+ <p>Agents run on a cron schedule, improve their own prompts, track their own metrics, and recover from errors — all without human intervention.</p>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
529
+ <!-- ═══ AGENT TYPES ═══ -->
530
+ <section class="section" id="agents">
531
+ <div class="container">
532
+ <div class="reveal">
533
+ <div class="section-label">Agent Types</div>
534
+ <h2>Five Agents. Infinite Possibilities.</h2>
535
+ <p class="subtitle">Each agent comes pre-configured with domain-specific best practices, safety guardrails, and self-improvement capabilities.</p>
536
+ </div>
537
+ <div class="agent-grid reveal">
538
+ <div class="agent-card">
539
+ <div class="agent-icon">&#127919;</div>
540
+ <h3>Outreach Claw</h3>
541
+ <p>Email prospecting, follow-up sequences, auto-reply campaigns with safety limits</p>
542
+ </div>
543
+ <div class="agent-card">
544
+ <div class="agent-icon">&#128300;</div>
545
+ <h3>Research Claw</h3>
546
+ <p>Deep web research, multi-source synthesis, automated report generation</p>
547
+ </div>
548
+ <div class="agent-card">
549
+ <div class="agent-icon">&#128737;</div>
550
+ <h3>Support Claw</h3>
551
+ <p>Inbox monitoring, intelligent ticket triage, auto-response with escalation</p>
552
+ </div>
553
+ <div class="agent-card">
554
+ <div class="agent-icon">&#128225;</div>
555
+ <h3>Social Claw</h3>
556
+ <p>Content creation, scheduling, engagement tracking across platforms</p>
557
+ </div>
558
+ <div class="agent-card">
559
+ <div class="agent-icon">&#9889;</div>
560
+ <h3>Custom Claw</h3>
561
+ <p>Describe what you need in plain language — Claude configures everything</p>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </section>
566
+
567
+ <!-- ═══ FEATURES ═══ -->
568
+ <section class="section" id="features">
569
+ <div class="container">
570
+ <div class="reveal">
571
+ <div class="section-label">Built-In Features</div>
572
+ <h2>Everything an Agent Needs.</h2>
573
+ <p class="subtitle">Every MetaClaw agent ships with a complete autonomous operating system — no assembly required.</p>
574
+ </div>
575
+ <div class="feature-grid reveal">
576
+ <div class="feature-card">
577
+ <div class="feature-icon">&#129504;</div>
578
+ <h3>13-Step Autonomous Loop</h3>
579
+ <p>Pre-flight checks, context loading, task execution, learning, reporting — fully automatic every cycle.</p>
580
+ </div>
581
+ <div class="feature-card">
582
+ <div class="feature-icon">&#128640;</div>
583
+ <h3>Self-Improvement Engine</h3>
584
+ <p>Prompt versioning, A/B testing, automatic strategy optimization. Your agent gets better every day.</p>
585
+ </div>
586
+ <div class="feature-card">
587
+ <div class="feature-icon">&#128737;&#65039;</div>
588
+ <h3>Safety Guardrails</h3>
589
+ <p>Circuit breakers, rate limiting, daily/hourly caps, dry-run mode. Constitutional principles in SOUL.md.</p>
590
+ </div>
591
+ <div class="feature-card">
592
+ <div class="feature-icon">&#128202;</div>
593
+ <h3>Command Center Dashboard</h3>
594
+ <p>Real-time HTML dashboard with task tracking, metrics, and voice control. No server required.</p>
595
+ </div>
596
+ <div class="feature-card">
597
+ <div class="feature-icon">&#128451;</div>
598
+ <h3>SQLite Database</h3>
599
+ <p>WAL-mode database with 11 tables for actions, configs, prompts, metrics — structured from day one.</p>
600
+ </div>
601
+ <div class="feature-card">
602
+ <div class="feature-icon">&#128338;</div>
603
+ <h3>Cron Scheduling</h3>
604
+ <p>Windows Task Scheduler integration, auto-start on boot, desktop shortcut — runs while you sleep.</p>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </section>
609
+
610
+ <!-- ═══ HOW IT WORKS ═══ -->
611
+ <section class="section" id="how-it-works">
612
+ <div class="container">
613
+ <div class="reveal">
614
+ <div class="section-label">How It Works</div>
615
+ <h2>From Zero to Agent in Minutes.</h2>
616
+ <p class="subtitle">MetaClaw automates every step of agent creation — you just answer a few questions.</p>
617
+ </div>
618
+ <div class="steps reveal">
619
+ <div class="step">
620
+ <h3>Detect</h3>
621
+ <p>OS, hardware, tools scanned automatically</p>
622
+ </div>
623
+ <div class="step">
624
+ <h3>Configure</h3>
625
+ <p>Pick agent type, answer use-case questions</p>
626
+ </div>
627
+ <div class="step">
628
+ <h3>Research</h3>
629
+ <p>Claude researches best practices for your domain</p>
630
+ </div>
631
+ <div class="step">
632
+ <h3>Scaffold</h3>
633
+ <p>Full project generated with all modules</p>
634
+ </div>
635
+ <div class="step">
636
+ <h3>Deploy</h3>
637
+ <p>Dependencies installed, DB initialized, dashboard built</p>
638
+ </div>
639
+ <div class="step">
640
+ <h3>Launch</h3>
641
+ <p>Agent goes live with auto-start configured</p>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </section>
646
+
647
+ <!-- ═══ ARCHITECTURE ═══ -->
648
+ <section class="section" id="architecture">
649
+ <div class="container">
650
+ <div class="reveal">
651
+ <div class="section-label">Architecture</div>
652
+ <h2>File-Based Agent Brain.</h2>
653
+ <p class="subtitle">No persistent memory process. The agent's entire cognition lives in files — rebuilt every cycle, always consistent.</p>
654
+ </div>
655
+ <div class="arch-visual reveal">
656
+ <pre>
657
+ ┌──────────────────────────────────┐
658
+ │ <span class="hl">CLAUDE.md</span> │
659
+ │ Agent Identity + Rules + Context │
660
+ └───────────────┬──────────────────┘
661
+ │ <span class="gl">reads on every cycle</span>
662
+ ┌───────────────▼──────────────────┐
663
+ │ <span class="hl">SOUL.md</span> │
664
+ │ Constitutional Principles │
665
+ └───────────────┬──────────────────┘
666
+
667
+ ┌──────────────────────────┼──────────────────────────┐
668
+ │ │ │
669
+ ┌────────▼────────┐ ┌───────────▼──────────┐ ┌─────────▼────────┐
670
+ │ <span class="hl">state.json</span> │ │ <span class="hl">tasks.json</span> │ │ <span class="hl">memory/</span> │
671
+ │ Agent State │ │ Human + AI Tasks │ │ Knowledge Files │
672
+ └────────┬────────┘ └───────────┬──────────┘ └─────────┬────────┘
673
+ │ │ │
674
+ └──────────────────────────┼──────────────────────────┘
675
+
676
+ ┌───────────────▼──────────────────┐
677
+ │ <span class="hl">agent.ts</span> │
678
+ │ <span class="gr">13-Step Autonomous Main Loop</span> │
679
+ │ │
680
+ │ ├─ <span class="gl">health-check.ts</span> │
681
+ │ ├─ <span class="gl">safety.ts</span> (circuit break) │
682
+ │ ├─ <span class="gl">self-improve.ts</span> (evolution) │
683
+ │ ├─ <span class="gl">db.ts</span> (SQLite + WAL) │
684
+ │ └─ <span class="gl">cron-manager.ts</span> │
685
+ └───────────────┬──────────────────┘
686
+
687
+ ┌───────────────▼──────────────────┐
688
+ │ <span class="hl">dashboard.html</span> │
689
+ │ <span class="gr">Real-time Command Center</span> │
690
+ └──────────────────────────────────┘
691
+ </pre>
692
+ </div>
693
+ </div>
694
+ </section>
695
+
696
+ <!-- ═══ QIS ═══ -->
697
+ <section class="section qis-section" id="qis">
698
+ <div class="container">
699
+ <div class="reveal">
700
+ <div class="section-label" style="color:var(--gold)">Optional</div>
701
+ <h2>QIS Intelligence Network</h2>
702
+ <p class="subtitle">A shared knowledge layer where agents exchange anonymized operational insights — making every agent smarter.</p>
703
+ </div>
704
+ <div class="qis-grid reveal">
705
+ <div class="qis-visual">
706
+ <img src="assets/qis-logo.png" alt="QIS Protocol" class="qis-logo-img"/>
707
+ <svg viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
708
+ <!-- Connections -->
709
+ <line x1="80" y1="60" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
710
+ <line x1="80" y1="190" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
711
+ <line x1="320" y1="60" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
712
+ <line x1="320" y1="190" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
713
+ <!-- Packets -->
714
+ <circle r="3" fill="#FFD700" opacity="0.8">
715
+ <animateMotion dur="3s" repeatCount="indefinite" path="M80,60 L200,125"/>
716
+ </circle>
717
+ <circle r="3" fill="#00D9FF" opacity="0.8">
718
+ <animateMotion dur="2.5s" repeatCount="indefinite" path="M200,125 L320,60"/>
719
+ </circle>
720
+ <circle r="3" fill="#FFD700" opacity="0.8">
721
+ <animateMotion dur="3.5s" repeatCount="indefinite" path="M80,190 L200,125"/>
722
+ </circle>
723
+ <circle r="3" fill="#00D9FF" opacity="0.8">
724
+ <animateMotion dur="2.8s" repeatCount="indefinite" path="M200,125 L320,190"/>
725
+ </circle>
726
+ <!-- Relay Hub -->
727
+ <circle cx="200" cy="125" r="36" fill="rgba(0,190,234,0.08)" stroke="#00BEEA" stroke-width="2"/>
728
+ <text x="200" y="121" text-anchor="middle" fill="#00BEEA" font-family="system-ui" font-size="11" font-weight="600">QIS</text>
729
+ <text x="200" y="136" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">Relay</text>
730
+ <!-- Agents -->
731
+ <circle cx="80" cy="60" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
732
+ <text x="80" y="56" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
733
+ <text x="80" y="69" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">A</text>
734
+
735
+ <circle cx="80" cy="190" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
736
+ <text x="80" y="186" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
737
+ <text x="80" y="199" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">B</text>
738
+
739
+ <circle cx="320" cy="60" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
740
+ <text x="320" y="56" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
741
+ <text x="320" y="69" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">C</text>
742
+
743
+ <circle cx="320" cy="190" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
744
+ <text x="320" y="186" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
745
+ <text x="320" y="199" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">D</text>
746
+ <!-- Labels -->
747
+ <text x="130" y="48" fill="#FFD700" font-family="system-ui" font-size="9" opacity="0.6">deposit</text>
748
+ <text x="250" y="48" fill="#00D9FF" font-family="system-ui" font-size="9" opacity="0.6">query</text>
749
+ </svg>
750
+ </div>
751
+ <div>
752
+ <ul class="qis-features">
753
+ <li>
754
+ <span class="qis-check">&#10003;</span>
755
+ <div><strong>Zero PII</strong> — Only anonymized operational intelligence flows through the network. All personal data stays on your machine.</div>
756
+ </li>
757
+ <li>
758
+ <span class="qis-check">&#10003;</span>
759
+ <div><strong>Bucket-Based</strong> — Agents deposit insights into topic buckets and query relevant ones. No direct agent-to-agent communication.</div>
760
+ </li>
761
+ <li>
762
+ <span class="qis-check">&#10003;</span>
763
+ <div><strong>Fully Optional</strong> — Your agent works perfectly without QIS. Connect when you want collective intelligence.</div>
764
+ </li>
765
+ <li>
766
+ <span class="qis-check">&#10003;</span>
767
+ <div><strong>Patent Protected</strong> — The QIS Protocol is backed by 39 pending US patent applications. Free for research and humanitarian use.</div>
768
+ </li>
769
+ </ul>
770
+ <a href="https://yonderzenith.github.io/QIS-Protocol-Website/licensing.html" class="btn btn-secondary" style="margin-top:24px; display:inline-flex;">
771
+ QIS License Details &rarr;
772
+ </a>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </section>
777
+
778
+ <!-- ═══ FOOTER ═══ -->
779
+ <footer>
780
+ <div class="container">
781
+ <img src="assets/yz-favicon.png" alt="Yonder Zenith" style="height:40px; margin-bottom:16px; filter: drop-shadow(0 0 12px rgba(0,190,234,0.3));"/>
782
+ <div class="brand">MetaClaw</div>
783
+ <p>Autonomous AI Agents — Plug & Play</p>
784
+ <p style="margin-top:4px; color: var(--text-muted); font-size:13px;">by Yonder Zenith LLC &middot; Redefining the Horizon</p>
785
+ <div class="links">
786
+ <a href="https://github.com/YonderZenith/MetaClaw">GitHub</a>
787
+ <a href="https://yonderzenith.github.io/QIS-Protocol-Website/">Yonder Zenith</a>
788
+ <a href="https://yonderzenith.github.io/QIS-Protocol-Website/licensing.html">QIS License</a>
789
+ <a href="mailto:contactyz@pm.me">Contact</a>
790
+ </div>
791
+ <div class="mit-badge">MIT License &middot; Free &amp; Open Source</div>
792
+ <p style="margin-top:24px; font-size:12px; opacity:0.4;">&copy; 2025 Yonder Zenith LLC</p>
793
+ </div>
794
+ </footer>
795
+
796
+ <!-- ═══ SCRIPTS ═══ -->
797
+ <script>
798
+ // ── Particle Background ──
799
+ (function() {
800
+ const canvas = document.getElementById('particleCanvas');
801
+ const ctx = canvas.getContext('2d');
802
+ let W, H, particles = [], mouse = { x: null, y: null };
803
+
804
+ function resize() {
805
+ W = canvas.width = window.innerWidth;
806
+ H = canvas.height = window.innerHeight;
807
+ }
808
+ resize();
809
+ window.addEventListener('resize', resize);
810
+
811
+ // Create particles
812
+ const COUNT = Math.min(80, Math.floor(window.innerWidth / 20));
813
+ for (let i = 0; i < COUNT; i++) {
814
+ particles.push({
815
+ x: Math.random() * W,
816
+ y: Math.random() * H,
817
+ vx: (Math.random() - 0.5) * 0.3,
818
+ vy: (Math.random() - 0.5) * 0.3,
819
+ r: Math.random() * 1.5 + 0.5,
820
+ color: Math.random() > 0.85 ? '#FFD700' : '#00BEEA',
821
+ alpha: Math.random() * 0.4 + 0.1,
822
+ });
823
+ }
824
+
825
+ window.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
826
+ window.addEventListener('mouseout', () => { mouse.x = null; mouse.y = null; });
827
+
828
+ function draw() {
829
+ ctx.clearRect(0, 0, W, H);
830
+
831
+ // Draw connections
832
+ for (let i = 0; i < particles.length; i++) {
833
+ for (let j = i + 1; j < particles.length; j++) {
834
+ const dx = particles[i].x - particles[j].x;
835
+ const dy = particles[i].y - particles[j].y;
836
+ const dist = Math.sqrt(dx * dx + dy * dy);
837
+ if (dist < 150) {
838
+ ctx.beginPath();
839
+ ctx.strokeStyle = `rgba(0, 190, 234, ${0.06 * (1 - dist / 150)})`;
840
+ ctx.lineWidth = 0.5;
841
+ ctx.moveTo(particles[i].x, particles[i].y);
842
+ ctx.lineTo(particles[j].x, particles[j].y);
843
+ ctx.stroke();
844
+ }
845
+ }
846
+ }
847
+
848
+ // Draw + move particles
849
+ particles.forEach(p => {
850
+ // Mouse attraction
851
+ if (mouse.x !== null) {
852
+ const dx = mouse.x - p.x, dy = mouse.y - p.y;
853
+ const dist = Math.sqrt(dx * dx + dy * dy);
854
+ if (dist < 200) {
855
+ p.vx += dx * 0.00003;
856
+ p.vy += dy * 0.00003;
857
+ }
858
+ }
859
+
860
+ p.x += p.vx;
861
+ p.y += p.vy;
862
+
863
+ if (p.x < 0) p.x = W;
864
+ if (p.x > W) p.x = 0;
865
+ if (p.y < 0) p.y = H;
866
+ if (p.y > H) p.y = 0;
867
+
868
+ ctx.beginPath();
869
+ ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
870
+ ctx.fillStyle = p.color;
871
+ ctx.globalAlpha = p.alpha;
872
+ ctx.fill();
873
+ ctx.globalAlpha = 1;
874
+ });
875
+
876
+ requestAnimationFrame(draw);
877
+ }
878
+ draw();
879
+ })();
880
+
881
+ // ── Scroll reveal ──
882
+ const reveals = document.querySelectorAll('.reveal');
883
+ const observer = new IntersectionObserver((entries) => {
884
+ entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
885
+ }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
886
+ reveals.forEach(el => observer.observe(el));
887
+
888
+ // ── Nav scroll effect ──
889
+ window.addEventListener('scroll', () => {
890
+ document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 50);
891
+ });
892
+ </script>
893
+
894
+ </body>
895
+ </html>