jeffemmett
/
mycostack-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve text readability, add cosmo-localism and sister ecosystems 

- Bump foreground lightness in scroll-provider from 0.86-0.88 to 0.92-0.93
- Match CSS default --scroll-fg to oklch(0.93 0.02 130)
- Increase opacity on body text, subtitles, quotes across all sections
- Rewrite NoFi section as shorter "Sister Ecosystems" with NoFi, MycoFi, Defect.fi
- Add cosmo-localism glass card to P2P Foundation section
- Add convivial tooling emphasis throughout legacy section
- Add Defect.fi to network map and footer links
- Fix extra closing div syntax error in legacy section

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-25 20:04:08 -08:00
parent c844d86527
commit 4f8727fd52
11 changed files with 153 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@ -6,7 +6,7 @@
:root {
/* Scroll-driven dynamic colors (set by JS) */
--scroll-bg: oklch(0.20 0.03 140);
--scroll-fg: oklch(0.88 0.03 130);
--scroll-fg: oklch(0.93 0.02 130);
--scroll-accent: oklch(0.58 0.12 145);
--scroll-depth: 0;

6
components/compost-section.tsx
View File

@ -29,7 +29,7 @@ export function CompostSection() {
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
The Compost Layer
</h2>
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto">
<p className="text-lg sm:text-xl opacity-85 max-w-2xl mx-auto">
Decomposing extractive systems into nutrients for regeneration
</p>
</div>
@ -48,12 +48,12 @@ export function CompostSection() {
<h3 className="font-serif text-xl font-semibold">
{card.title}
</h3>
<p className="text-sm leading-relaxed opacity-75">{card.body}</p>
<p className="text-sm leading-relaxed opacity-85">{card.body}</p>
</div>
))}
</div>
<p className="section-reveal text-center text-base opacity-60 max-w-xl mx-auto">
<p className="section-reveal text-center text-base opacity-75 max-w-xl mx-auto">
This is{" "}
<a
href="https://compostcapitalism.xyz"

8
components/emergence-section.tsx
View File

