Post-Appitalism Website

Interactive website and canvas demo for Threshold-Based Flow Funding - a novel resource allocation mechanism for decentralized networks.

---

Quick Start

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Open browser
http://localhost:3000

Main Pages:

• / - Marketing site with vision, technical details, and call-to-action
• /italism - Interactive canvas demo with live propagators

---

Project Structure

post-app-website-new/
├── app/
│   ├── page.tsx                    # Main marketing landing page
│   ├── italism/page.tsx            # Interactive canvas demo (769 lines)
│   └── layout.tsx
├── components/
│   ├── hero-section.tsx            # Marketing sections
│   ├── problem-section.tsx
│   ├── interlay-section.tsx
│   ├── technical-section.tsx
│   ├── vision-section.tsx
│   └── ui/                         # shadcn/ui components
├── CANVAS_DEVELOPMENT_GUIDE.md     # ⭐ Complete technical documentation
└── README.md                       # This file

---

What Is This?

This project is part of the Post-Appitalism movement, demonstrating principles of:

• Malleable Software: Users reshape tools to their needs
• Flow-Based Economics: Resource allocation via threshold-based overflow
• Collaborative Creation: Multiple authors, shared artifacts
• Open & Inspectable: Transparent, remixable, hackable

The /italism Canvas

An interactive demo embodying these principles through a live programming canvas where:

• Arrows are functional connections that propagate data between shapes
• Visual = Executable: What you draw is what computes
• Scoped Propagators: Computation happens on edges (connections), not just nodes
• Flow Funding Visualization: Simulate resource allocation networks

Status: Phase 1 Complete ✅

• Draw arrows between shapes
• Set values on shapes
• Propagate values through arrows
• Expression editing (basic)

See CANVAS_DEVELOPMENT_GUIDE.md for complete technical details.

---

Technology Stack

• Framework: Next.js 16 (App Router) + React 19
• Styling: Tailwind CSS 4 + shadcn/ui components
• Language: TypeScript 5
• Package Manager: pnpm
• Canvas: HTML5 Canvas with custom event system
• Propagators: Inline FolkJS-inspired implementation (future: migrate to @folkjs/propagators)

---

Key Features

Marketing Site (/)

• Hero section with vision statement
• Problem/solution narrative
• Interlay integration details
• Technical deep-dive on Flow Funding
• Vision for the future
• Call-to-action for early access

Interactive Canvas (/italism)

Tools:

• Select: Click shapes to select, drag to move
• Draw: Freeform lines
• Rectangle: Draw rectangles (any direction)
• Arrow: Connect shapes with functional arrows
• Text: Add text labels
• Erase: Delete shapes (cleans up propagators)

Features:

• Shape value editor (set numeric values)
• Arrow expression editor (define transformations)
• Test Propagation button (trigger data flow)
• Visual arrow highlighting on selection
• Snap-to-center arrow endpoints
• Fullscreen mode

---

Development

Commands

pnpm dev        # Run dev server (http://localhost:3000)
pnpm build      # Build for production
pnpm start      # Run production server
pnpm lint       # Lint code

Making Changes to Canvas

1. Read the guide: CANVAS_DEVELOPMENT_GUIDE.md
2. File to edit: app/italism/page.tsx
3. Key discoveries: State management patterns, hit detection algorithms, debugging techniques
4. Testing workflow: Make ONE change, test, commit, repeat

Known Issues & Solutions

See "Known Issues & Solutions" section in CANVAS_DEVELOPMENT_GUIDE.md.

---

Roadmap

Phase 1: Live Arrows ✅ (Current)

• Arrow drawing and selection
• Propagator system
• Value propagation
• Expression editing

Phase 2: Enhanced Propagators

• Expression parser (evaluate "value: from.value * 2")
• Arrow auto-update when shapes move
• Visual flow animation
• Bi-directional propagation

Phase 3: Polish & UX

• Keyboard shortcuts
• Undo/redo system
• Persistence (localStorage/JSON export)
• Color picker
• Improved text editing

Phase 4: FolkJS Migration

• Use real @folkjs/propagators package
• Migrate to @folkjs/canvas (DOM-based shapes)
• Integrate @folkjs/geometry
• Add @folkjs/collab for real-time collaboration

Phase 5: Flow Funding Visualization

• Visual balance/threshold display
• Overflow animation
• Network simulation
• Integration with actual Flow Funding contracts

Phase 6: Scoped Propagators

• Edge-based computation
• Local state on arrows
• Constraint satisfaction
• Complex data transformations

---

Philosophy

This project aligns with the CLAUDE.md ultrathink methodology:

"Technology alone is not enough. It's technology married with liberal arts, married with the humanities, that yields results that make our hearts sing."

Every feature should:

• Work seamlessly with human workflow
• Feel intuitive, not mechanical
• Solve the real problem, not just the stated one
• Leave the codebase better than we found it

See ../../../CLAUDE.md for complete development philosophy.

---

Related Resources

• FolkJS Library: ../../folkjs/ (propagators, canvas, geometry packages)
• Flow Funding Paper: ../../../threshold-based-flow-funding.md
• FolkJS Demos: ../../folkjs/website/demos/propagators/
• Scoped Propagators Article: https://www.orionreed.com/posts/scoped-propagators

---

Deployment

Live Site: https://vercel.com/jeff-emmetts-projects/v0-post-appitalism-website

v0 Chat: https://v0.app/chat/s5q7XzkHh6S

Changes deployed via v0.app are automatically synced to this repository and deployed via Vercel.

---

Contributing

This project demonstrates principles of malleable, collaborative software. To contribute:

1. Read CANVAS_DEVELOPMENT_GUIDE.md
2. Understand the philosophy in ../../../CLAUDE.md
3. Make changes that embody Post-Appitalism principles
4. Test thoroughly (one change at a time!)
5. Document your discoveries

---

License

See repository root for license information.

---

Remember: This isn't just a drawing app. It's a demonstration of what software could be - malleable, collaborative, and alive. A tool that makes the abstract concrete, the invisible visible, and the future tangible.