Turn complex architecture diagrams into 60fps cinematic interactive stories.
English โข ็ฎไฝไธญๆ
When presenting distributed systems, microservices, or complex AI pipelines, static architecture diagrams have fundamental flaws:
- Cognitive Overload: A static 4K diagram with 100+ microservices and crisscrossing lines overwhelms the audience within 30 seconds.
- Slides vs. Videos Dilemma: Slide decks fragment the architectural topology into disjointed screenshots; screen recordings cannot be paused to inspect or zoom into specific service configs.
- Prohibitive Animation Costs: Crafting smooth motion graphics requires days of manual keyframing in After Effects.
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.
| Capability | FocusFlow | Traditional Slides (PPT / Keynote) | Static Diagramming (Draw.io / Excalidraw) | Screen Recording (Loom / OBS) |
|---|---|---|---|---|
| Cinematic Camera Pathing | Native 60fps Kinematics | Discrete manual transitions | โ None | Fixed perspective video |
| Interactive Node Exploration | Full (Pan / Zoom while playing) | โ Static slides | Manual canvas pan | โ Flat pixels |
| Zero-Friction Alignment | Sobel Edge Smart Snapping | Manual snapping | Manual alignment | โ None |
| Dynamic Flow Curves | Real-time Bezier glow routing | โ None | Static arrows | Pre-rendered pixels |
| Distribution Format | Self-contained Single-file HTML | Proprietary .pptx / .key |
Image / XML export | Heavy .mp4 / .webm video |
| Offline Execution | 100% Offline (Zero backend) | Depends on app | Requires web app | Local video player |
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.
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
Intelligent relative anchor calculation (right โ left, bottom โ top) connecting nodes with animated glowing pulses, customizable pulse colors, and directional indicators.
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.
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.
Compile your entire projectโbackground 4K image, overlays, audio narration, motion scripts, and player engineโinto a single self-contained .html file (
No installation needed. Open directly in your browser:
๐ https://focusflow.tumio.site/
# 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 buildfocusflow/
โโโ 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
| Package | Version | License | Description |
|---|---|---|---|
@focusflow/player |
v1.0.0 |
MIT | Lightweight (~35KB) 60fps canvas presentation runtime engine |
@focusflow/dsl |
v1.0.0 |
MIT | FocusFlow typed DSL schema, geometry types & validator |
@focusflow/studio |
v1.0.0 |
AGPL-3.0 | Interactive visual timeline authoring workbench |
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.
Contributions, issues, and feature requests are welcome!
Feel free to check the Issues page.
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.