Add NoFi section, fix undernet readability, faster reveals, allied orgs

- Add NoFi (nofi.lol) post-finance section: TradFi→DeFi→ReFi→NoFi progression, making change not money, transcending financial coordination - Fix undernet brightening: keep dark bg with light text through anastomosis, only lighten gradually at emergence (bg stays L≤0.20 through NoFi) - Faster section reveals: lower threshold (0.05), smaller translateY (24px), quicker transitions (0.6s) for snappier content loading - Add allied organizations to network map: Giveth, Token Engineering Commons, Enspiral, Grassroots Economics with connections - Add NoFi node to network map with connections - Footer: add NoFi link and "building alongside" allies section Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-25 19:23:07 -08:00 · 2026-02-25 19:23:07 -08:00 · a8f0bb479a
parent 994487a1e2
commit a8f0bb479a
8 changed files with 301 additions and 35 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -88,9 +88,9 @@
 /* Section scroll-reveal */
 .section-reveal {
  opacity: 0;
-  transform: translateY(40px);
-  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateY(24px);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .section-reveal.visible {
--- a/app/page.tsx
+++ b/app/page.tsx
@ -5,6 +5,7 @@ import { CompostSection } from "@/components/compost-section"
 import { MyceliumSection } from "@/components/mycelium-section"
 import { UndernetSection } from "@/components/undernet-section"
 import { AnastomosisSection } from "@/components/anastomosis-section"
+import { NoFiSection } from "@/components/nofi-section"
 import { EmergenceSection } from "@/components/emergence-section"
 import { NetworkMapSection } from "@/components/network-map-section"
 import { Footer } from "@/components/footer"
@ -20,6 +21,7 @@ export default function Home() {
        <MyceliumSection />
        <UndernetSection />
        <AnastomosisSection />
+        <NoFiSection />
        <EmergenceSection />
        <NetworkMapSection />
      </main>
--- a/Restructure-MycoStack-roots-interactive-effects-data-flows.md
+++ b/Restructure-MycoStack-roots-interactive-effects-data-flows.md
@ -0,0 +1,53 @@
+---
+id: TASK-8
+title: 'Restructure MycoStack roots, interactive effects & data flows'
+status: Done
+assignee: []
+created_date: '2026-02-26 03:09'
+labels:
+  - mycostack-website
+  - content
+  - visual
+  - interactive
+dependencies: []
+priority: high
+---
+
+## Description
+
+<!-- SECTION:DESCRIPTION:BEGIN -->
+Major content and visual update to the MycoStack website:
+
+**Content:**
+- Commons Stack elevated to primary root of the MycoStack
+- P2P Foundation reframed as both foundation and forward-looking knowledge engine (convivial knowledge packets → open source protocol toolkits for P4P)
+- New "Data Flows of the Commons" section covering trust, resources, favors, capital as community-manageable data flows
+- Flow Funding moved to "Tools in Active Research" with TBFF (Threshold-Based Flow Funding) from rFunds.online
+- Added rStack and rSpace links for community-owned infrastructure
+- Updated hero lineage text, network map nodes, and footer links
+
+**Visual:**
+- Lighter starting background (warm twilight instead of pitch black)
+- Reduced chroma across color stops for gentler rainbow fade
+- Interactive mycelial canvas: mouse/touch cursor attraction, spore particles, hypha connection lines, ambient glow
+- Slower trail fade for more persistent mycelial trails
+<!-- SECTION:DESCRIPTION:END -->
+
+## Acceptance Criteria
+<!-- AC:BEGIN -->
+- [ ] #1 Commons Stack appears first in legacy section as primary root
+- [ ] #2 P2P Foundation framed as both foundation and extending forward with knowledge packets
+- [ ] #3 Flow Funding moved to Tools in Active Research with TBFF/rFunds.online
+- [ ] #4 Data Flows section covers trust, resources, favors, capital
+- [ ] #5 rStack and rSpace links added
+- [ ] #6 Background starts lighter, gentler rainbow fade
+- [ ] #7 Mycelial canvas responds to mouse/touch interaction
+- [ ] #8 Build succeeds with no errors
+- [ ] #9 Network map includes rFunds and rStack nodes
+<!-- AC:END -->
+
+## Final Summary
+
+<!-- SECTION:FINAL_SUMMARY:BEGIN -->
+All changes implemented across 7 files (412 insertions, 105 deletions). Build verified. Committed to dev, merged to main via fast-forward. Pushed to Gitea (dev branch confirmed, main push pending hook resolution).
+<!-- SECTION:FINAL_SUMMARY:END -->
--- a/components/footer.tsx
+++ b/components/footer.tsx
@ -4,6 +4,7 @@ const LINKS = [
  { name: "Commons Stack", url: "https://commonsstack.org" },
  { name: "P2P Foundation", url: "https://wiki.p2pfoundation.net/" },
  { name: "MycoFi", url: "https://mycofi.earth" },
+  { name: "NoFi", url: "https://nofi.lol" },
  { name: "Mycopunk", url: "https://mycopunk.xyz" },
  { name: "rFunds", url: "https://rfunds.online" },
  { name: "rStack", url: "https://rstack.org" },
@ -15,6 +16,13 @@ const LINKS = [
  { name: "Trippin Balls", url: "https://trippinballs.lol" },
 ]

+const ALLIES = [
+  { name: "Giveth", url: "https://giveth.io" },
+  { name: "Token Engineering Commons", url: "https://tecommons.org" },
+  { name: "Enspiral", url: "https://enspiral.com" },
+  { name: "Grassroots Economics", url: "https://grassrootseconomics.org" },
+]
+
 export function Footer() {
  return (
    <footer className="relative z-10 py-20 px-6 border-t border-current/10">
@ -34,6 +42,24 @@ export function Footer() {
          ))}
        </div>

+        {/* Allies */}
+        <div className="text-center space-y-2">
+          <p className="font-mono text-xs opacity-25">building alongside</p>
+          <div className="flex flex-wrap justify-center gap-x-6 gap-y-2">
+            {ALLIES.map((link) => (
+              <a
+                key={link.url}
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-mono text-xs opacity-30 hover:opacity-60 transition-opacity"
+              >
+                {link.name}
+              </a>
+            ))}
+          </div>
+        </div>
+
        {/* Tagline */}
        <div className="text-center space-y-3">
          <p className="font-serif text-lg opacity-50">
--- a/components/network-map-section.tsx
+++ b/components/network-map-section.tsx
@ -27,87 +27,128 @@ const NODES: NetworkNode[] = [
    domain: "commonsstack.org",
    description: "Fund and govern the commons — primary root",
    x: 50,
-    y: 10,
+    y: 8,
  },
  {
    name: "P2P Foundation",
    domain: "wiki.p2pfoundation.net",
    description: "25,000 pages of commons knowledge",
    x: 50,
-    y: 92,
+    y: 95,
  },
  {
    name: "MycoFi",
    domain: "mycofi.earth",
    description: "Mycoeconomics & regenerative currencies",
-    x: 22,
-    y: 20,
+    x: 20,
+    y: 18,
+  },
+  {
+    name: "NoFi",
+    domain: "nofi.lol",
+    description: "Post-finance — making change, not money",
+    x: 80,
+    y: 18,
  },
  {
    name: "Mycopunk",
    domain: "mycopunk.xyz",
    description: "Building from beneath the surface",
-    x: 78,
-    y: 15,
+    x: 8,
+    y: 32,
  },
  {
    name: "rFunds",
    domain: "rfunds.online",
    description: "Threshold-Based Flow Funding research",
-    x: 32,
-    y: 30,
+    x: 30,
+    y: 28,
  },
  {
    name: "rStack",
    domain: "rstack.org",
    description: "Open source community coordination infrastructure",
-    x: 75,
-    y: 58,
+    x: 78,
+    y: 55,
  },
  {
    name: "Compost Capitalism",
    domain: "compostcapitalism.xyz",
    description: "Decomposing extractive systems",
    x: 10,
-    y: 50,
+    y: 55,
  },
  {
    name: "The Undernet",
    domain: "undernet.earth",
    description: "Community-owned infrastructure",
-    x: 90,
-    y: 40,
+    x: 92,
+    y: 38,
  },
  {
    name: "Post-Appitalism",
    domain: "post-appitalist.app",
    description: "Tools beyond extractive platforms",
-    x: 18,
+    x: 15,
    y: 78,
  },
  {
    name: "(You)rSpace",
    domain: "yourspace.online",
    description: "Community-owned digital spaces",
-    x: 62,
+    x: 65,
    y: 78,
  },
  {
    name: "Psilo-Cyber",
    domain: "psilo-cyber.net",
    description: "Encrypted mesh networks",
-    x: 85,
-    y: 72,
+    x: 88,
+    y: 70,
  },
  {
    name: "Trippin Balls",
    domain: "trippinballs.lol",
    description: "Expand your perspective",
-    x: 40,
-    y: 90,
+    x: 38,
+    y: 92,
  },
 ]

+// Building alongside — allied organizations
+const ALLIES: NetworkNode[] = [
+  {
+    name: "Giveth",
+    domain: "giveth.io",
+    description: "Public goods funding for the commons",
+    x: 30,
+    y: 62,
+  },
+  {
+    name: "Token Engineering",
+    domain: "tecommons.org",
+    description: "Token engineering for the commons",
+    x: 70,
+    y: 35,
+  },
+  {
+    name: "Enspiral",
+    domain: "enspiral.com",
+    description: "Collaborative livelihood network",
+    x: 35,
+    y: 78,
+  },
+  {
+    name: "Grassroots Economics",
+    domain: "grassrootseconomics.org",
+    description: "Community currencies in practice",
+    x: 85,
+    y: 85,
+  },
+]
+
+const ALL_NODES = [...NODES, ...ALLIES]
+
 const CONNECTIONS: [string, string][] = [
  ["mycostack.xyz", "commonsstack.org"],
  ["mycostack.xyz", "wiki.p2pfoundation.net"],
@ -116,25 +157,36 @@ const CONNECTIONS: [string, string][] = [
  ["mycostack.xyz", "compostcapitalism.xyz"],
  ["mycostack.xyz", "yourspace.online"],
  ["mycostack.xyz", "rstack.org"],
+  ["mycostack.xyz", "nofi.lol"],
  ["commonsstack.org", "wiki.p2pfoundation.net"],
  ["commonsstack.org", "mycofi.earth"],
  ["commonsstack.org", "mycopunk.xyz"],
  ["commonsstack.org", "rfunds.online"],
+  ["commonsstack.org", "nofi.lol"],
+  ["commonsstack.org", "tecommons.org"],
+  ["commonsstack.org", "giveth.io"],
  ["rfunds.online", "mycofi.earth"],
+  ["nofi.lol", "mycofi.earth"],
  ["rstack.org", "yourspace.online"],
  ["rstack.org", "undernet.earth"],
  ["wiki.p2pfoundation.net", "post-appitalist.app"],
+  ["wiki.p2pfoundation.net", "enspiral.com"],
  ["mycofi.earth", "mycopunk.xyz"],
+  ["mycofi.earth", "grassrootseconomics.org"],
  ["undernet.earth", "psilo-cyber.net"],
  ["compostcapitalism.xyz", "post-appitalist.app"],
  ["post-appitalist.app", "yourspace.online"],
  ["yourspace.online", "trippinballs.lol"],
  ["mycopunk.xyz", "psilo-cyber.net"],
  ["mycopunk.xyz", "undernet.earth"],
+  ["giveth.io", "rfunds.online"],
+  ["tecommons.org", "mycofi.earth"],
+  ["enspiral.com", "giveth.io"],
+  ["grassrootseconomics.org", "yourspace.online"],
 ]

 function getNode(domain: string) {
-  return NODES.find((n) => n.domain === domain)
+  return ALL_NODES.find((n) => n.domain === domain)
 }

 export function NetworkMapSection() {
@ -170,7 +222,7 @@ export function NetworkMapSection() {
          </h2>
          <p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto">
            Every node strengthens the whole. Every connection multiplies
-            possibility.
+            possibility. Building alongside allies who share the vision.
          </p>
        </div>

@ -204,7 +256,7 @@ export function NetworkMapSection() {
            </svg>

            {/* Node cards */}
-            {NODES.map((node) => {
+            {ALL_NODES.map((node) => {
              const isActive = hovered === node.domain
              const connected = isConnected(node.domain)
              const dimmed = hovered && !isActive && !connected
@ -251,7 +303,7 @@ export function NetworkMapSection() {

        {/* Mobile: Simple card list */}
        <div className="section-reveal md:hidden grid gap-3 grid-cols-1 sm:grid-cols-2">
-          {NODES.map((node, i) => (
+          {ALL_NODES.map((node, i) => (
            <a
              key={node.domain}
              href={`https://${node.domain}`}
--- a/components/nofi-section.tsx
+++ b/components/nofi-section.tsx
@ -0,0 +1,131 @@
+"use client"
+
+import { useSectionReveal } from "@/hooks/use-section-reveal"
+
+export function NoFiSection() {
+  const sectionRef = useSectionReveal()
+
+  return (
+    <section ref={sectionRef} className="relative py-32 px-6 noise-overlay">
+      <div className="mycelial-divider mb-20" />
+
+      <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
+          </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>
+        </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>
+              <a
+                href="https://nofi.lol"
+                target="_blank"
+                rel="noopener noreferrer"
+                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?
+            </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?
+            </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>
+      </div>
+    </section>
+  )
+}
--- a/components/scroll-provider.tsx
+++ b/components/scroll-provider.tsx
@ -4,17 +4,19 @@ import { useScrollProgress } from "@/hooks/use-scroll-progress"
 import { useEffect } from "react"

 // Color stops: [scrollPos, bg-L, bg-C, bg-H, fg-L, fg-C, fg-H, accent-L, accent-C, accent-H]
-// 8 sections: Hero → Legacy → Compost → Mycelium → Undernet → Anastomosis → Emergence → Network Map
-// Gentler rainbow fade with lighter start, lower chroma for subtlety
+// 9 sections: Hero → Legacy → Compost → Mycelium → Undernet → Anastomosis → NoFi → Emergence → Network Map
+// Gentle rainbow hue rotation, staying dark through most of the journey,
+// only lightening gradually at emergence/network map
 const COLOR_STOPS: number[][] = [
  [0.0,  0.18, 0.015, 10,   0.88, 0.02, 10,   0.50, 0.08, 10 ],  // Hero: warm twilight
  [0.10, 0.16, 0.018, 40,   0.86, 0.02, 40,   0.52, 0.10, 40 ],  // Legacy: faded orange
-  [0.20, 0.15, 0.025, 70,   0.84, 0.03, 70,   0.55, 0.10, 65 ],  // Compost: faded amber
-  [0.35, 0.18, 0.03,  145,  0.88, 0.03, 145,  0.55, 0.12, 150],  // Mycelium: faded green
-  [0.48, 0.24, 0.025, 230,  0.90, 0.02, 230,  0.52, 0.10, 225],  // Undernet: faded blue
-  [0.60, 0.45, 0.03,  290,  0.15, 0.02, 290,  0.58, 0.10, 285],  // Anastomosis: faded violet
-  [0.78, 0.82, 0.025, 345,  0.15, 0.02, 345,  0.58, 0.10, 340],  // Emergence: faded rose
-  [0.92, 0.92, 0.015, 30,   0.12, 0.02, 30,   0.55, 0.08, 25 ],  // Network Map: back to warm
+  [0.18, 0.15, 0.025, 70,   0.84, 0.03, 70,   0.55, 0.10, 65 ],  // Compost: faded amber
+  [0.30, 0.17, 0.03,  145,  0.88, 0.03, 145,  0.55, 0.12, 150],  // Mycelium: faded green
+  [0.42, 0.20, 0.025, 230,  0.88, 0.02, 230,  0.52, 0.10, 225],  // Undernet: faded blue
+  [0.52, 0.19, 0.025, 270,  0.87, 0.02, 270,  0.54, 0.10, 265],  // Anastomosis: faded indigo
+  [0.62, 0.18, 0.02,  310,  0.86, 0.02, 310,  0.52, 0.09, 305],  // NoFi: faded magenta
+  [0.75, 0.55, 0.025, 345,  0.92, 0.02, 345,  0.58, 0.10, 340],  // Emergence: faded rose, brightening
+  [0.90, 0.88, 0.015, 30,   0.12, 0.02, 30,   0.55, 0.08, 25 ],  // Network Map: warm light
 ]

 function lerp(a: number, b: number, t: number) {
--- a/hooks/use-section-reveal.ts
+++ b/hooks/use-section-reveal.ts
@ -17,7 +17,7 @@ export function useSectionReveal() {
          }
        })
      },
-      { threshold: 0.15, rootMargin: "0px 0px -50px 0px" }
+      { threshold: 0.05, rootMargin: "0px 0px -20px 0px" }
    )

    const revealElements = el.querySelectorAll(".section-reveal")