Visual interactive interface for threshold-based flow funding
Go to file
Jeff Emmett 8e43f9e383 Rebuild with n8n-style node-based interface
Clean, modern interface using React Flow:
- SourceNode: Blue header, shows balance and flow rate
- ThresholdNode: Purple header with min/max slider controls
- RecipientNode: Shows funding progress with visual bar
- Animated edges showing flow direction
- Light theme matching n8n aesthetic
- Simulation toggle (pause/play)
- Legend panel explaining node types
- Zustand for state management

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 18:30:34 +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 Rebuild with n8n-style node-based interface 2026-01-29 18:30:34 +00:00
lib Rebuild with n8n-style node-based interface 2026-01-29 18:30:34 +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 Add Traefik priority to ensure /tbff path is matched 2026-01-29 18:23:32 +00:00
next.config.js Initial commit: Flow Funding project setup 2026-01-29 17:56:07 +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