-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
393 lines (349 loc) · 22.1 KB
/
Copy pathindex.html
File metadata and controls
393 lines (349 loc) · 22.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modular Life Sim • Gooboberti</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
body {
font-family: 'Inter', system_ui, sans-serif;
}
.font-display {
font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
font-weight: 600;
}
.section-header {
font-size: 0.875rem;
letter-spacing: 2px;
font-weight: 600;
}
.nav-link {
transition: all 0.2s ease;
}
.nav-link:hover {
color: #a5b4fc;
}
.feature-card {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.module-pill {
display: inline-block;
padding: 0.2rem 0.65rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
margin: 0.1rem;
}
.deep-section {
scroll-margin-top: 80px;
}
</style>
</head>
<body class="bg-[#0a0a0f] text-[#e0e0ea]">
<!-- Navbar -->
<nav class="border-b border-white/10 bg-[#0a0a0f]/95 backdrop-blur-lg sticky top-0 z-50">
<div class="max-w-screen-2xl mx-auto px-8 py-5 flex items-center justify-between">
<div class="flex items-center gap-x-4">
<div class="flex items-center gap-x-3">
<div class="w-9 h-9 rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center">
<i class="fa-solid fa-infinity text-[#0a0a0f] text-xl"></i>
</div>
<div>
<span class="font-display text-2xl tracking-tighter font-semibold">Modular Life Sim</span>
<span class="ml-2 text-xs text-white/50">by Gooboberti</span>
</div>
</div>
</div>
<div class="flex items-center gap-x-6 text-sm">
<a href="#vision" class="nav-link hidden md:block">Vision</a>
<a href="#how-it-works" class="nav-link hidden md:block">How It Works</a>
<a href="#experiments" class="nav-link hidden md:block">Experiments</a>
<a href="minisimmy2-roadmap.html"
class="px-5 py-2 rounded-2xl border border-white/20 hover:bg-white/5 flex items-center gap-x-2 text-sm transition-all">
<i class="fa-solid fa-map"></i>
<span>Roadmap</span>
</a>
<a href="minisimmy2.html"
class="px-6 py-2.5 rounded-2xl bg-emerald-500 hover:bg-emerald-600 text-[#0a0a0f] font-semibold flex items-center gap-x-2 text-sm transition-all active:scale-[0.985]">
<i class="fa-solid fa-play"></i>
<span>Play MiniSimmy2</span>
</a>
</div>
</div>
</nav>
<!-- Hero -->
<div class="max-w-screen-2xl mx-auto px-8 pt-20 pb-16">
<div class="max-w-4xl">
<div class="flex items-center gap-x-3 mb-6">
<div class="px-4 py-1.5 rounded-3xl bg-white/5 border border-white/10 text-sm flex items-center gap-x-2">
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
Active Development • v2.12+
</div>
</div>
<h1 class="font-display text-7xl tracking-tighter leading-none mb-6">
What if intelligence<br>
could emerge across<br>
<span class="text-emerald-400">multiple scales?</span>
</h1>
<p class="max-w-2xl text-2xl text-white/70 mb-10">
An open-ended evolutionary simulation exploring persistent identity,
collective behavior, and the conditions for higher-order agency.
</p>
<div class="flex flex-wrap gap-4">
<a href="minisimmy2.html"
class="px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-[#0a0a0f] font-semibold rounded-3xl flex items-center gap-x-3 transition-all text-lg">
<i class="fa-solid fa-play mr-1"></i>
<span>Play MiniSimmy2</span>
</a>
<a href="minisimmy2-roadmap.html"
class="px-8 py-4 border border-white/20 hover:bg-white/5 rounded-3xl flex items-center gap-x-3 transition-all text-lg">
<span>View Full Roadmap</span>
</a>
</div>
</div>
</div>
<!-- Vision -->
<div id="vision" class="max-w-screen-2xl mx-auto px-8 py-16 border-t border-white/10 deep-section">
<div class="max-w-4xl">
<div class="section-header mb-3 tracking-[2px]">THE VISION</div>
<h2 class="font-display text-6xl tracking-tighter mb-8 leading-none">
Beyond individual agents.<br>
Toward genuine multi-scale intelligence.
</h2>
<div class="max-w-3xl text-xl text-white/80 space-y-6">
<p>
Most artificial life projects focus on evolving better individual creatures.
This project takes a fundamentally different approach: it explores what happens
when complexity is allowed to stack across multiple layers of organization.
</p>
<p>
The goal is not just more sophisticated agents, but the emergence of
<span class="text-emerald-400 font-medium">higher-order entities</span> —
structures that contain other complex structures, with their own identity, goals, and internal dynamics.
</p>
<p>
This is the path toward <strong>Thronglet-level emergence</strong>:
recursive, multi-scale beings capable of genuine collective agency, culture,
and open-ended evolution.
</p>
</div>
</div>
</div>
<!-- How It Works -->
<div id="how-it-works" class="max-w-screen-2xl mx-auto px-8 py-16 border-t border-white/10 deep-section bg-[#111113]">
<div class="max-w-6xl mx-auto">
<div class="section-header mb-3 tracking-[2px]">HOW IT WORKS</div>
<h2 class="font-display text-5xl tracking-tighter mb-10">Core Systems of MiniSimmy2</h2>
<div class="grid md:grid-cols-2 gap-6">
<!-- Creatures & Modules -->
<div class="bg-[#0a0a0f] border border-white/10 rounded-3xl p-8 feature-card">
<h3 class="font-semibold text-2xl mb-4 flex items-center gap-x-3">
<i class="fa-solid fa-paw text-emerald-400"></i>
<span>Creatures & Modules</span>
</h3>
<p class="text-white/80 mb-5">
Every creature carries a combination of <strong>modules</strong> that shape its behavior, strengths, and role in the ecosystem. Modules can be upgraded through merging into higher tiers.
</p>
<div class="grid grid-cols-2 gap-2 text-xs">
<div class="module-pill bg-emerald-500/10 text-emerald-400"><strong>Harvester</strong></div>
<div class="module-pill bg-sky-500/10 text-sky-400"><strong>Sensor</strong></div>
<div class="module-pill bg-violet-500/10 text-violet-400"><strong>Mover</strong></div>
<div class="module-pill bg-pink-500/10 text-pink-400"><strong>Resistant</strong></div>
<div class="module-pill bg-amber-500/10 text-amber-400"><strong>Explorer</strong></div>
<div class="module-pill bg-purple-500/10 text-purple-400"><strong>Communicator</strong></div>
</div>
<p class="text-xs text-white/50 mt-4">Modules create strong selection pressure for physical form, behavior, and specialization.</p>
</div>
<!-- Neural Brain -->
<div class="bg-[#0a0a0f] border border-white/10 rounded-3xl p-8 feature-card">
<h3 class="font-semibold text-2xl mb-4 flex items-center gap-x-3">
<i class="fa-solid fa-brain text-violet-400"></i>
<span>Neural Brain System</span>
</h3>
<p class="text-white/80 mb-4">
Every creature has a small neural network that makes real-time decisions. The brain is copied to offspring and mutated during reproduction. This creates heritable "personalities" and decision-making styles across generations.
</p>
<div class="text-xs text-white/60">
Brains influence food drive, hazard avoidance, vortex escape, social behavior, exploration, reproduction will, and predator tendency.
</div>
</div>
<!-- Lifespan & Age -->
<div class="bg-[#0a0a0f] border border-white/10 rounded-3xl p-8 feature-card">
<h3 class="font-semibold text-2xl mb-4 flex items-center gap-x-3">
<i class="fa-solid fa-clock text-pink-400"></i>
<span>Lifespan & Aging</span>
</h3>
<p class="text-white/80 mb-4">
Creatures now have dynamic lifespans. Higher-generation creatures live longer by default.
<strong>Resistant</strong> modules add bonus lifespan, creating meaningful trade-offs between survival and mobility.
</p>
<div class="text-xs text-white/60">
Aging visibly affects movement speed and appearance. Death from old age is now a natural part of the simulation.
</div>
</div>
<!-- Gene Vault -->
<div class="bg-[#0a0a0f] border border-white/10 rounded-3xl p-8 feature-card">
<h3 class="font-semibold text-2xl mb-4 flex items-center gap-x-3">
<i class="fa-solid fa-dna text-amber-400"></i>
<span>Gene Vault & Bloodlines</span>
</h3>
<p class="text-white/80 mb-4">
Extract high-performing creatures into eggs and store them permanently across Prestige resets.
The Vault preserves both modules and neural brains, allowing you to cultivate powerful lineages over many runs.
</p>
<div class="text-xs text-white/60">
This is the core long-term progression system of the project.
</div>
</div>
</div>
</div>
</div>
<!-- Emergence -->
<div class="max-w-screen-2xl mx-auto px-8 py-16 border-t border-white/10 deep-section">
<div class="max-w-4xl">
<div class="section-header mb-3 tracking-[2px]">EMERGENT BEHAVIOR</div>
<h2 class="font-display text-5xl tracking-tighter mb-8">What Actually Emerges</h2>
<div class="grid md:grid-cols-2 gap-x-12 gap-y-8 text-lg text-white/80">
<div>
<h4 class="font-semibold text-white mb-2">Role Specialization</h4>
<p class="text-sm">Creatures naturally differentiate into Foragers, Survivors, Explorers, and Social Coordinators through module interaction and selection pressure — not hardcoded roles.</p>
</div>
<div>
<h4 class="font-semibold text-white mb-2">Social Grouping & Pressure</h4>
<p class="text-sm">Communicator modules create pheromone clusters. Large groups can trigger predator conversion pressure, favoring certain bloodlines.</p>
</div>
<div>
<h4 class="font-semibold text-white mb-2">Vortex Mastery</h4>
<p class="text-sm">Strong Mover and Explorer modules enable escape from the central vortex or strategic edge positioning, creating spatial niches.</p>
</div>
<div>
<h4 class="font-semibold text-white mb-2">Persistent Bloodlines</h4>
<p class="text-sm">Through the Gene Vault, successful genomes and brains persist across Prestige resets, enabling deliberate long-term lineage development.</p>
</div>
</div>
</div>
</div>
<!-- Experiments Section -->
<div id="experiments" class="max-w-screen-2xl mx-auto px-8 py-16 border-t border-white/10 deep-section">
<div class="max-w-6xl mx-auto">
<div class="flex items-end justify-between mb-8">
<div>
<div class="section-header mb-2 tracking-[2px]">EXPERIMENTS & TOOLS</div>
<h2 class="font-display text-5xl tracking-tighter">Interactive Projects</h2>
</div>
<a href="minisimmy2-roadmap.html" class="hidden md:flex items-center gap-x-2 text-sm text-emerald-400 hover:text-emerald-300">
View Full Development Roadmap <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
<!-- MiniSimmy2 -->
<a href="minisimmy2.html" class="group block bg-[#121218] border border-white/10 rounded-3xl p-6 hover:border-emerald-400/40 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-solid fa-atom text-2xl text-emerald-400"></i>
<div>
<div class="font-semibold text-xl">MiniSimmy2</div>
<div class="text-xs text-emerald-400/70">MAIN SIMULATION</div>
</div>
</div>
<p class="text-white/70 text-sm">The current flagship modular evolution simulation. Navigate the vortex, evolve specialized modules, preserve bloodlines in the Gene Vault, and push high scores with Prestige and Furnace systems.</p>
<div class="mt-5 text-xs text-emerald-400 group-hover:underline flex items-center gap-x-1">Play Now →</div>
</a>
<!-- MiniSimmy3 -->
<a href="https://gooboberti.github.io/ModularLifeSim/minisimmy3/" class="group block bg-[#121218] border border-white/10 rounded-3xl p-6 hover:border-sky-400/40 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-solid fa-atom text-2xl text-sky-400"></i>
<div>
<div class="font-semibold text-xl">MiniSimmy3</div>
<div class="text-xs text-sky-400/70">IN DEVELOPMENT</div>
</div>
</div>
<p class="text-white/70 text-sm">Next-generation modular rebuild with cleaner architecture, improved Gene Vault, better neural visualization, and more modular code for rapid iteration.</p>
<div class="mt-5 text-xs text-sky-400 group-hover:underline flex items-center gap-x-1">View Progress →</div>
</a>
<!-- Neural Toy -->
<a href="neural_forager.html" class="group block bg-[#121218] border border-white/10 rounded-3xl p-6 hover:border-violet-400/40 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-solid fa-brain text-2xl text-violet-400"></i>
<div class="font-semibold text-xl">Mini Simmy Neural Toy</div>
</div>
<p class="text-white/70 text-sm">Tiny interactive neural toy. Watch two brains think in real time with beautiful layered harmonic sounds. Educational and musical.</p>
<div class="mt-5 text-xs text-violet-400 group-hover:underline flex items-center gap-x-1">Play Now →</div>
</a>
<!-- Echoes -->
<a href="echoes.html" class="group block bg-[#121218] border border-white/10 rounded-3xl p-6 hover:border-rose-400/40 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-solid fa-heart-pulse text-2xl text-rose-400"></i>
<div class="font-semibold text-xl">Echoes</div>
</div>
<p class="text-white/70 text-sm">A creature whose memory and emotional state (fear, curiosity, contentment) visibly influence its behavior and decisions.</p>
<div class="mt-5 text-xs text-rose-400 group-hover:underline flex items-center gap-x-1">Play Now →</div>
</a>
<!-- Chrono Lounge -->
<a href="chrono-lounge.html" class="group block bg-[#121218] border border-white/10 rounded-3xl p-6 hover:border-amber-400/40 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-solid fa-clock text-2xl text-amber-400"></i>
<div class="font-semibold text-xl">Chrono Lounge <span class="text-xs align-super text-amber-400/70">NEW</span></div>
</div>
<p class="text-white/70 text-sm">Immersive living room graphical countdown timer with customizable themes, analog clock, and mouse-depth interaction. Great for focus and streams.</p>
<div class="mt-5 text-xs text-amber-400 group-hover:underline flex items-center gap-x-1">Open Timer →</div>
</a>
<!-- 3D Forge -->
<a href="3d-forge.html" class="group block bg-[#121218] border border-white/10 rounded-3xl p-6 hover:border-cyan-400/40 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-solid fa-cube text-2xl text-cyan-400"></i>
<div class="font-semibold text-xl">3D Forge <span class="text-xs align-super text-cyan-400/70">NEW</span></div>
</div>
<p class="text-white/70 text-sm">Interactive 3D model viewer with excellent OrbitControls, live material editing, AI skin prompt generator, and upload support.</p>
<div class="mt-5 text-xs text-cyan-400 group-hover:underline flex items-center gap-x-1">Open Viewer →</div>
</a>
<!-- Nexus Visualizer -->
<a href="nexus-visualizer.html" class="group block bg-[#121218] border border-white/10 rounded-3xl p-6 hover:border-indigo-400/40 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-solid fa-project-diagram text-2xl text-indigo-400"></i>
<div class="font-semibold text-xl">Nexus Visualizer <span class="text-xs align-super text-indigo-400/70">NEW</span></div>
</div>
<p class="text-white/70 text-sm">Interactive visualizer for exploring neural networks, module connections, brain activity, and emergent patterns across creature populations in real time.</p>
<div class="mt-5 text-xs text-indigo-400 group-hover:underline flex items-center gap-x-1">Open Visualizer →</div>
</a>
</div>
</div>
</div>
<!-- Roadmap Teaser -->
<div class="max-w-screen-2xl mx-auto px-8 py-16 border-t border-white/10 bg-[#111113]">
<div class="max-w-4xl mx-auto text-center">
<div class="section-header mb-3 tracking-[2px]">LONG-TERM VISION</div>
<h2 class="font-display text-5xl tracking-tighter mb-6">The Path to Thronglet Emergence</h2>
<p class="max-w-2xl mx-auto text-white/70 mb-8">
A structured, phased plan for evolving from current modular creatures toward genuine multi-scale collective intelligence.
</p>
<a href="minisimmy2-roadmap.html"
class="inline-flex items-center gap-x-3 px-8 py-4 rounded-3xl border border-white/20 hover:bg-white/5 text-lg transition-all">
<span>Read the Full Modular Evolution Roadmap</span>
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Footer -->
<footer class="border-t border-white/10 py-10 text-sm text-white/50">
<div class="max-w-screen-2xl mx-auto px-8 flex flex-col md:flex-row justify-between gap-y-4 items-center">
<div>
Modular Life Sim — Exploring the conditions for multi-scale emergent intelligence.<br>
<span class="text-xs">MiniSimmy2 is the current playable prototype.</span>
</div>
<div class="flex items-center gap-x-6">
<a href="https://x.com/Gooboberti" target="_blank" class="hover:text-white"><i class="fa-brands fa-x-twitter text-lg"></i></a>
<a href="https://youtube.com/@Gooboberti" target="_blank" class="hover:text-white"><i class="fa-brands fa-youtube text-lg"></i></a>
<a href="https://github.com/Gooboberti/ModularLifeSim" target="_blank" class="hover:text-white"><i class="fa-brands fa-github text-lg"></i></a>
</div>
</div>
</footer>
</body>
</html>