Visual interactive interface for threshold-based flow funding
Go to file
Jeff Emmett 9ca745756e Simplify funnel view, add drag-editable modal on double-click
Flow architecture:
- INFLOWS enter from TOP (emerald handles)
- OUTFLOWS leave from SIDES to other funnels (amber handles)
- OUTCOMES/DELIVERABLES flow from BOTTOM (blue handles)

Simplified default view:
- Clean funnel shape with liquid fill animation
- Compact value display
- Simple allocation bars (Out/Spend)
- Status badge (OK/LOW/OVER)

Double-click edit modal:
- Draggable MIN/MAX threshold handles on single line
- Current value indicator
- Draggable pie chart slices for allocation editing
- Outflows pie (to funnels) and Spending pie (to outcomes)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 19:36:48 +00:00
app Rebuild with n8n-style node-based interface 2026-01-29 18:30:34 +00:00
backlog Add flow visualization components and design spec 2026-01-29 18:01:38 +00:00
components Simplify funnel view, add drag-editable modal on double-click 2026-01-29 19:36:48 +00:00
lib Restructure flows: overflow sideways, spending downward 2026-01-29 19:24:41 +00:00
public Add public directory for Docker build 2026-01-29 18:12:28 +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 Fix basePath for /tbff deployment - hardcode at build time 2026-01-29 18:33:03 +00:00
next.config.js Fix basePath for /tbff deployment - hardcode at build time 2026-01-29 18:33:03 +00:00
package.json Rebuild with n8n-style node-based interface 2026-01-29 18:30:34 +00:00
pnpm-lock.yaml Rebuild with n8n-style node-based interface 2026-01-29 18:30:34 +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