---

💡 Why FocusFlow?

When presenting distributed systems, microservices, or complex AI pipelines, static architecture diagrams have fundamental flaws:

• Cognitive Overload: A static 4K diagram dumps hundreds of nodes at once. Audiences lose context within 30 seconds.
• Slides & Screen Recordings Fall Short: Slide decks crop out surrounding connections; recorded videos cannot be paused for interactive inspection or zooming into node details.
• Production Friction: High-end motion graphics typically require Adobe After Effects or complex video production tools.

FocusFlow bridges this gap. It lets you direct your architecture diagram like a movie camera:

• Smoothly pans, zooms, and rotates across nodes at 60fps GPU acceleration.
• Lights up dynamic cubic Bezier curves between dependencies.
• Generates AI voiceover with synchronized waveforms.
• Compiles into a 100% offline single-file HTML that runs in any browser with zero network or runtime dependencies.

📊 Comparison Matrix

---

✨ Key Features

🎥 1. 60fps GPU Cinematic Kinematics & Dynamic Bezier Flow

Continuous affine transforms (scale, translate3d, rotate) driven by viewport kinematics. Seamlessly transition from global overview to microscopic component details without aliasing or frame drops, with glowing Bezier paths illuminating runtime interactions.

🧲 2. Sobel Edge Smart Snapping

Equipped with a native computer-vision algorithm: drag a bounding box near any node or diagram card, and FocusFlow automatically snaps bounding boxes to the exact pixel borders in $< 1\text{ms}$.

⚡ 3. Dynamic Bezier Flow Routing

Intelligent relative anchor calculation (right ➔ left, bottom ➔ top) connecting nodes with animated glowing pulses, customizable pulse colors, and directional indicators.

🎙️ 4. AI Voiceover & Audio-Motion Sync

Built-in offline Web Speech API synthesizer and cloud LLM voiceover connector. Features visual audio waveform tracks, subtitle markers, and auto-computed camera dwell times.

🏝️ 5. Dynamic Island & Zen Mode

A sleek floating HUD pill at the bottom provides chapter progress, time remaining, playback controls, and element density counters. Supports auto-hiding Zen Mode for clean presentation recording.

📦 6. Single-File Offline Compiler

Compile your entire project—background 4K image, overlays, audio narration, motion scripts, and player engine—into a single self-contained .html file ($< 5\text{MB}$) that opens anywhere with double-click.

---

🚀 Quick Start

1. Try Online Live Demo

No installation needed. Open directly in your browser:
👉 https://focusflow.tumio.site/

2. Local Development (Turborepo)

# Clone the repository
git clone https://github.com/tumio-ltd/focusflow.git
cd focusflow

# Install dependencies (requires pnpm 9+)
pnpm install

# Start local workbench (FocusFlow Studio)
pnpm dev:studio
# 👉 Open http://localhost:5174 in your browser

# Build all packages
pnpm build

---

🏗️ Monorepo Architecture

focusflow/
├── apps/
│   └── studio/               # Visual Web Workbench (React 19, Tailwind CSS v4, Lucide)
├── packages/
│   ├── player/               # High-performance 60fps runtime engine (~35KB, Zero UI deps)
│   ├── dsl/                  # Shared TypeScript DSL specifications & JSON schema
│   ├── config-typescript/    # Shared TypeScript compiler options
│   ├── config-oxlint/        # High-speed Oxlint quality rules
│   └── config-tailwind/      # Semantic dark/light design tokens
├── examples/
│   ├── luxehms/              # 4K Microservices Architecture Showcase
│   ├── sales-fee/            # 5K Panoramic Sales Network & Commission Topology
│   ├── overlay-demo/         # Picture-in-picture dynamic drilldown showcase
│   └── simple-demo/          # Minimal 2-node smoke test
├── docs/                     # Technical whitepapers & algorithm specifications
└── scripts/                  # Standalone compiler & project generator

---

📦 Packages

---

📖 Documentation & Technical Whitepapers

Detailed architectural and algorithmic specifications are available in the docs/ directory:

• 📘 Studio Usage Guide: Step-by-step tutorial on creating and exporting projects.
• 📐 Sobel Edge Snapper Algorithm: Mathematics of convolutional gradient bounding box extraction.
• 🎵 Audio Sync & Export Matrix: Dual-engine audio synchronization and recording architecture.
• 📹 60fps WebM Recording Architecture: In-browser zero-jitter video encoding pipeline.
• 🛠️ PNPM Scripts Reference: Monorepo task orchestration reference.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the Issues page.

---

📄 License

FocusFlow is licensed under a dual-licensing model:

• Core Engine & DSL (packages/player, packages/dsl, tooling/*, examples/*): MIT License.
• Studio Visual Workbench (apps/studio): GNU Affero General Public License v3.0 (AGPL-3.0).

Copyright © 2026 Tumio Soft Technology Co., Ltd.