Engineering Sector-76: Building a Factorio-Inspired Dieselpunk MMO in the Browser (Vue 3, sass, Three.js, GSAP)

Browser games have a specific reputation:

!idle clickers, pay-to-win timers, and spreadsheets disguised as RPGs. When I started building Sector-76 one year ago, I wanted to engineer the exact opposite.

The goal was to craft a heavy, tactile, military-economic MMORPG that combines the deep industrial production chains of Factorio with the rusty, mechanical aesthetic of Machinarium and HighFleet. I wanted players to feel like they were sitting inside a subterranean bunker operating a physical submarine control panel, not scrolling through a flat web page.

Here is a dive into the frontend architecture, how I pushed Vue 3 to its limits, and how I achieved a tactile 60 FPS UI using SCSS, GSAP, and a touch of Three.js.

1. The Design Philosophy: Skeuomorphism vs. Web Performance Modern web design loves minimalism, whitespace, and flat UI components. A dieselpunk war machine is the opposite: it’s greasy, loud, scratched, and mechanical.

In Sector-76, every furnace chamber has analog needles that wobble under inertia, pressure gauges that vibrate, and steel hatches that swing open with weight. Creating this depth directly in the browser meant solving several rendering challenges:

SCSS & Procedural Texturing: Using SCSS with heavy CSS blend modes (mix-blend-mode: multiply), layered radial gradients, and custom SVG noise filters to simulate metal grain, soot, and rust dynamically without heavy image assets.

Micro-Physics with GSAP: Standard CSS transitions felt too flat. I used GSAP to give buttons, levers, and switches physical weight, spring recoil, and tactile resistance when clicked.

3D Depth with Three.js: For select complex components—like rotating fleet viewports, volumetric radar displays, and 3D hatch mechanics—I introduced lightweight Three.js contexts embedded right alongside standard Vue components.

1. Pushing Vue 3 to 60 FPS: Isolating High-Frequency State When you have a furnace room updating temperature, pressure, steam levels, and assembly line speeds simultaneously multiple times per second, Vue 3’s reactive system can easily hit a wall if every tick triggers a DOM reflow.

To keep the UI running at a smooth 60 FPS even on mid-range hardware, I decoupled high-frequency visual updates from Vue’s core reactivity tree:

Canvas & WebGL Offloading: Oscilloscopes, tactical radar grids, and fast-ticking gauges bypass the DOM entirely. They run on dedicated HTML5 Canvas / WebGL contexts driven by requestAnimationFrame.

Local Component Isolation: High-tick animations are handled locally in child components using GSAP tickers, receiving raw numeric targets rather than deep reactive objects.

Differential UI Updates: The frontend receives lightweight delta patches for state changes, updating only the specific DOM/Canvas nodes that actually moved.

1. Industrial Logic & Closed-Loop Economy Sector-76 features an interconnected economy with over 40 distinct resource types:

Scavenge Scrap from naval wrecks.

Smelt it into Iron and forge Steel.

Combine Steel with Hydraulics, Avionics, and Coolant to craft advanced armor plates, torpedoes, and naval vessels.

To prevent hyperinflation and keep the game world dynamic, the game features global War Contracts and an interactive P2P market. When a procurement order drops for 500 Titanium plates, prices surge instantly, and a live intercept ticker streams the action across the UI: [LIVE] COMMANDER X BOUGHT 200x STEEL. SURGE PRESSURE: HOT.

1. No Mobile, No Compromises People often ask when the mobile app is coming. The answer is simple: it isn't.

Trying to cram a multi-layered dieselpunk control room into a 6-inch vertical screen would ruin the UX. Sector-76 is engineered explicitly for desktop screens, precise mouse control, and immersive sessions.

1. Try the Open Demo The core loop—from mining and factory automation to real-time market trading and tactical naval battles—is live and open for testing.

🌐 Play the Open Demo: sector-76.com (Desktop browser required)

If you're a frontend engineer, Vue developer, or UI designer, I'd love your thoughts on the skeuomorphic approach, CSS tricks, and frontend state management!