Add FlowFi teaser page and cross-links to flowfi.network

- Add /flowfi bridge page with living systems comparison
- Add subtle flowfi.network links in main page and footer
- Add FlowFi-specific CSS animations (breathe, flow gradient)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/flowfi/page.tsx

@@ -0,0 +1,213 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: 'FlowFi — Finance as Metabolism, Not Mechanism',
+  description: 'NoFi didn\'t mean no flows. It meant no Finance-with-a-capital-F. FlowFi is the constructive emergence — finance as invisible vascular infrastructure.',
+  openGraph: {
+    title: 'FlowFi — Finance as Metabolism, Not Mechanism',
+    description: 'NoFi didn\'t mean no flows. It meant no Finance-with-a-capital-F.',
+    url: 'https://nofi.lol/flowfi',
+    siteName: 'NoFi',
+    type: 'website',
+  },
+}
+
+export default function FlowFi() {
+  return (
+    <main className="min-h-screen">
+      {/* Section 1 — Hero: From NoFi to FlowFi */}
+      <section className="min-h-screen flex flex-col items-center justify-center relative overflow-hidden px-4">
+        <div className="absolute inset-0 bg-gradient-to-b from-void via-nothing to-less opacity-80" />
+        <div className="absolute inset-0 bg-gradient-to-br from-flow-green/5 via-transparent to-flow-green/3 animate-flow" />
+        <div className="relative z-10 text-center max-w-4xl">
+          <Link href="/" className="text-zen/30 text-sm hover:text-flow-green transition-colors duration-500 mb-8 inline-block">
+            &larr; NoFi
+          </Link>
+          <a
+            href="https://flowfi.network"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block text-zen/25 text-xs tracking-[0.2em] mb-12 hover:text-flow-green/60 transition-all duration-1000 font-caveat"
+          >
+            the full experience flows at flowfi.network &rarr;
+          </a>
+          <p className="text-sloth text-sm tracking-[0.5em] uppercase mb-8 animate-slow-pulse">
+            a movement toward movement
+          </p>
+          <h1 className="font-marker text-7xl md:text-9xl font-bold mb-6 tracking-tighter wobble-1 animate-breathe">
+            <span className="text-flow-green">Flow</span>Fi
+          </h1>
+          <p className="font-caveat text-2xl md:text-3xl text-zen/70 mb-4">
+            NoFi didn&apos;t mean no flows.
+          </p>
+          <p className="font-caveat text-xl md:text-2xl text-zen/50 mb-16">
+            It meant no Finance-with-a-capital-F.
+          </p>
+        </div>
+        <div className="absolute bottom-8 text-zen/20 text-xs animate-drift">
+          keep flowing (or don&apos;t)
+        </div>
+      </section>
+
+      {/* Section 2 — The Insight: Finance Became the Disease */}
+      <section className="py-32 px-4 bg-nothing">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-2">
+            The Insight
+          </h2>
+          <div className="space-y-12 text-lg leading-relaxed text-zen/60">
+            <p>
+              Finance was supposed to be plumbing. Invisible infrastructure that moved
+              resources from where they pooled to where they were needed. Boring. Essential.
+              Beneath the surface.
+            </p>
+            <p>
+              Instead, it became a growth industry. The plumbing hired a marketing team,
+              went public, and started charging you for the privilege of having pipes.
+            </p>
+            <p className="font-caveat text-zen/80 text-2xl border-l-2 border-flow-green pl-6 wobble-1">
+              &ldquo;Your body doesn&apos;t have a Federal Reserve. It has kidneys.&rdquo;
+            </p>
+            <p>
+              NoFi was the diagnosis. FlowFi is the prognosis: finance that dissolves
+              back into infrastructure. Invisible. Metabolic. Beneath the surface
+              where it belongs.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Section 3 — Living Systems Comparison Table */}
+      <section className="py-32 px-4 bg-less">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-3">
+            Finance vs. Living Systems
+          </h2>
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-zen/20">
+                  <th className="pb-4 text-anti-green">Finance Pathology</th>
+                  <th className="pb-4 text-flow-green">Living System Health</th>
+                </tr>
+              </thead>
+              <tbody className="text-zen/60">
+                {[
+                  ['Yield optimization', 'Nutrient cycling'],
+                  ['Liquidity extraction', 'Osmotic balance'],
+                  ['Centralized banking', 'Distributed capillaries'],
+                  ['Interest rates', 'Feedback signals'],
+                  ['Capital accumulation', 'Hoarding = disease'],
+                  ['"Too big to fail"', 'Monoculture = fragility'],
+                  ['Governance tokens', 'Hormones nobody voted on'],
+                ].map(([pathology, health], i) => (
+                  <tr key={i} className="border-b border-zen/5">
+                    <td className="py-4 text-anti-green/70">{pathology}</td>
+                    <td className="py-4 text-flow-green/70">{health}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      {/* Section 4 — Key Reframes */}
+      <section className="py-32 px-4 bg-nothing">
+        <div className="max-w-3xl mx-auto text-center space-y-12">
+          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 scrawl-underline-flow mx-auto w-fit wobble-4">
+            Reframes
+          </h2>
+          {[
+            'Finance became the disease it claimed to cure.',
+            'FlowFi is finance that forgot it was finance.',
+            'From extractive to regenerative: finance as metabolism, not mechanism.',
+            'The best financial system is the one you never notice.',
+            "Capital doesn't accumulate in healthy systems. It circulates.",
+          ].map((line, i) => (
+            <p key={i} className={`font-caveat text-2xl md:text-3xl text-zen/70 leading-relaxed wobble-${(i % 4) + 1}`}>
+              {line}
+            </p>
+          ))}
+        </div>
+      </section>
+
+      {/* Section 5 — The Meta Statement */}
+      <section className="py-32 px-4 bg-less">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-1">
+            The Meta Statement
+          </h2>
+          <div className="space-y-12 text-lg leading-relaxed text-zen/60">
+            <p className="font-caveat text-zen/80 text-2xl text-center animate-breathe">
+              FlowFi doesn&apos;t need a domain. Domains are infrastructure.
+              FlowFi <em>is</em> infrastructure.
+            </p>
+            <p className="text-zen/30 text-sm text-center">
+              (We said that before we got{' '}
+              <a
+                href="https://flowfi.network"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-flow-green/40 hover:text-flow-green/70 transition-colors duration-1000 underline underline-offset-4 decoration-flow-green/20"
+              >
+                flowfi.network
+              </a>.
+              We contain multitudes. Also contradictions.)
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Section 6 — Footer/CTA */}
+      <section className="py-32 px-4 bg-void">
+        <div className="max-w-2xl mx-auto text-center">
+          <h2 className="font-marker text-4xl md:text-6xl font-bold mb-8 wobble-4">
+            Ready to <span className="text-flow-green">flow</span>?
+          </h2>
+          <p className="text-zen/40 mb-12">
+            You already are. The flows don&apos;t need your permission.
+            They just need you to stop building dams and calling them features.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-8">
+            <Link
+              href="/"
+              className="inline-block border border-zen/20 px-12 py-6 hover:border-flow-green/50 transition-all duration-[3000ms] wobble-2"
+            >
+              <span className="font-caveat text-zen/50 text-lg">
+                &larr; Back to Doing Nothing
+              </span>
+            </Link>
+            <a
+              href="https://flowfi.network"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block border border-flow-green/30 px-12 py-6 hover:border-flow-green/70 hover:bg-flow-green/5 transition-all duration-[3000ms] wobble-3"
+            >
+              <span className="font-caveat text-flow-green/70 text-lg">
+                Enter flowfi.network &rarr;
+              </span>
+            </a>
+          </div>
+          <p className="text-zen/30 text-sm mt-12 font-caveat">
+            NoFi &rarr; FlowFi &rarr; the full experience awaits
+          </p>
+          <p className="text-zen/20 text-xs mt-8">
+            Part of the CoFi cinematic universe
+          </p>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-8 px-4 bg-void border-t border-zen/5">
+        <div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center text-xs text-zen/20">
+          <p>FlowFi &bull; No Rights Reserved &bull; Flows Freely</p>
+          <p className="mt-2 md:mt-0">
+            A proud tributary of the CoFi cinematic universe
+          </p>
+        </div>
+      </footer>
+    </main>
+  )
+}

app/globals.css

@@ -5,6 +5,7 @@
   --color-nothing: #1a1a2e;
   --color-less: #16213e;
   --color-anti-green: #e94560;
+  --color-flow-green: #2dd4bf;
   --color-zen: #f5f5dc;
   --color-sloth: #c3b091;
   --font-family-mono: "Courier New", monospace;
@@ -80,3 +81,41 @@
   border-radius: 2px;
   opacity: 0.6;
 }
