898 lines
33 KiB
HTML
898 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>mycopunk.xyz — Welcome Home</title>
|
|
<meta name="description" content="Mycopunk: regenerative, distributed, anti-fragile systems inspired by mycelial networks. Building from beneath the surface.">
|
|
<meta property="og:title" content="mycopunk.xyz — Welcome Home">
|
|
<meta property="og:description" content="If you found this, you were already looking. Underground networks, emergent possibilities.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://mycopunk.xyz">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍄</text></svg>">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
|
|
|
|
:root {
|
|
--primary: #D27D2D;
|
|
--secondary: #8E4A1B;
|
|
--accent: #E6B17E;
|
|
--bg: #0D0804;
|
|
--bg-surface: #1A1006;
|
|
--text: #F5E6D8;
|
|
--text-dim: #9E8B7A;
|
|
--mycelium-light: #FFC38B;
|
|
--mycelium-medium: #D9864D;
|
|
--glow: rgba(210, 125, 45, 0.15);
|
|
--border: rgba(210, 125, 45, 0.2);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Space Grotesk', -apple-system, sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--primary);
|
|
color: var(--bg);
|
|
}
|
|
|
|
a { color: var(--accent); text-decoration: none; transition: all 0.3s ease; }
|
|
a:hover { color: var(--mycelium-light); }
|
|
|
|
/* ── Mycelium Canvas ── */
|
|
#mycelium-canvas {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* ── Sections ── */
|
|
section {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 5rem 2rem;
|
|
}
|
|
|
|
.section-inner {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ── Hero ── */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.hero-welcome {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 6px;
|
|
text-transform: uppercase;
|
|
color: var(--text-dim);
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease 0.3s forwards;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(2.5rem, 7vw, 5rem);
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--primary), var(--mycelium-light), var(--accent));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
letter-spacing: -2px;
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease 0.5s forwards;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
|
|
font-weight: 300;
|
|
color: var(--accent);
|
|
max-width: 600px;
|
|
margin-bottom: 1rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease 0.7s forwards;
|
|
}
|
|
|
|
.hero-subtext {
|
|
font-size: 1rem;
|
|
color: var(--text-dim);
|
|
font-style: italic;
|
|
max-width: 500px;
|
|
margin-bottom: 3rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease 0.9s forwards;
|
|
}
|
|
|
|
.hero-nav {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease 1.1s forwards;
|
|
}
|
|
|
|
.hero-nav a {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.85rem;
|
|
padding: 0.6rem 1.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 100px;
|
|
color: var(--accent);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hero-nav a:hover {
|
|
background: var(--primary);
|
|
color: var(--bg);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease 1.5s forwards;
|
|
}
|
|
|
|
.scroll-hint span {
|
|
display: block;
|
|
width: 1px;
|
|
height: 40px;
|
|
background: linear-gradient(to bottom, var(--primary), transparent);
|
|
margin: 0 auto;
|
|
animation: pulse-line 2s ease infinite;
|
|
}
|
|
|
|
@keyframes pulse-line {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
/* ── Dividers ── */
|
|
.divider {
|
|
text-align: center;
|
|
padding: 2rem 0;
|
|
color: var(--text-dim);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 8px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ── Manifesto ── */
|
|
.manifesto {
|
|
background: radial-gradient(ellipse at center, rgba(210, 125, 45, 0.05) 0%, transparent 70%);
|
|
}
|
|
|
|
.manifesto-text {
|
|
font-size: clamp(1.1rem, 2vw, 1.35rem);
|
|
line-height: 2;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.manifesto-text p {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.manifesto-text em {
|
|
color: var(--accent);
|
|
font-style: normal;
|
|
}
|
|
|
|
.manifesto-text strong {
|
|
color: var(--mycelium-light);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── Principles ── */
|
|
.principles-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.principles-header h2 {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
|
color: var(--primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.principles-header p {
|
|
color: var(--text-dim);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.principles-image {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.principles-image img {
|
|
max-width: 100%;
|
|
width: 800px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 0 60px var(--glow);
|
|
}
|
|
|
|
.principles-image a {
|
|
display: inline-block;
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.principles-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.principle-card {
|
|
background: rgba(26, 16, 6, 0.6);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
transition: all 0.4s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.principle-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 3px;
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.principle-card:hover {
|
|
transform: translateY(-3px);
|
|
border-color: var(--primary);
|
|
box-shadow: 0 8px 30px var(--glow);
|
|
}
|
|
|
|
.principle-card:hover::before { opacity: 1; }
|
|
|
|
.principle-number {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--text-dim);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.principle-name {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--mycelium-light);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.principle-desc {
|
|
font-size: 0.9rem;
|
|
color: var(--text-dim);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── Mycelial Web (Ecosystem) ── */
|
|
.web-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.web-header h2 {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
|
color: var(--primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.web-header p {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.web-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.web-node {
|
|
background: rgba(26, 16, 6, 0.6);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
transition: all 0.4s ease;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.web-node:hover {
|
|
border-color: var(--primary);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 30px var(--glow);
|
|
}
|
|
|
|
.web-node-emoji {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.75rem;
|
|
display: block;
|
|
}
|
|
|
|
.web-node-title {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.95rem;
|
|
color: var(--mycelium-light);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.web-node-desc {
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Allies ── */
|
|
.allies-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.ally-card {
|
|
display: block;
|
|
background: rgba(26, 16, 6, 0.4);
|
|
border: 1px solid rgba(210, 125, 45, 0.1);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
transition: all 0.4s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ally-card:hover {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 4px 20px var(--glow);
|
|
}
|
|
|
|
.ally-name {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.ally-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--text-dim);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Newsletter ── */
|
|
.newsletter {
|
|
background: radial-gradient(ellipse at center, rgba(210, 125, 45, 0.05) 0%, transparent 70%);
|
|
}
|
|
|
|
.newsletter-box {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.newsletter-box h2 {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 1.5rem;
|
|
color: var(--primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.newsletter-box p {
|
|
color: var(--text-dim);
|
|
margin-bottom: 1.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.newsletter-form {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.newsletter-form input[type="email"] {
|
|
flex: 1;
|
|
padding: 0.85rem 1.2rem;
|
|
border-radius: 100px;
|
|
border: 1px solid var(--border);
|
|
background: rgba(26, 16, 6, 0.8);
|
|
color: var(--text);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 0.95rem;
|
|
outline: none;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.newsletter-form input[type="email"]:focus {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.newsletter-form button {
|
|
padding: 0.85rem 2rem;
|
|
border-radius: 100px;
|
|
border: none;
|
|
background: linear-gradient(135deg, var(--secondary), var(--primary));
|
|
color: var(--text);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.newsletter-form button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 15px rgba(142, 74, 27, 0.5);
|
|
}
|
|
|
|
#newsletter-message {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.9rem;
|
|
display: none;
|
|
}
|
|
|
|
.newsletter-note {
|
|
font-size: 0.75rem;
|
|
color: var(--text-dim);
|
|
opacity: 0.6;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* ── Footer ── */
|
|
footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.footer-quote {
|
|
font-style: italic;
|
|
color: var(--text-dim);
|
|
font-size: 0.95rem;
|
|
margin-bottom: 1.5rem;
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.footer-links a:hover { color: var(--accent); }
|
|
|
|
.footer-copy {
|
|
font-size: 0.75rem;
|
|
color: var(--text-dim);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ── Animations ── */
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 640px) {
|
|
section { padding: 3rem 1.25rem; }
|
|
|
|
.principles-grid { grid-template-columns: 1fr; }
|
|
.web-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.allies-grid { grid-template-columns: 1fr; }
|
|
|
|
.newsletter-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hero-nav { flex-direction: column; align-items: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="mycelium-canvas"></canvas>
|
|
|
|
<!-- ════════ HERO ════════ -->
|
|
<section class="hero">
|
|
<p class="hero-welcome">welcome home</p>
|
|
<h1 class="hero-title">mycopunk.xyz</h1>
|
|
<p class="hero-tagline">If you found this, you were already looking.</p>
|
|
<p class="hero-subtext">Underground networks, emergent possibilities. Building from beneath the surface.</p>
|
|
<nav class="hero-nav">
|
|
<a href="#principles">Principles</a>
|
|
<a href="#mycelium">The Mycelial Web</a>
|
|
<a href="#allies">Allies</a>
|
|
<a href="#join">Join the Network</a>
|
|
</nav>
|
|
<div class="scroll-hint"><span></span></div>
|
|
</section>
|
|
|
|
<!-- ════════ MANIFESTO ════════ -->
|
|
<section class="manifesto">
|
|
<div class="section-inner manifesto-text fade-in">
|
|
<p>Beneath every forest, an older internet is already running. <em>No servers. No owners. No terms of service.</em> Just a billion-year-old protocol for mutual aid, resource sharing, and collective intelligence.</p>
|
|
<p>Mycopunk is not a movement you join. <strong>It's a pattern you recognize.</strong> In the way fungi digest the dead to feed the living. In the way networks route around damage. In the way the margins hold the wisdom the centre forgot.</p>
|
|
<p>We are composting the old world and <em>inoculating the new</em>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider">· · · ◌ · · ·</div>
|
|
|
|
<!-- ════════ PRINCIPLES ════════ -->
|
|
<section id="principles">
|
|
<div class="section-inner">
|
|
<div class="principles-header fade-in">
|
|
<h2>Mycopunk Principles</h2>
|
|
<p>Design patterns borrowed from a billion years of fungal R&D</p>
|
|
</div>
|
|
|
|
<div class="principles-image fade-in">
|
|
<img src="https://1776665096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2CJIFDxuSIwvt2UDyzn%2Fuploads%2F5MBMCRjIfRnBjMvamdOL%2FMycoPunk%20Principles.png?alt=media&token=65efb020-eb45-44a7-ac8f-b9b6e5066d4d" alt="Mycopunk Principles — visual diagram of 14 principles inspired by mycelial networks" loading="lazy">
|
|
<a href="https://mycopunks.gitbook.io/mycopunk-principles" target="_blank" rel="noopener">Read the full principles →</a>
|
|
</div>
|
|
|
|
<div class="principles-grid">
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">01</div>
|
|
<div class="principle-name">Regenerative / Positive-Sum</div>
|
|
<div class="principle-desc">First responder in ecosystem regeneration. Digests externally, producing materials for life. Breaks down pollutants. Stimulates biological recovery.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">02</div>
|
|
<div class="principle-name">Networked / Distributed / Anarchist</div>
|
|
<div class="principle-desc">No hierarchical command structures. Decision-making authority dispersed to local levels. The network has no centre.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">03</div>
|
|
<div class="principle-name">Anti-Fragile</div>
|
|
<div class="principle-desc">Disruption paradoxically strengthens the system. Cut the mycelium — it grows back denser. Stress increases resilience.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">04</div>
|
|
<div class="principle-name">Fractal</div>
|
|
<div class="principle-desc">Self-replicating patterns observable across multiple scales. What works for the hypha works for the network works for the ecosystem.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">05</div>
|
|
<div class="principle-name">Mutualist / Cooperative</div>
|
|
<div class="principle-desc">Symbiotic relationships across species boundaries. Interoperable by default. Generally producing mutual benefit.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">06</div>
|
|
<div class="principle-name">Stigmergic / Emergent / Adaptive</div>
|
|
<div class="principle-desc">Environmental responsiveness and evolutionary strategy shifts. Indirect coordination through traces left in the environment.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">07</div>
|
|
<div class="principle-name">Polycentric</div>
|
|
<div class="principle-desc">Localized specialization tailored to specific contextual needs. Many centres, not one.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">08</div>
|
|
<div class="principle-name">Consolidate Power Underground</div>
|
|
<div class="principle-desc">Establish foundational strength before visible emergence. The fruiting body is the last step, not the first.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">09</div>
|
|
<div class="principle-name">Humble</div>
|
|
<div class="principle-desc">Thrives in inhospitable conditions and overlooked spaces. Does the work nobody sees.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">10</div>
|
|
<div class="principle-name">Redistributive</div>
|
|
<div class="principle-desc">Efficient nutrient-sharing networks. Resources flow toward scarcity, not toward accumulation.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">11</div>
|
|
<div class="principle-name">Continuous Flow</div>
|
|
<div class="principle-desc">Persistent, circular resource movement without accumulation. No hoarding. No bottlenecks. Just flow.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">12</div>
|
|
<div class="principle-name">Optimistic</div>
|
|
<div class="principle-desc">Oriented toward constructive, future-focused outcomes. Fungi find a way. So do we.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">13</div>
|
|
<div class="principle-name">Ubiquitous</div>
|
|
<div class="principle-desc">Persistent presence across time and geography. Already everywhere. Already running. Already beneath your feet.</div>
|
|
</div>
|
|
<div class="principle-card fade-in">
|
|
<div class="principle-number">14</div>
|
|
<div class="principle-name">Margin-Centred Wisdom</div>
|
|
<div class="principle-desc">Edge-based sensing eliminates the need for centralized hierarchy. The margins know what the centre cannot.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider">· · · ◌ · · ·</div>
|
|
|
|
<!-- ════════ THE MYCELIAL WEB ════════ -->
|
|
<section id="mycelium">
|
|
<div class="section-inner">
|
|
<div class="web-header fade-in">
|
|
<h2>The Mycelial Web</h2>
|
|
<p>Nodes in the network. Each a fruiting body of the same underground organism.</p>
|
|
</div>
|
|
|
|
<div class="web-grid">
|
|
<a href="https://mycofi.earth" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">🌍</span>
|
|
<div class="web-node-title">mycofi.earth</div>
|
|
<div class="web-node-desc">Mycelial finance. Economics as ecology. Permaculture currencies for a post-extractive world.</div>
|
|
</a>
|
|
<a href="https://book.mycofi.earth" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">📖</span>
|
|
<div class="web-node-title">book.mycofi.earth</div>
|
|
<div class="web-node-desc">Exploring MycoFi — mycelial design patterns for web3 and beyond.</div>
|
|
</a>
|
|
<a href="https://mycostack.xyz" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">🧱</span>
|
|
<div class="web-node-title">mycostack.xyz</div>
|
|
<div class="web-node-desc">The technology stack. Commons-based, cosmo-local, anti-rival. Infrastructure for the undernet.</div>
|
|
</a>
|
|
<a href="https://compostcapitalism.xyz" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">♻️</span>
|
|
<div class="web-node-title">compostcapitalism.xyz</div>
|
|
<div class="web-node-desc">Don't burn it down. Compost it. Transform dying institutions into substrate for what grows next.</div>
|
|
</a>
|
|
<a href="https://psilo-cyber.net/ics" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">🧠</span>
|
|
<div class="web-node-title">psilo-cyber.net/ics</div>
|
|
<div class="web-node-desc">Psilocybernetics. Feedback loops, self-organizing systems, institutional neuroplasticity.</div>
|
|
</a>
|
|
<a href="https://trippinballs.lol" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">🤪</span>
|
|
<div class="web-node-title">trippinballs.lol</div>
|
|
<div class="web-node-desc">Society is trippin balls. The four addictions. (com)Post-capitalism. The memes write themselves.</div>
|
|
</a>
|
|
<a href="https://nofi.lol" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">🚫</span>
|
|
<div class="web-node-title">nofi.lol</div>
|
|
<div class="web-node-desc">The anti-finance movement. Zero yield. No governance. The best portfolio allocation is 0% everything.</div>
|
|
</a>
|
|
<a href="https://defectfi.xyz" target="_blank" rel="noopener" class="web-node fade-in">
|
|
<span class="web-node-emoji">🕳️</span>
|
|
<div class="web-node-title">defectfi.xyz</div>
|
|
<div class="web-node-desc">Infrastructure for defectors. When loyalty to institutions becomes complicity, defection is the deepest loyalty.</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider">· · · ◌ · · ·</div>
|
|
|
|
<!-- ════════ ALLIES & INSPIRATIONS ════════ -->
|
|
<section id="allies">
|
|
<div class="section-inner">
|
|
<div class="web-header fade-in">
|
|
<h2>Allies & Ancestors</h2>
|
|
<p>The wider mycelial network. Those who've been listening to the underground for a long time.</p>
|
|
</div>
|
|
|
|
<div class="allies-grid">
|
|
<a href="https://www.spun.earth" target="_blank" rel="noopener" class="ally-card fade-in">
|
|
<div class="ally-name">SPUN — Society for the Protection of Underground Networks</div>
|
|
<div class="ally-desc">Mapping mycorrhizal fungal communities worldwide and advocating for their protection. Protect the underground.</div>
|
|
</a>
|
|
<a href="https://www.radicalmycology.com" target="_blank" rel="noopener" class="ally-card fade-in">
|
|
<div class="ally-name">Radical Mycology</div>
|
|
<div class="ally-desc">Grassroots mycology movement. Democratizing access to fungal knowledge for ecological and social resilience.</div>
|
|
</a>
|
|
<a href="https://fungi.com" target="_blank" rel="noopener" class="ally-card fade-in">
|
|
<div class="ally-name">Fungi Perfecti — Paul Stamets</div>
|
|
<div class="ally-desc">Decades of mycological research, cultivation, and advocacy. Mushrooms as medicine, remediation, and paradigm shift.</div>
|
|
</a>
|
|
<a href="https://www.merlinsheldrake.com/entangled-life" target="_blank" rel="noopener" class="ally-card fade-in">
|
|
<div class="ally-name">Entangled Life — Merlin Sheldrake</div>
|
|
<div class="ally-desc">How fungi make our worlds, change our minds, and shape our futures. The book that helped a generation see the network.</div>
|
|
</a>
|
|
<a href="https://fantasticfungi.com" target="_blank" rel="noopener" class="ally-card fade-in">
|
|
<div class="ally-name">Fantastic Fungi</div>
|
|
<div class="ally-desc">The consciousness-shifting documentary. Revealing the magic, mystery, and medicinal marvels of the fungal kingdom.</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider">· · · ◌ · · ·</div>
|
|
|
|
<!-- ════════ NEWSLETTER ════════ -->
|
|
<section id="join" class="newsletter">
|
|
<div class="newsletter-box fade-in">
|
|
<h2>Join the Mycelial Network</h2>
|
|
<p>Spore dispatches. Signal from the underground. No spam — fungi don't do that.</p>
|
|
<form id="newsletter-form" class="newsletter-form">
|
|
<input type="email" id="newsletter-email" placeholder="your@email.com" required>
|
|
<button type="submit">Subscribe</button>
|
|
</form>
|
|
<p id="newsletter-message"></p>
|
|
<p class="newsletter-note">Unsubscribe anytime. Your data stays in the network, not on a spreadsheet.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ════════ FOOTER ════════ -->
|
|
<footer>
|
|
<p class="footer-quote">"The mycelium is the neurological network of nature. Interlacing mosaics of mycelium infuse habitats with information-sharing membranes."<br>— Paul Stamets</p>
|
|
<div class="footer-links">
|
|
<a href="https://mycofi.earth">MycoFi</a>
|
|
<a href="https://mycostack.xyz">MycoStack</a>
|
|
<a href="https://compostcapitalism.xyz">Compost Capitalism</a>
|
|
<a href="https://psilo-cyber.net/ics">Psilocybernetics</a>
|
|
<a href="https://mycopunks.gitbook.io/mycopunk-principles">Principles</a>
|
|
</div>
|
|
<p class="footer-copy">mycopunk.xyz — the network is the organism</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// ── Mycelium Canvas ──
|
|
const canvas = document.getElementById('mycelium-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let width, height;
|
|
|
|
function resize() {
|
|
width = canvas.width = window.innerWidth;
|
|
height = canvas.height = window.innerHeight * 3;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
// Draw organic mycelium network
|
|
function drawMycelium() {
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
const nodes = [];
|
|
const numNodes = Math.floor((width * height) / 25000);
|
|
|
|
for (let i = 0; i < numNodes; i++) {
|
|
nodes.push({
|
|
x: Math.random() * width,
|
|
y: Math.random() * height,
|
|
r: 1 + Math.random() * 2
|
|
});
|
|
}
|
|
|
|
// Draw connections
|
|
ctx.strokeStyle = 'rgba(210, 125, 45, 0.08)';
|
|
ctx.lineWidth = 0.5;
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
for (let j = i + 1; j < nodes.length; j++) {
|
|
const dx = nodes[i].x - nodes[j].x;
|
|
const dy = nodes[i].y - nodes[j].y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 120) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(nodes[i].x, nodes[i].y);
|
|
// Organic curve
|
|
const mx = (nodes[i].x + nodes[j].x) / 2 + (Math.random() - 0.5) * 30;
|
|
const my = (nodes[i].y + nodes[j].y) / 2 + (Math.random() - 0.5) * 30;
|
|
ctx.quadraticCurveTo(mx, my, nodes[j].x, nodes[j].y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw nodes
|
|
for (const node of nodes) {
|
|
ctx.beginPath();
|
|
ctx.arc(node.x, node.y, node.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(255, 195, 139, ${0.1 + Math.random() * 0.2})`;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
drawMycelium();
|
|
|
|
// ── Scroll Animations ──
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
|
|
|
// ── Newsletter ──
|
|
const LISTMONK_URL = 'https://newsletter.jeffemmett.com';
|
|
const LIST_UUID = '1f477b24-17ec-4ea1-8248-4f629d2365e4';
|
|
|
|
document.getElementById('newsletter-form').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const email = document.getElementById('newsletter-email').value;
|
|
const messageEl = document.getElementById('newsletter-message');
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
|
|
submitBtn.textContent = 'Subscribing...';
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch(LISTMONK_URL + '/subscription/form', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: new URLSearchParams({ email: email, list: LIST_UUID, name: '' }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
messageEl.textContent = 'Check your email to confirm. Welcome to the network.';
|
|
messageEl.style.color = 'var(--accent)';
|
|
messageEl.style.display = 'block';
|
|
document.getElementById('newsletter-email').value = '';
|
|
} else {
|
|
throw new Error('Subscription failed');
|
|
}
|
|
} catch (error) {
|
|
messageEl.textContent = 'Something went wrong. Try again?';
|
|
messageEl.style.color = '#ff6b6b';
|
|
messageEl.style.display = 'block';
|
|
}
|
|
|
|
submitBtn.textContent = 'Subscribe';
|
|
submitBtn.disabled = false;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|