From e954386489c932c5969edc0431c75b68cfb185b1 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 4 Mar 2026 17:03:06 -0800 Subject: [PATCH] feat: add animated SVG visuals to rFlows landing page Three inline CSS/SVG animations demonstrate key concepts: - Hero: 3-funnel flow diagram with animated particles, threshold lines, rising/falling fill levels, and flowing dashed edges with % labels - How It Works: Sankey-style river view with multiple flowing bands showing Revenue/Grants splitting to Team A/B/Reserve - Funnel Model: animated water level cycling through overflow/healthy/ critical zones with overflow arrow that appears at peak fill All animations are pure SVG/CSS (zero external assets), responsive, and hidden on screens <480px. Replaces the static funnel metaphor text block with a side-by-side animated funnel + zone descriptions. Co-Authored-By: Claude Opus 4.6 --- modules/rflows/landing.ts | 328 ++++++++++++++++++++++++++++++++++---- 1 file changed, 301 insertions(+), 27 deletions(-) diff --git a/modules/rflows/landing.ts b/modules/rflows/landing.ts index e86f148..d5257b5 100644 --- a/modules/rflows/landing.ts +++ b/modules/rflows/landing.ts @@ -5,6 +5,57 @@ */ export function renderLanding(): string { return ` + +
rFlows @@ -16,7 +67,107 @@ export function renderLanding(): string { automatic overflow routing, and proportional flow visualization — then save it to your space.

-
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Source Pool + 🌊 + + + + + + + + + + + + Operations + ⚙️ + + + + + + + + + + Outcomes + 🎯 + + + + + + + 40% + + + + + + + + + + + + + + + 60% + + + + + + + + + + spending + + + max + min + +
+ +
Try the Demo → @@ -77,6 +228,75 @@ export function renderLanding(): string {

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.

+ + +
+ + + + + + + + + + + + + + + + + + Revenue + Grants + + + Team A + Team B + Reserve + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + River view — all flows from source to outcome + +
@@ -119,36 +339,90 @@ export function renderLanding(): string {

The Funnel Model

Every funding pool is a funnel with three zones. Thresholds trigger automatic behavior.

-
- -
-
OVERFLOW
-
Above max — excess redistributes to connected funnels
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + OVERFLOW + excess redistributes + + HEALTHY + normal flow rate + + CRITICAL + outflow restricted + + + MAX + MIN + + + + + + + overflow + +
- -
- MAX THRESHOLD + +
+
+
+ + Overflow Zone +
+

+ When funds exceed the max threshold, the excess automatically redistributes to connected funnels via overflow edges. +

+
+
+
+ + Healthy Zone +
+

+ Between min and max, the funnel operates normally. All outflow edges run at their configured allocation rates. +

+
+
+
+ + Critical Zone +
+

+ Below the min threshold, outflow is restricted to protect essential reserves. The funnel enters conservation mode. +

+
- - -
-
HEALTHY
-
Full flow rate — balanced operations, normal outflow
-
- - -
- MIN THRESHOLD -
- - -
-
CRITICAL
-
Below min — outflow restricted, conservation mode
-
-