jeffemmett
/
flow-funding
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Visual interactive interface for threshold-based flow funding
3 Commits 1 Branch 0 Tags 186 KiB
TypeScript 95.5%
CSS 2.7%
Dockerfile 1.4%
JavaScript 0.4%
Go to file
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
app Add funnel-style TBFF visualization with draggable thresholds 2026-01-29 18:05:58 +00:00
backlog Add flow visualization components and design spec 2026-01-29 18:01:38 +00:00
components Add funnel-style TBFF visualization with draggable thresholds 2026-01-29 18:05:58 +00:00
.gitignore Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
DESIGN.md Add funnel-style TBFF visualization with draggable thresholds 2026-01-29 18:05:58 +00:00
Dockerfile Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
README.md Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
docker-compose.yml Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
next.config.js Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
package.json Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
pnpm-lock.yaml Add flow visualization components and design spec 2026-01-29 18:01:38 +00:00
postcss.config.js Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
tailwind.config.ts Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00
tsconfig.json Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +00:00

README.md

Flow Funding

Visual interactive interface for threshold-based flow funding mechanisms.

Concept

Flow funding enables continuous, threshold-based resource allocation where:

  • Funds flow continuously rather than in discrete grants
  • Thresholds determine when funding activates/deactivates
  • Visual interfaces make the system intuitive and transparent

Features (Planned)

  • Interactive Flow Visualization: Real-time display of funding flows between sources and recipients
  • Threshold Configuration: Visual tools to set and adjust funding thresholds
  • Flow Dynamics: Animate how funds move when thresholds are met
  • Dashboard: Overview of all active flows, thresholds, and balances

Tech Stack

  • Next.js 14 (App Router)
  • React Flow / D3.js for flow visualizations
  • Tailwind CSS for styling
  • TypeScript

Development

pnpm install
pnpm dev

Deployment

Dockerized for deployment on Netcup RS 8000 via Traefik.

URL: https://flowidity.io/tbff

docker compose up -d --build

License

MIT