@ -29,7 +29,7 @@ export function EmergenceSection() {
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
Emergence
</h2>
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto">
<p className="text-lg sm:text-xl opacity-85 max-w-2xl mx-auto">
What grows underground eventually breaks the surface.
</p>
</div>
@ -57,13 +57,13 @@ export function EmergenceSection() {
<h3 className="font-serif text-xl font-semibold">
{card.title}
</h3>
<p className="text-sm leading-relaxed opacity-75">{card.body}</p>
<p className="text-sm leading-relaxed opacity-85">{card.body}</p>
</div>
))}
</div>
<div className="section-reveal text-center space-y-4 max-w-xl mx-auto">
<p className="text-base opacity-60">
<p className="text-base opacity-75">
Building the{" "}
<a
href="https://post-appitalist.app"
@ -76,7 +76,7 @@ export function EmergenceSection() {
lication layer for a regenerative economy. Tools that serve
communities, not shareholders.
</p>
<p className="text-sm opacity-40">
<p className="text-sm opacity-55">
Sometimes the best way to see the future is to change your
perspective. Stop{" "}
<a

5
components/footer.tsx
View File

@ -5,6 +5,7 @@ const LINKS = [
{ name: "P2P Foundation", url: "https://wiki.p2pfoundation.net/" },
{ name: "MycoFi", url: "https://mycofi.earth" },
{ name: "NoFi", url: "https://nofi.lol" },
{ name: "Defect.fi", url: "https://defect.fi" },
{ name: "Mycopunk", url: "https://mycopunk.xyz" },
{ name: "rFunds", url: "https://rfunds.online" },
{ name: "rStack", url: "https://rstack.org" },
@ -37,10 +38,10 @@ export function Footer() {
{/* Tagline */}
<div className="text-center space-y-3">
<p className="font-serif text-lg opacity-50">
<p className="font-serif text-lg opacity-65">
Built with compost and code.
</p>
<p className="font-mono text-xs opacity-30">
<p className="font-mono text-xs opacity-45">
MycoStack &mdash; technology-augmented commons growing from beneath
</p>
<p className="font-mono text-xs opacity-20">

6
components/goods-matrix-section.tsx
View File

@ -57,7 +57,7 @@ export function GoodsMatrixSection() {
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
Beyond Ostrom&rsquo;s Matrix
</h2>
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto">
<p className="text-lg sm:text-xl opacity-85 max-w-2xl mx-auto">
Elinor Ostrom mapped the commons as a 2&times;2 grid. But the
network age reveals a third column &mdash; goods that grow{" "}
<em>more</em> valuable the more people use them.
@ -189,7 +189,7 @@ export function GoodsMatrixSection() {
className="section-reveal max-w-3xl mx-auto space-y-6"
style={{ transitionDelay: "0.2s" }}
>
<div className="space-y-4 text-base leading-relaxed opacity-80">
<div className="space-y-4 text-base leading-relaxed opacity-90">
<p>
Traditional economics fixates on the left two columns: private
goods to buy, public goods to fund, common-pool resources to
@ -229,7 +229,7 @@ export function GoodsMatrixSection() {
className="section-reveal max-w-2xl mx-auto text-center"
style={{ transitionDelay: "0.25s" }}
>
<p className="font-serif text-xl sm:text-2xl italic leading-relaxed opacity-70">
<p className="font-serif text-xl sm:text-2xl italic leading-relaxed opacity-80">
&ldquo;The forest floor is a symbiotic good. Every organism that
joins makes the soil richer for all.&rdquo;
</p>

4
components/hero-section.tsx
View File

@ -88,7 +88,7 @@ export function HeroSection() {
className="emerge-letter space-y-3"
style={{ animationDelay: "1.2s" }}
>
<p className="text-base sm:text-lg md:text-xl font-serif font-light tracking-wide opacity-60">
<p className="text-base sm:text-lg md:text-xl font-serif font-light tracking-wide opacity-75">
Rebooting the legacy of the Commons Stack.
<br />
Preserving the legacy of the P2P Foundation.
@ -100,7 +100,7 @@ export function HeroSection() {
{/* Cycling terminal tagline */}
<div
className="emerge-letter font-mono text-sm sm:text-base opacity-60 h-6"
className="emerge-letter font-mono text-sm sm:text-base opacity-70 h-6"
style={{ animationDelay: "2s" }}
>
<span className="opacity-50">&gt;</span>{" "}

71
components/legacy-section.tsx
View File

@ -15,7 +15,7 @@ export function LegacySection() {
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
The Roots
</h2>
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto">
<p className="text-lg sm:text-xl opacity-85 max-w-2xl mx-auto">
The MycoStack grows from the Commons Stack &mdash; its primary root
system &mdash; nourished by the knowledge commons of the P2P
Foundation and the broader commons movement.
@ -27,7 +27,7 @@ export function LegacySection() {
<h3 className="font-serif text-2xl sm:text-3xl font-semibold">
The Commons Stack
</h3>
<div className="space-y-4 text-base leading-relaxed opacity-80">
<div className="space-y-4 text-base leading-relaxed opacity-90">
<p>
The{" "}
<a
@ -102,7 +102,7 @@ export function LegacySection() {
<h3 className="font-serif text-2xl sm:text-3xl font-semibold">
The P2P Foundation
</h3>
<div className="space-y-4 text-base leading-relaxed opacity-80">
<div className="space-y-4 text-base leading-relaxed opacity-90">
<p>
The{" "}
<a
@ -124,14 +124,15 @@ export function LegacySection() {
Out of this work came key frameworks:{" "}
<strong>commons-based peer production</strong>, the{" "}
<strong>partner state</strong>, and{" "}
<strong>cosmo-localism</strong> (&ldquo;design global, manufacture
local&rdquo;). But the P2P Foundation doesn&rsquo;t just preserve
knowledge &mdash; it transforms it. Each iteration of commons
practice feeds back into the knowledge base, refining theories
into{" "}
<strong>convivial knowledge packets</strong>: living documents
that distill decades of research and practice into actionable
frameworks communities can actually use.
<strong>cosmo-localism</strong>. But the P2P Foundation
doesn&rsquo;t just preserve knowledge &mdash; it transforms it.
Each iteration of commons practice feeds back into the knowledge
base, refining theories into{" "}
<strong>convivial knowledge packets</strong> and{" "}
<strong>convivial tools</strong> &mdash; technology in the
tradition of Ivan Illich, designed to expand human capability
without creating dependency. Tools that communities master,
rather than tools that master communities.
</p>
<p>
These knowledge packets become the seeds of{" "}
@ -142,6 +143,44 @@ export function LegacySection() {
ground, pushing spores into the future.
</p>
</div>
{/* Cosmo-localism */}
<div className="glass-card p-6 sm:p-8 space-y-4">
<h4 className="font-serif text-lg font-semibold opacity-70">
Cosmo-localism
</h4>
<p className="text-sm leading-relaxed opacity-80">
<strong>&ldquo;Design global, manufacture local.&rdquo;</strong>{" "}
Knowledge is a non-rival good &mdash; sharing it doesn&rsquo;t
diminish it. Hardware is local and contextual. Cosmo-localism
means open source designs flow freely across the global commons,
while production happens close to where things are needed, using
local materials, local labor, local governance. The global brain
thinks together; the local hands build together.
</p>
<div className="grid gap-3 sm:grid-cols-3 font-mono text-xs mt-3">
<div className="space-y-1">
<div style={{ color: "var(--scroll-accent)" }}>global</div>
<div className="opacity-60">
Open designs, shared protocols, knowledge commons
</div>
</div>
<div className="space-y-1">
<div style={{ color: "var(--scroll-accent)" }}>local</div>
<div className="opacity-60">
Community production, contextual adaptation, bioregional
materials
</div>
</div>
<div className="space-y-1">
<div style={{ color: "var(--scroll-accent)" }}>convivial</div>
<div className="opacity-60">
Tools that empower users, not platforms that extract from
them
</div>
</div>
</div>
</div>
</div>
{/* Data Flows - New Section */}
@ -152,7 +191,7 @@ export function LegacySection() {
<h3 className="font-serif text-2xl sm:text-3xl font-semibold">
Data Flows of the Commons
</h3>
<div className="space-y-4 text-base leading-relaxed opacity-80">
<div className="space-y-4 text-base leading-relaxed opacity-90">
<p>
The MycoStack recognizes that the dissemination of{" "}
<strong>trust</strong>, <strong>resources</strong>,{" "}
@ -227,7 +266,7 @@ export function LegacySection() {
<br />
Peer-for-Peer (P4P) Movement
</h3>
<div className="space-y-4 text-base leading-relaxed opacity-80">
<div className="space-y-4 text-base leading-relaxed opacity-90">
<p>
MycoStack carries this legacy forward by inoculating a
movement: <strong>Peer-for-Peer (P4P)</strong> &mdash; an
@ -302,7 +341,7 @@ export function LegacySection() {
<h3 className="font-serif text-2xl sm:text-3xl font-semibold">
Tools in Active Research
</h3>
<div className="space-y-4 text-base leading-relaxed opacity-80">
<div className="space-y-4 text-base leading-relaxed opacity-90">
<p>
<strong>Flow Funding</strong> &mdash; the natural evolution of
the Commons Stack&rsquo;s Augmented Bonding Curve. Less
@ -399,7 +438,7 @@ export function LegacySection() {
<h4 className="font-serif text-lg font-semibold">
{pillar.title}
</h4>
<p className="text-sm leading-relaxed opacity-70">
<p className="text-sm leading-relaxed opacity-80">
{pillar.text}
</p>
</div>
@ -408,7 +447,7 @@ export function LegacySection() {
{/* Quote */}
<blockquote className="section-reveal max-w-2xl mx-auto text-center">
<p className="font-serif text-xl sm:text-2xl italic leading-relaxed opacity-70">
<p className="font-serif text-xl sm:text-2xl italic leading-relaxed opacity-80">
&ldquo;The more we share, the more we have.&rdquo;
</p>
<cite className="block mt-3 text-sm opacity-40 not-italic">

6
components/mycelium-section.tsx
View File

@ -59,7 +59,7 @@ export function MyceliumSection() {
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
The Mycelial Network
</h2>
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto">
<p className="text-lg sm:text-xl opacity-85 max-w-2xl mx-auto">
Three principles from the forest floor, applied to human systems
</p>
</div>
@ -77,7 +77,7 @@ export function MyceliumSection() {
<h3 className="font-serif text-2xl sm:text-3xl font-semibold">
{principle.title}
</h3>
<p className="text-base leading-relaxed opacity-75">
<p className="text-base leading-relaxed opacity-85">
{principle.body}
</p>
</div>
@ -89,7 +89,7 @@ export function MyceliumSection() {
{/* Connecting line between principles - visual only */}
<div className="section-reveal text-center space-y-3 pt-4">
<p className="text-sm opacity-50 max-w-lg mx-auto">
<p className="text-sm opacity-65 max-w-lg mx-auto">
These are the protocols of{" "}
<a
href="https://mycofi.earth"

11
components/network-map-section.tsx
View File

@ -50,6 +50,13 @@ const NODES: NetworkNode[] = [
x: 80,
y: 18,
},
{
name: "Defect.fi",
domain: "defect.fi",
description: "Defecting from extractive finance",
x: 92,
y: 25,
},
{
name: "Mycopunk",
domain: "mycopunk.xyz",
@ -131,6 +138,8 @@ const CONNECTIONS: [string, string][] = [
["commonsstack.org", "nofi.lol"],
["rfunds.online", "mycofi.earth"],
["nofi.lol", "mycofi.earth"],
["nofi.lol", "defect.fi"],
["defect.fi", "mycofi.earth"],
["rstack.org", "yourspace.online"],
["rstack.org", "undernet.earth"],
["wiki.p2pfoundation.net", "post-appitalist.app"],
@ -178,7 +187,7 @@ export function NetworkMapSection() {
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
The Network of Networks
</h2>
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto">
<p className="text-lg sm:text-xl opacity-85 max-w-2xl mx-auto">
Every node strengthens the whole. Every connection multiplies
possibility.
</p>

157
components/nofi-section.tsx
View File

@ -12,29 +12,18 @@ export function NoFiSection() {
<div className="max-w-4xl mx-auto space-y-16">
<div className="section-reveal space-y-6 text-center">
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
NoFi
Sister Ecosystems
</h2>
<p className="font-mono text-sm opacity-40">
/no-fai/ &mdash; post-finance
</p>
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto leading-relaxed">
The point was never to make money.
<br />
The point was always to make <em>change</em>.
<p className="text-lg sm:text-xl opacity-85 max-w-2xl mx-auto leading-relaxed">
The MycoStack doesn&rsquo;t grow alone. It interweaves with
parallel movements rethinking value, finance, and coordination
from the ground up.
</p>
</div>
<div className="section-reveal max-w-3xl mx-auto space-y-6">
<div className="space-y-4 text-base leading-relaxed opacity-80">
<p>
Finance was supposed to be a tool &mdash; a way to coordinate
resources toward shared goals. Somewhere along the way, the tool
became the master. We started measuring the health of communities
by their balance sheets, the worth of projects by their returns,
the value of people by their portfolios. The map ate the
territory.
</p>
<p>
<div className="section-reveal grid gap-6 sm:grid-cols-3 max-w-3xl mx-auto">
<div className="glass-card p-5 space-y-3">
<h3 className="font-serif text-lg font-semibold">
<a
href="https://nofi.lol"
target="_blank"
@ -42,89 +31,63 @@ export function NoFiSection() {
className="domain-link"
>
NoFi
</a>{" "}
is the recognition that we need to think <em>past</em> finance
entirely. Not anti-finance &mdash; post-finance. The question
isn&rsquo;t &ldquo;how do we fund this?&rdquo; but &ldquo;how
do we organize so that funding becomes irrelevant?&rdquo; How do
we build systems where the flows of trust, knowledge, care, and
resources make the extractive financial layer unnecessary?
</a>
</h3>
<p className="text-sm leading-relaxed opacity-80">
Post-finance. The point was never to make money &mdash; it was
to make <em>change</em>. NoFi asks: what if we build
coordination so dense that the financial scaffolding can be
composted?
</p>
<p>
DeFi promised to decentralize finance. It mostly just made
finance faster. ReFi promised to regenerate through finance. It
mostly just made new financial instruments. NoFi asks: what if
the revolution isn&rsquo;t in <em>how</em> we do finance, but in
building the world where we no longer need it as the primary
coordination mechanism?
<div className="glass-card p-3 space-y-1 font-mono text-xs text-center">
<div className="opacity-40">TradFi &rarr; DeFi &rarr; ReFi &rarr;</div>
<div style={{ color: "var(--scroll-accent)" }}>NoFi</div>
<div className="opacity-50">Transcend the need for it.</div>
</div>
</div>
<div className="glass-card p-5 space-y-3">
<h3 className="font-serif text-lg font-semibold">
<a
href="https://mycofi.earth"
target="_blank"
rel="noopener noreferrer"
className="domain-link"
>
MycoFi
</a>
</h3>
<p className="text-sm leading-relaxed opacity-80">
Mycelial finance &mdash; currencies that route value like fungi
route nutrients. Sensing scarcity, bridging gaps, feeding the
weak to strengthen the whole. Economics as ecology.
</p>
</div>
<div className="glass-card p-5 space-y-3">
<h3 className="font-serif text-lg font-semibold">
<a
href="https://defect.fi"
target="_blank"
rel="noopener noreferrer"
className="domain-link"
>
Defect.fi
</a>
</h3>
<p className="text-sm leading-relaxed opacity-80">
Defecting from extractive finance. Naming the exit &mdash; the
conscious choice to withdraw from systems that concentrate
wealth and build alternatives that distribute it.
</p>
</div>
</div>
<div className="section-reveal glass-card p-6 sm:p-8 max-w-3xl mx-auto space-y-4">
<h4 className="font-serif text-lg font-semibold opacity-70 text-center">
The progression
</h4>
<div className="grid gap-3 sm:grid-cols-4 font-mono text-sm text-center">
<div className="space-y-1">
<div className="font-serif text-base font-semibold not-italic opacity-40">
TradFi
</div>
<div className="opacity-50 text-xs">
Extract value. Concentrate wealth.
</div>
</div>
<div className="space-y-1">
<div className="font-serif text-base font-semibold not-italic opacity-50">
DeFi
</div>
<div className="opacity-50 text-xs">
Decentralize the extraction.
</div>
</div>
<div className="space-y-1">
<div className="font-serif text-base font-semibold not-italic opacity-60">
ReFi
</div>
<div className="opacity-50 text-xs">
Try to regenerate through it.
</div>
</div>
<div className="space-y-1">
<div className="font-serif text-base font-semibold not-italic" style={{ color: "var(--scroll-accent)" }}>
NoFi
</div>
<div className="opacity-70 text-xs">
Transcend the need for it.
</div>
</div>
</div>
</div>
<div className="section-reveal max-w-3xl mx-auto space-y-4">
<div className="space-y-4 text-base leading-relaxed opacity-80">
<p>
In a mycelial economy, resources move by need, not by price.
Trust is built through reciprocity, not collateral. Contribution
is recognized through community memory, not token balances. The
forest doesn&rsquo;t have a treasury &mdash; it has flows.
</p>
<p>
NoFi doesn&rsquo;t mean no exchange. It means the exchange
becomes embedded in relationships thick enough to hold it. It
means building the social, technical, and ecological
infrastructure so dense that the financial scaffolding can
eventually be composted &mdash; returned to the soil, feeding
what comes next.
</p>
</div>
<blockquote className="pt-4 text-center">
<p className="font-serif text-xl sm:text-2xl italic leading-relaxed opacity-70">
&ldquo;Stop making money. Start making sense.&rdquo;
</p>
</blockquote>
</div>
<blockquote className="section-reveal max-w-2xl mx-auto text-center">
<p className="font-serif text-xl sm:text-2xl italic leading-relaxed opacity-80">
&ldquo;Stop making money. Start making sense.&rdquo;
</p>
</blockquote>
</div>
</section>
)

18
components/scroll-provider.tsx
View File

@ -8,15 +8,15 @@ import { useEffect } from "react"
// Background stays in the 0.20-0.24 range (dark forest floor).
// Light text throughout. Hue drifts gently through greens and teals.
const COLOR_STOPS: number[][] = [
[0.0, 0.20, 0.03, 140, 0.88, 0.03, 130, 0.58, 0.12, 145], // Hero: mossy green
[0.10, 0.21, 0.035, 135, 0.87, 0.03, 135, 0.56, 0.13, 140], // Legacy: deep fern
[0.18, 0.22, 0.04, 130, 0.86, 0.03, 125, 0.55, 0.14, 130], // Compost: warm moss
[0.30, 0.22, 0.045, 150, 0.88, 0.03, 150, 0.58, 0.15, 155], // Mycelium: forest green
[0.42, 0.21, 0.04, 170, 0.88, 0.03, 170, 0.55, 0.13, 175], // Undernet: deep teal-green
[0.52, 0.22, 0.04, 160, 0.87, 0.03, 155, 0.57, 0.14, 160], // Anastomosis: fern blend
[0.62, 0.21, 0.035, 145, 0.86, 0.03, 140, 0.55, 0.13, 148], // NoFi: returning green
[0.75, 0.23, 0.04, 135, 0.88, 0.03, 130, 0.58, 0.14, 135], // Emergence: bright moss
[0.90, 0.22, 0.035, 145, 0.87, 0.03, 140, 0.56, 0.13, 150], // Network Map: canopy green
[0.0, 0.20, 0.03, 140, 0.93, 0.02, 130, 0.58, 0.12, 145], // Hero: mossy green
[0.10, 0.21, 0.035, 135, 0.93, 0.02, 135, 0.56, 0.13, 140], // Legacy: deep fern
[0.18, 0.22, 0.04, 130, 0.92, 0.02, 125, 0.55, 0.14, 130], // Compost: warm moss
[0.30, 0.22, 0.045, 150, 0.93, 0.02, 150, 0.58, 0.15, 155], // Mycelium: forest green
[0.42, 0.21, 0.04, 170, 0.93, 0.02, 170, 0.55, 0.13, 175], // Undernet: deep teal-green
[0.52, 0.22, 0.04, 160, 0.93, 0.02, 155, 0.57, 0.14, 160], // Anastomosis: fern blend
[0.62, 0.21, 0.035, 145, 0.92, 0.02, 140, 0.55, 0.13, 148], // NoFi: returning green
[0.75, 0.23, 0.04, 135, 0.93, 0.02, 130, 0.58, 0.14, 135], // Emergence: bright moss
[0.90, 0.22, 0.035, 145, 0.93, 0.02, 140, 0.56, 0.13, 150], // Network Map: canopy green
]
function lerp(a: number, b: number, t: number) {