# Flywheel
<p align="center"><a href="https://abhione.github.io/flywheel/"><img src="docs/img/hero.gif" width="760" alt="Two-sided marketplace machine animating"></a></p>
**An agent skill that explains business concepts as live isometric machines.**
Name an idea ("a two-sided marketplace", "the SaaS flywheel"). The agent writes a small business model, invents a machine whose working *is* the concept, and builds it as one HTML page: hoppers, pipes, gates and gauges, with customers and money flowing as tokens. Sliders change the model, and hover or click shows what each part means.
> The machine is the explanation. Every number on screen comes from the same model that moves the parts.
Modelled on [Anatomy](https://github.com/wheresryan22/anatomy) by Ryan ([@wheresryan22](https://x.com/wheresryan22)), MIT, which does the same for machines and algorithms. This project keeps its skill structure and philosophy, with a separate, smaller kit built for business flows.
## Gallery
Ten marquee concepts. Click any image for the live, self-contained figure (or browse the [Pages gallery](https://abhione.github.io/flywheel/)).
| Concept | Figure |
|---|---|
| **Fig 1 · SaaS Flywheel** — A pipe-loop hopper feeds an activation turnstile; a flywheel spins with MRR while churn drains and referrals loop back. | [<img src="docs/img/saas-flywheel.png" width="360">](docs/figures/saas-flywheel.html) |
| **Fig 2 · Two-Sided Marketplace** — Buyer and seller hoppers feed a matching chamber; a toll gate takes the rake, a leak pipe shows disintermediation, network loops refill both sides. | [<img src="docs/img/two-sided-marketplace.png" width="360">](docs/figures/two-sided-marketplace.html) |
| **Fig 3 · LTV : CAC** — A balance scale: CAC weight blocks on one pan, monthly margin coins dropping onto the other until it tips at payback. | [<img src="docs/img/ltv-cac.png" width="360">](docs/figures/ltv-cac.html) |
| **Fig 4 · Unit Economics** — Revenue coins pass COGS and variable-cost gates; the contribution fills a fixed-cost tank before any spills into profit. | [<img src="docs/img/unit-economics.png" width="360">](docs/figures/unit-economics.html) |
| **Fig 5 · Burn & Runway** — A cash tank burns through an engine, a revenue pump refills it, and a runway dial plus a default-alive lamp read the outcome. | [<img src="docs/img/burn-runway.png" width="360">](docs/figures/burn-runway.html) |
| **Fig 6 · Cohort Retention** — Twelve glass tubes, one per cohort age, drain to a churn trough; retention and revenue wires trace the NRR smile. | [<img src="docs/img/cohort-retention.png" width="360">](docs/figures/cohort-retention.html) |
| **Fig 7 · Cash Conversion Cycle** — Goods ride a belt from inventory to invoice to cash while payables ride a shorter belt; the red strip between them is the cash gap. | [<img src="docs/img/cash-conversion-cycle.png" width="360">](docs/figures/cash-conversion-cycle.html) |
| **Fig 8 · Conversion Funnel** — A hopper pours prospects through three mesh sieves; rejects slide into bins and survivors land in the customer tank. | [<img src="docs/img/funnel.png" width="360">](docs/figures/funnel.html) |
| **Fig 9 · Pricing & Elasticity** — Buyers stand as columns of willingness to pay under a sliding price bar; only columns above the bar buy, and a dial tracks profit against the best price. | [<img src="docs/img/pricing-elasticity.png" width="360">](docs/figures/pricing-elasticity.html) |
| **Fig 10 · Cap Table & Dilution** — A sliced ownership turntable: each round's cartridge slides in and opens a slice, squeezing founders while the valuation rack grows. | [<img src="docs/img/cap-table.png" width="360">](docs/figures/cap-table.html) |
## Install
```bash
npx skills add abhione/flywheel
# or, for Claude Code:
git clone https://github.com/abhione/flywheel ~/.claude/skills/flywheel
```
It's a standard Agent Skill (a folder with `SKILL.md` at the root), so it also works from `.claude/skills/`, `~/.agents/skills/` (Codex) or `~/.config/opencode/skills/` (OpenCode).
Then ask your agent: *"Explain a two-sided marketplace"* or *"Make an interactive figure of our unit economics"*.
## What's inside
```
SKILL.md the skill: rule, workflow, kit summary
references/ model.md · metaphors.md · depth.md · kit.md · verify.md
kit/flywheel-kit.js renderer: iso camera, parts, shading, exact depth sort, token flow, UI shell, loop
kit/flywheel.css theme and materials
examples/saas-flywheel/ Fig 1 (reference figure)
figures/ Figs 2–10, generated by running the skill
docs/ GitHub Pages gallery: bundled single-file figures + thumbnails
scripts/verify.mjs headless-Chrome screenshots (desktop + phone) and run/audit/inspector checks
scripts/model-check.mjs runs a figure's model across slider extremes and flags NaN or negatives
scripts/bundle.mjs inlines the kit, giving one self-contained HTML file
```
## Requirements
- Figures: any modern browser. Plain HTML, SVG and JS, with no build step and no dependencies.
- Scripts: Node 18+, and Chrome or Chromium for `verify.mjs` (set `CHROME=` if it isn't on PATH).
```bash
node scripts/verify.mjs # screenshot every figure
MONTHS=24 node scripts/verify.mjs # …after 24 simulated months
node scripts/model-check.mjs figures/x.html # stress the model
node scripts/bundle.mjs figures/x.html dist/x.html
```
## Notes
Figures use illustrative models, not benchmarks. Each figure's note states its assumptions.
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md).
## Credit
The idea, skill structure and "the machine is the explanation" philosophy come from [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) (MIT). Thank you, Ryan.
## License
MIT. See [LICENSE](LICENSE), which also carries Anatomy's MIT notice.