+
+/* FlowFi animations */
+@keyframes flow {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+@keyframes breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+
+.animate-flow {
+  animation: flow 8s ease-in-out infinite;
+  background-size: 200% 200%;
+}
+
+.animate-breathe {
+  animation: breathe 6s ease-in-out infinite;
+}
+
+/* FlowFi scrawl underline */
+.scrawl-underline-flow {
+  position: relative;
+  display: inline-block;
+}
+.scrawl-underline-flow::after {
+  content: '';
+  position: absolute;
+  left: -5%;
+  bottom: -4px;
+  width: 110%;
+  height: 3px;
+  background: var(--color-flow-green);
+  transform: rotate(-0.5deg) scaleX(0.95);
+  border-radius: 2px;
+  opacity: 0.6;
+}

app/page.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link'
+
 export default function Home() {
   return (
     <main className="min-h-screen">
@@ -206,6 +208,17 @@ export default function Home() {
               (We would have written more but that felt like too much effort)
             </p>
           </div>
+          <Link href="/flowfi" className="block text-zen/15 text-xs text-center mt-16 hover:text-flow-green/40 transition-colors duration-[3000ms]">
+            but what if doing nothing was actually doing something? &rarr;
+          </Link>
+          <a
+            href="https://flowfi.network"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block text-zen/10 text-xs text-center mt-4 hover:text-flow-green/30 transition-colors duration-[3000ms] font-caveat"
+          >
+            (the flows are already moving at flowfi.network)
+          </a>
         </div>
       </section>
 
@@ -281,7 +294,7 @@ export default function Home() {
         <div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center text-xs text-zen/20">
           <p>NoFi &bull; No Rights Reserved &bull; Please Don&apos;t Steal This (There&apos;s Nothing To Steal)</p>
           <p className="mt-2 md:mt-0">
-            A proud member of the CoFi cinematic universe
+            A proud member of the CoFi cinematic universe &bull; <Link href="/flowfi" className="hover:text-flow-green/40 transition-colors duration-1000">FlowFi</Link> &bull; <a href="https://flowfi.network" target="_blank" rel="noopener noreferrer" className="hover:text-flow-green/40 transition-colors duration-1000">flowfi.network</a>
           </p>
         </div>
       </footer>