Studio Runway Planner

What you’re building

You have the market analysis, the financial projections, and the storefront economics. Now the scariest question: how long can you actually operate before the money runs out?

Making a game is not a single transaction. It is 24-36 months of payroll, contractor invoices, software licenses, legal fees, and marketing spend. Every month the bank account gets smaller. The number of months between “we start” and “the account hits zero” is your runway. And if your runway is shorter than your development timeline, you are dead before you ship.

Right now, figuring this out means a spreadsheet with 36 rows and a lot of guessing. You are going to build a React application that makes the runway calculation visual, interactive, and scenario-aware. Input your team size, salaries, contractor costs, and overhead. See a month-by-month burn chart. Toggle between funding scenarios — self-funded, Kickstarter, publisher deal — and watch the runway extend or shrink in real time.

💬Runway is the number that keeps founders up at night

Every game studio that shut down mid-development ran out of runway. Not ideas, not talent, not market opportunity. Cash. The studios that survive are the ones that know their number — “we have 18 months of runway at current burn” — and plan accordingly. This tool gives you that number, updated in real time, with scenario modeling so you can see exactly what happens if you add a team member or lose a funding source.

By the end of this lesson you will have a React application with an interactive cashflow planner. It includes expense categories (legal/rights, salaries, contractors, tools/licenses, marketing), monthly burn rate visualization using Chart.js, three funding scenario comparisons, and a prominent runway indicator that answers the core question: “At this burn rate, you have X months before you need revenue.”

ℹSoftware pattern: Time-series cashflow model with scenario comparison

Fixed and variable expenses projected over time, with multiple funding scenarios modifying the starting balance and income events. This pattern appears in startup financial planning, project budgeting, and personal finance tools. The key technique is separating expense modeling from funding modeling so you can mix and match scenarios.

The showcase

Here is what the finished planner gives you:

Expense categories: Legal/Rights Acquisition (one-time), Team Salaries (monthly, per-role), Contractor Costs (variable, per-milestone), Tools & Licenses (monthly), Marketing (ramping toward launch)
Team builder: Add roles with monthly salary — Lead Developer, Artist, Sound Designer, Producer, QA. See total monthly payroll update in real time
Monthly burn chart: Chart.js bar chart showing expenses by category per month for 36 months, with a cumulative cash line overlay
Funding scenarios: Three toggleable panels:
- Self-funded: Starting capital input, no external money, pure runway countdown
- Kickstarter: Campaign goal, estimated net after fees (92% of gross), funds arrive at month 3
- Publisher deal: Advance amount, milestone payments schedule, revenue share percentage post-launch
Runway indicator: Large, prominent display: “At current burn rate: X months of runway.” Color-coded green (18+ months), amber (12-18), red (under 12)
Break-even overlay: If you input expected launch revenue (from your storefront simulator), the chart shows when cumulative revenue crosses cumulative expenses
Export: Download the full cashflow model as a CSV for your accountant or co-founder

The prompt

Open your terminal, navigate to a project folder, start your AI CLI tool, and paste this prompt:

Build a React application (using Vite) called runway-planner that models
monthly cashflow for a game development studio. This is for planning the
financial runway of a BloodRayne remake startup.

PROJECT STRUCTURE:
runway-planner/
  package.json
  index.html
  src/
    App.jsx               (main layout and state management)
    components/
      ExpenseEditor.jsx   (add/edit expense categories and line items)
      TeamBuilder.jsx     (add team roles with monthly salaries)
      BurnChart.jsx       (Chart.js monthly burn rate visualization)
      FundingScenarios.jsx (three funding scenario panels)
      RunwayIndicator.jsx (prominent runway countdown display)
      CashflowTable.jsx  (month-by-month breakdown table)
    data/
      defaults.js         (pre-filled BloodRayne expense defaults)
    styles/
      planner.css         (dark theme styling)

REQUIREMENTS:

1. DEFAULT DATA (src/data/defaults.js)
   Pre-fill with realistic BloodRayne remake estimates:

   ONE-TIME EXPENSES:
   - IP Rights / Licensing: $150,000 (month 1)
   - Legal Setup (LLC, contracts): $25,000 (month 1)
   - Dev Kits (PS5 + Xbox): $45,000 (month 2)

   MONTHLY TEAM (salaries, fully loaded with benefits/taxes at 1.3x multiplier):
   - Lead Developer / Technical Director: $12,000/mo
   - Gameplay Programmer: $10,000/mo
   - 3D Artist (characters): $9,000/mo
   - 3D Artist (environments): $9,000/mo
   - Animator: $8,500/mo
   - Sound Designer / Composer: $7,500/mo (part-time months 1-12, full-time 13-24)
   - Producer / Project Manager: $9,000/mo
   - QA Tester: $5,000/mo (starts month 12)

   MONTHLY OVERHEAD:
   - Game Engine License (Unreal royalty or Unity seats): $500/mo
   - Software tools (Blender, Substance, Jira, etc.): $800/mo
   - Cloud services (builds, CI/CD, storage): $400/mo
   - Office / coworking space: $2,000/mo
   - Insurance (business liability): $300/mo

   MARKETING (ramping schedule):
   - Months 1-12: $500/mo (community building, social media)
   - Months 13-18: $2,000/mo (trailer production, press outreach)
   - Months 19-24: $5,000/mo (launch campaign, influencer kits, Steam page optimization)
   - Month 24 (launch month): $15,000 one-time burst

   CONTRACTOR COSTS (milestone-based):
   - Concept art package: $15,000 (month 2)
   - Voice acting sessions: $25,000 (month 18)
   - Localization (5 languages): $20,000 (month 22)
   - QA external testing: $10,000 (month 20), $10,000 (month 23)

2. EXPENSE EDITOR (src/components/ExpenseEditor.jsx)
   - List all expense categories with line items
   - Edit any value inline (click to edit)
   - Add new line items to any category
   - Delete line items
   - Toggle line items on/off without deleting (for "what if" scenarios)
   - Show category subtotals and grand total monthly burn
   - Separate one-time costs from recurring costs

3. TEAM BUILDER (src/components/TeamBuilder.jsx)
   - Card for each team role showing: title, monthly salary, start month, end month
   - "Add Role" button with form fields
   - Drag to reorder (or up/down buttons)
   - Total monthly payroll displayed prominently
   - Benefits multiplier input (default 1.3x) applied to all salaries
   - Headcount summary: "X full-time, Y part-time, total monthly payroll: $Z"

4. BURN CHART (src/components/BurnChart.jsx)
   - Chart.js bar chart: stacked bars showing expense categories per month
   - Colors: salaries (blue), contractors (orange), tools (green), marketing (purple), legal (red)
   - Line overlay: cumulative cash remaining (starts at funding amount, decreases)
   - X axis: months 1-36
   - Y axis (left): monthly expenses in dollars
   - Y axis (right): cumulative cash remaining
   - Tooltip on hover showing breakdown for that month
   - Vertical marker at the month where cash hits zero ("runway end")

5. FUNDING SCENARIOS (src/components/FundingScenarios.jsx)
   Three tabs/panels, each modifying the starting balance and cash inflows:

   a. Self-Funded:
      - Input: starting capital (default: $250,000)
      - No external inflows
      - Runway = starting capital / average monthly burn

   b. Kickstarter:
      - Input: campaign goal (default: $800,000)
      - Kickstarter fee: 5%, payment processing: 3-5% (use 8% total)
      - Net funds: goal * 0.92
      - Funds available at month 3 (campaign + fulfillment delay)
      - Input: personal capital added (default: $50,000)
      - Runway = (personal capital + net Kickstarter) / average monthly burn

   c. Publisher Deal:
      - Input: total advance (default: $2,000,000)
      - Milestone schedule: 25% at signing (month 1), 25% at alpha (month 12),
        25% at beta (month 18), 25% at gold (month 24)
      - Publisher revenue share: input percentage (default: 40%)
      - Post-launch: revenue split shown but not factored into pre-launch runway
      - Runway = milestone payments / monthly burn (recalculated at each milestone)

   Each scenario shows: total available funding, monthly burn rate, runway in months,
   and whether runway exceeds development timeline (24 months). Green check if yes,
   red warning if no.

