jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev'

This commit is contained in:
Jeff Emmett 2026-03-04 17:03:12 -08:00
parent fbeb3743b2 e954386489
commit 7dfe69d861
1 changed files with 423 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

550
modules/rflows/landing.ts
View File

@ -1,66 +1,334 @@
/**
* rFlows — rich landing page body.
* Ported from rflows-online/app/page.tsx (Next.js/Tailwind).
* Returned by landingPage() in the module export;
* the shell wraps it with header, CSS, and analytics.
*/
export function renderLanding(): string {
return `
<style>
/* ── Landing animations ── */
@keyframes rf-flow-particle {
0% { offset-distance: 0%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { offset-distance: 100%; opacity: 0; }
}
@keyframes rf-fill-cycle {
0% { height: 15%; }
25% { height: 85%; }
50% { height: 60%; }
75% { height: 30%; }
100% { height: 15%; }
}
@keyframes rf-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@keyframes rf-river-flow {
0% { stroke-dashoffset: 40; }
100% { stroke-dashoffset: 0; }
}
@keyframes rf-glow {
0%, 100% { filter: drop-shadow(0 0 4px rgba(251,191,36,0.3)); }
50% { filter: drop-shadow(0 0 12px rgba(251,191,36,0.6)); }
}
@keyframes rf-edge-flow {
0% { stroke-dashoffset: 20; }
100% { stroke-dashoffset: 0; }
}
@keyframes rf-hero-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.rf-anim-wrap {
max-width: 700px;
margin: 2rem auto 0;
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(51,65,85,0.3);
background: rgba(15,23,42,0.4);
}
.rf-anim-wrap svg { display: block; width: 100%; height: auto; }
/* Responsive: hide animations on very small screens */
@media (max-width: 480px) {
.rf-anim-wrap { display: none; }
}
</style>
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline">rFlows</span>
<h1 class="rl-heading" style="background:linear-gradient(to right,#fcd34d,#6ee7b7,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
Threshold-Based Flow Funding
<h1 class="rl-heading">Design Funding Flows<br>
<span style="background:linear-gradient(135deg,#fbbf24,#34d399,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent">That Respond to Reality</span>
</h1>
<p class="rl-subtext" style="font-size:1.25rem;max-width:48rem;margin:0 auto 2rem">
Design continuous funding flows that respond dynamically to threshold conditions.
Connect funnels, set overflow rules, and track outcomes in real-time.
<p class="rl-subtext">
Model how money moves through your organization with <strong style="color:#e2e8f0">threshold-based funnels</strong>,
<strong style="color:#e2e8f0">automatic overflow routing</strong>, and
<strong style="color:#e2e8f0">proportional flow visualization</strong> &mdash; then save it to your space.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rflows" class="rl-cta-secondary" id="ml-primary">Try the Demo</a>
<a href="/create-space" class="rl-cta-primary">Create Your Own</a>
<!-- Animated hero diagram: 3 funnels with flowing particles -->
<div class="rf-anim-wrap" style="animation: rf-hero-float 6s ease-in-out infinite;border:1px solid rgba(251,191,36,0.15);background:rgba(15,23,42,0.6)">
<svg viewBox="0 0 700 260" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Funnel gradients -->
<linearGradient id="rf-g-amber" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fbbf24" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#f59e0b" stop-opacity="0.08"/>
</linearGradient>
<linearGradient id="rf-g-green" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#34d399" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#10b981" stop-opacity="0.08"/>
</linearGradient>
<linearGradient id="rf-g-blue" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#60a5fa" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#3b82f6" stop-opacity="0.08"/>
</linearGradient>
<!-- Flow paths for particles -->
<path id="rf-path1" d="M 230 100 C 280 100, 300 100, 330 100" fill="none"/>
<path id="rf-path2" d="M 470 100 C 520 100, 540 130, 560 160" fill="none"/>
<path id="rf-path3" d="M 230 140 C 260 160, 280 190, 300 210" fill="none"/>
</defs>
<!-- Source funnel -->
<g>
<rect x="80" y="40" width="150" height="180" rx="12" fill="url(#rf-g-amber)" stroke="#fbbf2440" stroke-width="1"/>
<!-- Threshold lines -->
<line x1="90" y1="80" x2="220" y2="80" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
<line x1="90" y1="160" x2="220" y2="160" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
<!-- Animated fill -->
<rect x="88" y="60" width="134" height="152" rx="8" fill="#fbbf24" opacity="0.12">
<animate attributeName="y" values="60;100;60;140;60" dur="8s" repeatCount="indefinite"/>
<animate attributeName="height" values="152;112;152;72;152" dur="8s" repeatCount="indefinite"/>
</rect>
<text x="155" y="35" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="600" font-family="system-ui">Source Pool</text>
<text x="155" y="135" text-anchor="middle" fill="#fbbf24" font-size="22" opacity="0.7">&#127754;</text>
</g>
<!-- Middle funnel -->
<g>
<rect x="320" y="40" width="150" height="180" rx="12" fill="url(#rf-g-green)" stroke="#34d39940" stroke-width="1"/>
<line x1="330" y1="80" x2="460" y2="80" stroke="#34d399" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
<line x1="330" y1="160" x2="460" y2="160" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
<rect x="328" y="90" width="134" height="122" rx="8" fill="#34d399" opacity="0.12">
<animate attributeName="y" values="90;70;90;110;90" dur="8s" begin="1s" repeatCount="indefinite"/>
<animate attributeName="height" values="122;142;122;102;122" dur="8s" begin="1s" repeatCount="indefinite"/>
</rect>
<text x="395" y="35" text-anchor="middle" fill="#34d399" font-size="11" font-weight="600" font-family="system-ui">Operations</text>
<text x="395" y="135" text-anchor="middle" fill="#34d399" font-size="22" opacity="0.7">&#9881;&#65039;</text>
</g>
<!-- Outcome funnel -->
<g>
<rect x="500" y="120" width="130" height="120" rx="12" fill="url(#rf-g-blue)" stroke="#60a5fa40" stroke-width="1"/>
<rect x="508" y="140" width="114" height="92" rx="8" fill="#60a5fa" opacity="0.12">
<animate attributeName="y" values="170;140;170;190;170" dur="8s" begin="2s" repeatCount="indefinite"/>
<animate attributeName="height" values="62;92;62;42;62" dur="8s" begin="2s" repeatCount="indefinite"/>
</rect>
<text x="565" y="115" text-anchor="middle" fill="#60a5fa" font-size="11" font-weight="600" font-family="system-ui">Outcomes</text>
<text x="565" y="185" text-anchor="middle" fill="#60a5fa" font-size="20" opacity="0.7">&#127919;</text>
</g>
<!-- Overflow edge: Source → Operations -->
<path d="M 230 90 C 265 90, 290 90, 320 90" fill="none" stroke="#fbbf24" stroke-width="3" opacity="0.35" stroke-dasharray="6 4">
<animate attributeName="stroke-dashoffset" values="20;0" dur="1.5s" repeatCount="indefinite"/>
</path>
<text x="275" y="82" text-anchor="middle" fill="#fbbf24" font-size="9" font-weight="600" opacity="0.7">40%</text>
<!-- Particles -->
<circle r="3" fill="#fbbf24" opacity="0">
<animateMotion dur="2s" repeatCount="indefinite" begin="0s"><mpath href="#rf-path1"/></animateMotion>
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0s"/>
</circle>
<circle r="2.5" fill="#fbbf24" opacity="0">
<animateMotion dur="2s" repeatCount="indefinite" begin="0.7s"><mpath href="#rf-path1"/></animateMotion>
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0.7s"/>
</circle>
<!-- Spending edge: Operations → Outcomes -->
<path d="M 470 130 C 490 140, 500 155, 510 170" fill="none" stroke="#34d399" stroke-width="2.5" opacity="0.35" stroke-dasharray="5 4">
<animate attributeName="stroke-dashoffset" values="18;0" dur="1.5s" repeatCount="indefinite"/>
</path>
<text x="500" y="140" text-anchor="middle" fill="#34d399" font-size="9" font-weight="600" opacity="0.7">60%</text>
<circle r="2.5" fill="#34d399" opacity="0">
<animateMotion dur="2.5s" repeatCount="indefinite" begin="0.3s"><mpath href="#rf-path2"/></animateMotion>
<animate attributeName="opacity" values="0;1;1;0" dur="2.5s" repeatCount="indefinite" begin="0.3s"/>
</circle>
<!-- Spending edge: Source → (bottom) -->
<path d="M 180 220 L 180 250" fill="none" stroke="#f59e0b" stroke-width="2" opacity="0.25" stroke-dasharray="4 3">
<animate attributeName="stroke-dashoffset" values="14;0" dur="1.5s" repeatCount="indefinite"/>
</path>
<text x="195" y="245" fill="#f59e0b" font-size="8" opacity="0.5">spending</text>
<!-- Labels -->
<text x="76" y="82" text-anchor="end" fill="#fbbf24" font-size="8" opacity="0.5">max</text>
<text x="76" y="162" text-anchor="end" fill="#ef4444" font-size="8" opacity="0.5">min</text>
</svg>
</div>
<div class="rl-cta-row" style="margin-top:2rem">
<a href="https://demo.rspace.online/rflows" class="rl-cta-primary" id="ml-primary">
Try the Demo &rarr;
</a>
<a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
</div>
<p style="font-size:0.8rem;color:var(--rs-text-muted,#64748b);margin-top:0.75rem">
Build your flow in the demo, then sign in to save it to your own space.
</p>
</div>
<!-- How It Works -->
<!-- What rFlows Does -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">What rFlows Does</h2>
<div class="rl-grid-4">
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
<h3>Funnel Budgets</h3>
<p>Each funding pool is a funnel with three zones &mdash; overflow, healthy, and critical &mdash; defined by min/max thresholds you set by dragging.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#34d399,rgba(16,185,129,0.6))">&#128260;</div>
<h3>Overflow Routing</h3>
<p>When a funnel exceeds its max threshold, excess funds automatically redistribute to connected pools &mdash; no manual intervention needed.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#60a5fa,rgba(59,130,246,0.6))">&#128200;</div>
<h3>Proportional Edges</h3>
<p>Flow edges scale in width proportionally to their allocation percentage. See at a glance where the most capital is moving.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#a78bfa,rgba(139,92,246,0.6))">&#127758;</div>
<h3>River View</h3>
<p>Switch to the Sankey river visualization to see how all funds flow through your system from source to outcome in one view.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div style="width:3rem;height:3rem;background:rgba(245,158,11,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
<svg style="width:1.5rem;height:1.5rem;color:#fbbf24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
</div>
<h3>Create Funnels</h3>
<p>Each funnel represents a funding pool with three zones: overflow (above max),
healthy (between thresholds), and critical (below min). Set thresholds by
dragging handles.</p>
<div class="rl-step">
<div class="rl-step__num">1</div>
<h3>Define Funnels</h3>
<p>Create funding pools and set their min/max thresholds. Drag the threshold handles to define when a funnel is healthy, overflowing, or critically low.</p>
</div>
<div class="rl-card rl-card--center">
<div style="width:3rem;height:3rem;background:rgba(16,185,129,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
<svg style="width:1.5rem;height:1.5rem;color:#34d399" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
<h3>Connect Flows</h3>
<p>Connect funnels with overflow edges (sideways) so excess funds automatically
route to other pools. Add spending edges (downward) to fund outcomes and
deliverables.</p>
<div class="rl-step">
<div class="rl-step__num">2</div>
<h3>Wire Connections</h3>
<p>Connect funnels with overflow edges (sideways) so excess funds route to other pools. Add spending edges (downward) to fund outcomes and deliverables.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">3</div>
<h3>Simulate &amp; Save</h3>
<p>Watch funds flow through your system in real-time. Adjust allocations with +/- controls on each edge. Save the flow to your space when you're happy with it.</p>
</div>
</div>
<div class="rl-card rl-card--center">
<div style="width:3rem;height:3rem;background:rgba(59,130,246,0.2);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
<svg style="width:1.5rem;height:1.5rem;color:#60a5fa" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3>Simulate &amp; Share</h3>
<p>Run simulations to see how funds flow through your system. Watch edge widths
scale proportionally. Save your space locally and share it with a link.</p>
<!-- Animated river visualization -->
<div class="rf-anim-wrap" style="margin-top:2.5rem;border-color:rgba(52,211,153,0.15)">
<svg viewBox="0 0 700 180" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rf-river-g1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fbbf24" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#34d399" stop-opacity="0.6"/>
</linearGradient>
<linearGradient id="rf-river-g2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#34d399" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#60a5fa" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="rf-river-g3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#34d399" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#a78bfa" stop-opacity="0.4"/>
</linearGradient>
</defs>
<!-- Source labels -->
<text x="30" y="55" fill="#fbbf24" font-size="10" font-weight="600" font-family="system-ui">Revenue</text>
<text x="30" y="115" fill="#34d399" font-size="10" font-weight="600" font-family="system-ui">Grants</text>
<!-- Destination labels -->
<text x="620" y="40" fill="#60a5fa" font-size="10" font-weight="600" font-family="system-ui">Team A</text>
<text x="620" y="95" fill="#a78bfa" font-size="10" font-weight="600" font-family="system-ui">Team B</text>
<text x="620" y="150" fill="#34d399" font-size="10" font-weight="600" font-family="system-ui">Reserve</text>
<!-- River bands — wide flowing Bezier paths with dashed animation -->
<!-- Revenue → Team A (wide band) -->
<path d="M 90 45 C 250 45, 400 30, 610 35" fill="none" stroke="url(#rf-river-g2)" stroke-width="18" stroke-linecap="round" opacity="0.5" stroke-dasharray="8 12">
<animate attributeName="stroke-dashoffset" values="40;0" dur="3s" repeatCount="indefinite"/>
</path>
<!-- Revenue → Team B (medium band) -->
<path d="M 90 55 C 250 60, 400 80, 610 90" fill="none" stroke="url(#rf-river-g3)" stroke-width="10" stroke-linecap="round" opacity="0.4" stroke-dasharray="6 10">
<animate attributeName="stroke-dashoffset" values="32;0" dur="3.5s" repeatCount="indefinite"/>
</path>
<!-- Grants → Team B -->
<path d="M 90 110 C 250 108, 400 95, 610 92" fill="none" stroke="url(#rf-river-g3)" stroke-width="8" stroke-linecap="round" opacity="0.35" stroke-dasharray="5 8">
<animate attributeName="stroke-dashoffset" values="26;0" dur="4s" repeatCount="indefinite"/>
</path>
<!-- Grants → Reserve -->
<path d="M 90 118 C 250 125, 400 140, 610 145" fill="none" stroke="#34d399" stroke-width="14" stroke-linecap="round" opacity="0.3" stroke-dasharray="7 10">
<animate attributeName="stroke-dashoffset" values="34;0" dur="3.2s" repeatCount="indefinite"/>
</path>
<!-- Flow particles along revenue path -->
<circle r="3" fill="#fbbf24" opacity="0.8">
<animate attributeName="cx" values="90;610" dur="4s" repeatCount="indefinite"/>
<animate attributeName="cy" values="45;35" dur="4s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0.9;0.9;0" dur="4s" repeatCount="indefinite"/>
</circle>
<circle r="2.5" fill="#34d399" opacity="0.7">
<animate attributeName="cx" values="90;610" dur="5s" begin="1s" repeatCount="indefinite"/>
<animate attributeName="cy" values="118;145" dur="5s" begin="1s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0.8;0.8;0" dur="5s" begin="1s" repeatCount="indefinite"/>
</circle>
<!-- Subtle grid lines -->
<line x1="90" y1="10" x2="90" y2="170" stroke="#334155" stroke-width="0.5" opacity="0.3"/>
<line x1="610" y1="10" x2="610" y2="170" stroke="#334155" stroke-width="0.5" opacity="0.3"/>
<!-- Title -->
<text x="350" y="174" text-anchor="middle" fill="#64748b" font-size="9" font-family="system-ui">River view &mdash; all flows from source to outcome</text>
</svg>
</div>
</div>
</section>
<!-- Use Cases -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Who Uses Flow-Based Funding?</h2>
<p class="rl-subtext" style="text-align:center">When budgets need to respond dynamically to changing conditions, threshold-based flows replace static spreadsheets.</p>
<div class="rl-grid-3">
<div class="rl-card">
<h3 style="color:#fbbf24">DAO Treasuries</h3>
<p>Multi-pool treasuries where governance votes set thresholds and overflow routes funds between working groups automatically.</p>
</div>
<div class="rl-card">
<h3 style="color:#34d399">Grant Programs</h3>
<p>Funding rounds where excess from one grant pool overflows to the next priority &mdash; no capital sits idle when other pools need it.</p>
</div>
<div class="rl-card">
<h3 style="color:#60a5fa">Revenue Sharing</h3>
<p>Revenue enters a source funnel and splits proportionally to downstream recipients. Adjust percentages and see the river update live.</p>
</div>
<div class="rl-card">
<h3 style="color:#a78bfa">Community Funds</h3>
<p>Public goods funding where contributions flow through conviction-based allocation curves. Min thresholds protect critical infrastructure.</p>
</div>
<div class="rl-card">
<h3 style="color:#f87171">Emergency Reserves</h3>
<p>Critical-zone protection: when a pool drops below its minimum, outflow is automatically restricted to preserve essential reserves.</p>
</div>
<div class="rl-card">
<h3 style="color:#22d3ee">Budget Modeling</h3>
<p>Prototype budget structures visually before committing capital. Simulate deposit/withdrawal scenarios and see cascading effects.</p>
</div>
</div>
</div>
@ -69,138 +337,166 @@ export function renderLanding(): string {
<!-- The Funnel Metaphor -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<div style="background:rgba(30,41,59,0.3);border-radius:1rem;border:1px solid rgba(51,65,85,0.5);padding:2rem">
<h2 class="rl-heading" style="text-align:center;margin-bottom:2rem">The Funnel Metaphor</h2>
<div style="max-width:28rem;margin:0 auto;font-family:monospace;font-size:0.875rem;text-align:center">
<h2 class="rl-heading" style="text-align:center">The Funnel Model</h2>
<p class="rl-subtext" style="text-align:center">Every funding pool is a funnel with three zones. Thresholds trigger automatic behavior.</p>
<!-- Overflow Zone -->
<div style="color:#fbbf24">
<div style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:0.75rem 0.75rem 0 0;padding:0.75rem 2rem">
<div style="font-weight:600">OVERFLOW ZONE</div>
<div style="font-size:0.75rem;color:#fcd34d">Above MAX threshold</div>
<div style="font-size:0.75rem;color:rgba(252,211,77,0.7)">Excess funds redistribute to other funnels</div>
<div style="display:flex;gap:2rem;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin-top:2rem">
<!-- Animated funnel SVG -->
<div class="rf-anim-wrap" style="max-width:280px;flex:0 0 auto;border-color:rgba(251,191,36,0.15)">
<svg viewBox="0 0 200 280" xmlns="http://www.w3.org/2000/svg">
<!-- Funnel body -->
<rect x="30" y="20" width="140" height="240" rx="14" fill="none" stroke="#334155" stroke-width="1.5"/>
<!-- Zone backgrounds -->
<rect x="32" y="22" width="136" height="70" rx="12" fill="#fbbf24" opacity="0.06"/>
<rect x="32" y="92" width="136" height="90" fill="#34d399" opacity="0.06"/>
<rect x="32" y="182" width="136" height="76" rx="12" fill="#475569" opacity="0.08"/>
<!-- Animated water fill -->
<clipPath id="rf-funnel-clip"><rect x="32" y="22" width="136" height="236" rx="12"/></clipPath>
<g clip-path="url(#rf-funnel-clip)">
<!-- Water body -->
<rect x="32" width="136" height="200" fill="#3b82f6" opacity="0.15">
<animate attributeName="y" values="120;40;80;160;120" dur="10s" repeatCount="indefinite"/>
</rect>
<!-- Water surface shimmer -->
<rect x="32" width="136" height="4" fill="#60a5fa" opacity="0.3">
<animate attributeName="y" values="120;40;80;160;120" dur="10s" repeatCount="indefinite"/>
</rect>
</g>
<!-- Threshold lines -->
<line x1="28" y1="92" x2="172" y2="92" stroke="#fbbf24" stroke-width="2" stroke-dasharray="6 4"/>
<line x1="28" y1="182" x2="172" y2="182" stroke="#ef4444" stroke-width="2" stroke-dasharray="6 4"/>
<!-- Zone labels -->
<text x="100" y="58" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="700" font-family="system-ui">OVERFLOW</text>
<text x="100" y="72" text-anchor="middle" fill="#fbbf24" font-size="8" opacity="0.6" font-family="system-ui">excess redistributes</text>
<text x="100" y="138" text-anchor="middle" fill="#34d399" font-size="11" font-weight="700" font-family="system-ui">HEALTHY</text>
<text x="100" y="152" text-anchor="middle" fill="#34d399" font-size="8" opacity="0.6" font-family="system-ui">normal flow rate</text>
<text x="100" y="218" text-anchor="middle" fill="#f87171" font-size="11" font-weight="700" font-family="system-ui">CRITICAL</text>
<text x="100" y="232" text-anchor="middle" fill="#f87171" font-size="8" opacity="0.6" font-family="system-ui">outflow restricted</text>
<!-- Threshold labels -->
<text x="180" y="96" fill="#fbbf24" font-size="9" font-weight="600" font-family="system-ui">MAX</text>
<text x="180" y="186" fill="#ef4444" font-size="9" font-weight="600" font-family="system-ui">MIN</text>
<!-- Overflow arrow (appears when high) -->
<g opacity="0">
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
<path d="M 170 55 L 195 55" stroke="#fbbf24" stroke-width="2" fill="none" marker-end="none"/>
<polygon points="192,50 200,55 192,60" fill="#fbbf24"/>
<text x="172" y="48" fill="#fbbf24" font-size="7" font-family="system-ui">overflow</text>
</g>
</svg>
</div>
<!-- Text description alongside -->
<div style="max-width:22rem;flex:1 1 18rem;padding-top:0.5rem">
<div style="margin-bottom:1.5rem">
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
<span style="width:12px;height:12px;border-radius:3px;background:#fbbf24;display:inline-block"></span>
<strong style="color:#fbbf24;font-size:0.95rem">Overflow Zone</strong>
</div>
<p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
When funds exceed the max threshold, the excess automatically redistributes to connected funnels via overflow edges.
</p>
</div>
<!-- Max Threshold Line -->
<div style="font-size:0.75rem;color:#f59e0b;font-weight:700;border-bottom:2px dashed rgba(245,158,11,0.5);padding:0.25rem 0;background:rgba(245,158,11,0.05)">
-- MAX THRESHOLD --
</div>
<!-- Healthy Zone -->
<div style="color:#34d399">
<div style="background:rgba(16,185,129,0.1);border-left:1px solid rgba(16,185,129,0.3);border-right:1px solid rgba(16,185,129,0.3);padding:1rem 2rem">
<div style="font-weight:600">HEALTHY ZONE</div>
<div style="font-size:0.75rem;color:#6ee7b7">Normal operations</div>
<div style="font-size:0.75rem;color:rgba(110,231,183,0.7)">Full flow rate, balanced funding</div>
<div style="margin-bottom:1.5rem">
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
<span style="width:12px;height:12px;border-radius:3px;background:#34d399;display:inline-block"></span>
<strong style="color:#34d399;font-size:0.95rem">Healthy Zone</strong>
</div>
<p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
Between min and max, the funnel operates normally. All outflow edges run at their configured allocation rates.
</p>
</div>
<!-- Min Threshold Line -->
<div style="font-size:0.75rem;color:#ef4444;font-weight:700;border-bottom:2px dashed rgba(239,68,68,0.5);padding:0.25rem 0;background:rgba(239,68,68,0.05)">
-- MIN THRESHOLD --
</div>
<!-- Critical Zone -->
<div style="color:#94a3b8">
<div style="background:rgba(51,65,85,0.3);border:1px solid rgba(71,85,105,0.3);border-radius:0 0 0.75rem 0.75rem;padding:0.75rem 2rem">
<div style="font-weight:600;color:#f87171">CRITICAL ZONE</div>
<div style="font-size:0.75rem;color:#fca5a5">Below MIN threshold</div>
<div style="font-size:0.75rem;color:#64748b">Outflow restricted, conservation mode</div>
<div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
<span style="width:12px;height:12px;border-radius:3px;background:#f87171;display:inline-block"></span>
<strong style="color:#f87171;font-size:0.95rem">Critical Zone</strong>
</div>
<p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
Below the min threshold, outflow is restricted to protect essential reserves. The funnel enters conservation mode.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Ecosystem Integration -->
<!-- Ecosystem -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Ecosystem Integration</h2>
<h2 class="rl-heading" style="text-align:center">Connects to Your Stack</h2>
<p class="rl-subtext" style="text-align:center">
rFlows connects to other rSpace modules for end-to-end treasury governance.
rFlows plugs into other rSpace modules for end-to-end treasury governance.
</p>
<div class="rl-grid-2" style="max-width:700px;margin:0 auto">
<div class="rl-grid-3" style="max-width:900px;margin:0 auto">
<div class="rl-integration">
<div class="rl-icon-box">&#128176;</div>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">&#128176;</div>
<div>
<h3><a href="/rwallet" style="color:#14b8a6;text-decoration:none">rWallet</a></h3>
<p>On-chain balances and wallet-based treasury tracking for decentralized communities.</p>
<p>On-chain balances feed into funnels as real-time deposits. Multi-sig wallets as funding sources.</p>
</div>
</div>
<div class="rl-integration">
<div class="rl-icon-box">&#128499;</div>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#8b5cf6,rgba(139,92,246,0.6))">&#128499;</div>
<div>
<h3><a href="/rvote" style="color:#14b8a6;text-decoration:none">rVote</a></h3>
<p>Governance decisions that direct fund allocation through formal proposal workflows.</p>
<h3><a href="/rvote" style="color:#8b5cf6;text-decoration:none">rVote</a></h3>
<p>Governance decisions set flow thresholds and allocation percentages through formal proposals.</p>
</div>
</div>
<div class="rl-integration">
<div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#128202;</div>
<div>
<h3><a href="/rdata" style="color:#0891b2;text-decoration:none">rData</a></h3>
<p>Analytics dashboards pull from flow events &mdash; track deposits, withdrawals, and allocation history.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Built on Open Source -->
<!-- Under the Hood -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
<p class="rl-subtext" style="text-align:center">The libraries and tools that power rFlows.</p>
<div class="rl-grid-3">
<h2 class="rl-heading" style="text-align:center">Under the Hood</h2>
<div class="rl-grid-4">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127754;</div>
<h3>Flow Service</h3>
<p>Custom budget flow engine powering the river visualization and conviction-based allocation logic.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
<h3>Flow Engine</h3>
<p>Custom allocation engine computes overflow cascades, spending splits, and threshold responses in real-time.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128451;</div>
<h3>PostgreSQL</h3>
<p>Reliable relational storage for space-flow associations, transaction history, and pool balances.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#6366f1,rgba(99,102,241,0.6))">&#128274;</div>
<h3>EncryptID</h3>
<p>Passkey-based auth &mdash; no passwords, no seed phrases. Sign in with biometrics to save flows to your space.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#9889;</div>
<h3>Hono</h3>
<p>Ultrafast web framework for the API layer &mdash; lightweight, typed, and edge-ready.</p>
</div>
</div>
</div>
</section>
<!-- Your Data, Protected -->
<section class="rl-section">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Your Data, Protected</h2>
<p class="rl-subtext">How rFlows keeps your information safe.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128274;</div>
<h3>End-to-End Encryption</h3>
<span class="rl-badge">Coming Soon</span>
<p>All content encrypted before it leaves your device. Not even the server can read it.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">&#128260;</div>
<h3>Automerge CRDT</h3>
<p>Real-time sync across collaborators. Multiple people can edit flows simultaneously with automatic conflict resolution.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128373;</div>
<h3>Zero-Knowledge Architecture</h3>
<span class="rl-badge">Coming Soon</span>
<p>The server processes your requests without ever seeing your data in the clear.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127968;</div>
<h3>Self-Hosted</h3>
<p>Run on your own infrastructure. Your server, your rules, your data.</p>
<div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#127760;</div>
<h3>Local-First</h3>
<p>Works offline. Changes sync when you reconnect. Your data lives on your device first, server second.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="rl-section rl-section--alt">
<section class="rl-section">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Ready to design your funding flows?</h2>
<p class="rl-subtext">Start with the interactive demo or create your own space with custom funnels and connections.</p>
<h2 class="rl-heading">Ready to model your funding flows?</h2>
<p class="rl-subtext">Build a flow in the demo, then save it to your own space with one click.</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rflows" class="rl-cta-primary">Try the Demo</a>
<a href="/create-space" class="rl-cta-secondary">Create Your Own</a>
<a href="https://demo.rspace.online/rflows" class="rl-cta-primary">Open the Demo &rarr;</a>
<a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
</div>
</div>
</section>