jeffemmett
/
flow-funding
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
17 Commits 1 Branch 0 Tags 186 KiB
Commit Graph

2 Commits

Author SHA1 Message Date
Jeff Emmett 4b0491e999 Add funnel-style TBFF visualization with draggable thresholds 
New FundingFunnel component with three distinct zones:
- Overflow zone (above MAX): Straight walls, excess redistribution
- Healthy zone (MIN to MAX): Straight walls, normal operations
- Critical zone (below MIN): Narrowing funnel, restricted outflow

Features:
- Draggable MIN/MAX threshold lines with real-time updates
- Animated inflow particles (blue) dropping from top
- Animated outflow particles (pink) from bottom spout
- Gradient liquid fill with glow effect
- Live balance simulation based on flow rates
- Status panel showing current balance, rates, progress
- Single/Multi-funnel view toggle
- Zone color coding (rose/emerald/amber)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-29 18:05:58 +00:00
Jeff Emmett 14ebf0853d Add flow visualization components and design spec 
- DESIGN.md: Complete visual design specification for TBFF
- FlowCanvas: Main React Flow canvas with interactive demo
- SourceNode: Treasury/funding source visualization
- RecipientNode: Project recipient with threshold progress
- ThresholdGate: Visual gate showing open/locked state
- AnimatedFlowEdge: Animated particles showing fund flow
- Real-time flow simulation (balances update live)

Visual features:
- Particle animation along flow paths
- Threshold progress bars with color states
- Dark theme optimized for data visualization
- Mini-map and zoom controls

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-29 18:01:38 +00:00