6. RUNWAY INDICATOR (src/components/RunwayIndicator.jsx)
   - Large, centered display showing runway in months for the selected scenario
   - Color: green (#10b981) if > 18 months, amber (#f59e0b) if 12-18, red (#ef4444) if < 12
   - Text: "At current burn rate, you have X months of runway"
   - Subtext: "Development timeline: 24 months. Buffer: +/- Y months"
   - Warning if runway < development timeline: "FUNDING GAP: You need $Z more to reach launch"

7. CASHFLOW TABLE (src/components/CashflowTable.jsx)
   - Month-by-month table: Month | Salaries | Contractors | Tools | Marketing | Other | Total Burn | Cash In | Balance
   - Highlight months where balance goes negative in red
   - Highlight milestone payment months in green
   - Totals row at bottom
   - Export to CSV button

8. STYLING (src/styles/planner.css)
   - Dark theme: #0a0a0f background, #141420 cards, #e0e0e0 text, #a855f7 accent
   - Chart.js dark theme config (dark grid lines, light labels)
   - Responsive layout: single column on mobile, multi-column on desktop
   - Print-friendly mode (media query) that removes dark background for PDF export

DEPENDENCIES: react, react-dom, chart.js, react-chartjs-2 (all via Vite)

SAMPLE INTERACTION:
User opens the app. Default BloodRayne expenses are pre-filled.
Monthly burn shows ~$70K/mo at full team.
Self-funded with $250K = ~3.5 months runway (red indicator, clearly not enough).
Kickstarter at $800K goal = ~$786K net + $50K personal = ~12 months (amber, tight).
Publisher deal at $2M = milestone payments sustain through 24 months (green, with buffer).
User removes one artist role ($9K/mo). Monthly burn drops to ~$61K.
Kickstarter runway extends to ~13.7 months. Still tight but more viable.

💡The defaults tell the BloodRayne story

The pre-filled expense data is not generic. It is a realistic estimate for a 24-month mid-budget action game remake with a team of 7-8 people. The salary figures reflect US remote-friendly game dev rates in 2026. The marketing ramp reflects how indie studios actually spend — minimal early, ramping hard in the last 6 months. If you change nothing and just look at the numbers, you already have a working budget model for your studio.

What you get

After the LLM generates the application:

runway-planner/
  package.json
  index.html
  src/
    App.jsx
    components/
      ExpenseEditor.jsx
      TeamBuilder.jsx
      BurnChart.jsx
      FundingScenarios.jsx
      RunwayIndicator.jsx
      CashflowTable.jsx
    data/
      defaults.js
    styles/
      planner.css

Fire it up

cd runway-planner
npm install
npm run dev

Open the dev server URL. You should see the planner with all default expenses pre-filled, the burn chart showing 24 months of stacked bars, and the runway indicator showing the self-funded scenario (which will be red — $250K does not last long at $70K/month burn).

If something is off

Problem	Follow-up prompt
Chart.js not rendering	`The burn chart shows a blank canvas. Make sure chart.js and react-chartjs-2 are imported correctly, and that you register the required Chart.js components: CategoryScale, LinearScale, BarElement, LineElement, PointElement, Tooltip, Legend. Call Chart.register() in BurnChart.jsx before using the component.`
Funding scenario tabs don’t switch	`Clicking the Kickstarter or Publisher tabs doesn't change the display. Add a selectedScenario state in FundingScenarios.jsx that toggles between "self-funded", "kickstarter", and "publisher". Conditionally render the appropriate panel and recalculate runway based on the selected scenario's funding.`
Monthly burn doesn’t update when editing expenses	`I changed a salary amount but the burn chart and runway indicator didn't update. Make sure the expense state is lifted to App.jsx and passed down as props. When any expense changes, the parent state updates and all child components re-render with new calculations.`
CSV export is empty or malformed	`The CSV download button produces an empty file. Build the CSV string by iterating over months 1-36, joining each row's values with commas, and prepending a header row. Use Blob and URL.createObjectURL to trigger the download. Make sure the data array is populated before export.`

How it works (the 2-minute version)

All expense data lives in React state at the top level. App.jsx holds the master list of expenses, team roles, and funding scenario parameters. Every child component reads from this state and calls setter functions to modify it. When anything changes, everything recalculates.
Monthly burn is calculated by iterating month 1 through 36. For each month, the calculator sums: active salaries (checking each role’s start/end month), any one-time costs scheduled for that month, contractor milestones, tools overhead, and marketing at the appropriate ramp level. This per-month array drives both the chart and the table.
The burn chart uses Chart.js with a dual-axis setup. Stacked bars on the left Y axis show expense categories. A line on the right Y axis shows cumulative cash remaining. The visual intersection where the line hits zero is your runway — you can see it without reading a single number.
Funding scenarios modify the starting balance and inject cash events. Self-funded is simple: starting capital minus monthly burn. Kickstarter adds a lump sum at month 3. Publisher deal adds milestone payments at months 1, 12, 18, and 24. The runway calculation is just “how many months until the balance goes negative.”
The runway indicator is a derived value, not a stored one. It recalculates every time any expense or funding parameter changes. This means you get instant feedback: “If I cut one artist, my runway extends by 2 months.” That feedback loop is the whole point of the tool.

🔍The funding gap is the hardest conversation

Let us be honest about the numbers in the default scenario:

Self-funded at $250K: About 3.5 months of runway. Not viable for a 24-month project. You would need to keep a day job and work on the game part-time, which means the timeline stretches to 4-5 years.
Kickstarter at $800K: About 12 months of runway with a lean team. Tight. You would need to hit alpha by month 12 and either find additional funding or start generating early access revenue. System Shock’s Kickstarter raised $1.3M, which gave Nightdive about 15 months of runway for their initial scope.
Publisher at $2M: Comfortable runway through a 24-month development. But you give up 40% of revenue post-launch. On a game that might gross $30M, that is $12M going to the publisher.

The right answer depends on your risk tolerance and your financial situation. The tool does not tell you which to pick. It shows you what each path looks like in cold numbers so you can make an informed decision.

Customize it

Add an early access revenue model

Many indie games launch into early access to generate runway:

Add an "Early Access" toggle to the funding scenarios. When enabled, add:
- Early Access launch month (input, default: month 15)
- Early Access price (input, default: $20, which is lower than full launch price)
- Projected EA monthly units: starts at input value (default 5000) and decays
  10% per month
- Platform cut applied (default Steam 30%)
- Show EA revenue as green bars stacking on top of the burn chart
- Recalculate runway including EA income. This is how many indie studios survive:
  ship an early build, generate cash, use that cash to fund the remaining development.

Add a salary benchmarking panel

Know if your rates are competitive:

Add a "Salary Benchmark" expandable panel that shows game industry salary ranges
for each role in the team builder. Data:
- Lead Developer: $100K-$160K/year ($8.3K-$13.3K/mo)
- Gameplay Programmer: $80K-$140K/year ($6.7K-$11.7K/mo)
- 3D Artist: $60K-$120K/year ($5K-$10K/mo)
- Animator: $55K-$110K/year ($4.6K-$9.2K/mo)
- Sound Designer: $50K-$100K/year ($4.2K-$8.3K/mo)
- Producer: $70K-$130K/year ($5.8K-$10.8K/mo)
- QA: $40K-$70K/year ($3.3K-$5.8K/mo)
Show a visual indicator for each role: below range, in range, or above range.
Note that these are US ranges; remote international hires can be 30-50% lower.

Add a “plan B” trigger system

Decide in advance when to pivot:

Add a "Decision Points" section where you can set triggers:
- "If runway drops below X months, activate Plan B"
- Plan B options: reduce team size by N people, switch from full-time to
  contractor model, seek emergency bridge funding, launch early access ahead
  of schedule, pivot to a smaller scope (e.g., PC-only instead of multi-platform)
- For each Plan B option, calculate the runway extension it provides
- Show these as markers on the burn chart timeline: "Month 14: If runway < 6,
  trigger early access launch"

Try it yourself

Open your CLI tool in an empty folder and paste the prompt.
Run npm install && npm run dev. Look at the self-funded scenario first. Feel the red indicator. $250K runs out fast.
Switch to the Kickstarter scenario at $800K. Amber. You have about 12 months. Is that enough to get to a shippable product? For a mid-budget action game, probably not — but you could get to a playable demo that unlocks additional funding.
Switch to the publisher deal at $2M. Green. You have buffer. But look at the revenue share — 40% of everything post-launch goes to the publisher. On a $30M gross game, that is $12M.
Go to the team builder and remove one of the two 3D artists. Watch the monthly burn drop by $9K and the runway extend across all scenarios. This is the core tradeoff: smaller team means longer runway but slower development.
Look at the cashflow table. Find the months where contractor costs spike (concept art, voice acting, localization). Those are the months where your burn jumps. Plan for them.
Export the CSV and open it in a spreadsheet. This is what you would share with an accountant, a co-founder, or an investor.

Key takeaways

Runway is the constraint that kills studios. Not bad ideas, not lack of talent. Running out of money before the game ships is the most common cause of studio death in indie and mid-budget development.
Self-funding a $70K/month burn rate requires serious personal capital. $250K gives you 3.5 months. Most people do not have $1.5M in personal savings to fund 24 months. This is why external funding matters.
Kickstarter is viable but tight for mid-budget scope. $800K (net ~$740K) gives you about 12 months of lean operation. System Shock raised $1.3M and still needed additional private investment to finish.
Publisher deals extend runway but cost equity. 40% revenue share on a $30M game is $12M. That is the price of sleeping well for 24 months. Whether it is worth it depends on your alternatives.
The team size to burn rate relationship is the most important lever. Every person you add costs $5K-$12K per month. Every person you remove extends runway by weeks or months. The tool makes this tradeoff visceral.

What’s next

You have the market analysis, the financial projections, the storefront economics, and the cashflow plan. The business case is built. Now it is time to think about the actual game. In the next lesson, you will build The Mechanics Breakdown — a CLI tool that takes gameplay observations from watching BloodRayne footage and converts them into structured mechanical specifications. Combat combos, blood rage meter, aura vision, enemy patrol patterns — all documented in a format you could hand to a game designer or feed into an engine prototype. The business planning phase is done. The game design phase starts now.

What you'll learn