Last66

"You have 60 seconds to survive." Project SAFE drops you into a burning apartment and tests whether you know what to do. Touch the door first? Crawl low? Use the stairs? Most people get it wrong.

Comment

Inspiration

Every year, 3,500 people die in house fires in the US alone — and studies show most of them made the wrong decision in the first 60 seconds. Not because they didn't know fire is dangerous, but because panic takes over and training kicks in — or doesn't.

Traditional fire safety education is a pamphlet on a wall or a 10-minute video you forget by lunch. We wanted to ask: what if you could actually experience a disaster and learn by doing? That question became Project SAFE — a cinematic 3D simulator that puts you inside the fire and teaches you how to survive.

What it does?

Project SAFE is an immersive first-person 3D disaster preparedness simulator built for the web. You wake up in an apartment as the smoke alarm blares. You have 60 seconds to make life-or-death decisions:

  • Touch the door — is it hot? That means fire is behind it.
  • Crawl low or walk through smoke? — smoke inhalation kills more people than flames.
  • Use the fire extinguisher or evacuate? — depends on the fire size.
  • Stairs or elevator? — elevators become death traps during fires.

Every wrong choice triggers a real-time education moment — not just "wrong answer," but the physics of what happened (flashover, backdraft, smoke toxicity) and the official safety protocol from FEMA and the Red Cross.

Features:

  • 4 disaster scenarios: Apartment Fire, Earthquake, Flash Flood, Gas Leak
  • Cinematic 3D apartment built with React Three Fiber — 5 rooms, furniture, emergency exits
  • Branching decision trees with 8+ decision points per scenario
  • Procedural audio engine — fire crackling, smoke alarm, heartbeat, explosions — all generated via Web Audio API (zero external audio files)
  • Real-time visual effects — volumetric smoke, bloom, chromatic aberration, screen shake, particle fire
  • Full HUD — timer, health bar, smoke exposure, minimap, score
  • Pause menu — Resume, Restart, Main Menu, volume controls, difficulty settings
  • Auth system — Register/Login, JWT tokens, score submission
  • Global leaderboard with scenario filtering
  • Admin analytics dashboard — survival rates, common mistakes, top players
  • Accessibility — subtitles, volume controls, difficulty levels, mobile graceful degradation

How I built it?

Frontend (where the magic happens):

  • React + Vite for the app shell and routing
  • React Three Fiber + Three.js + Drei for the entire 3D apartment, lighting, camera system, and first-person controls
  • @react-three/postprocessing for bloom, chromatic aberration, vignette, and SSAO
  • Zustand for game state management (health, score, decisions, audio, UI toggles)
  • Framer Motion for all 2D UI transitions (menus, modals, overlays)
  • TailwindCSS for the cinematic dark UI theme
  • Web Audio API — built a custom procedural audio engine that generates all sounds algorithmically (brown noise for fire, oscillator patterns for alarms, sub-bass for explosions)

Backend:

  • Express.js REST API with JWT authentication
  • In-memory data store (deployed to Render — no database dependency)
  • Score submission, leaderboard, admin analytics endpoints

3D Architecture:

  • Modular scene components — each room, each effect (fire, smoke, fog, particles) is a separate React component
  • GameLogic component handles all interaction detection via useFrame — checking distances to interactables every frame
  • Decision system with branching chains ( nextDecision field) that guide the player through the scenario
  • PostEffects component applies screen shake, chromatic aberration, and damage visual feedback

Challenges we ran into!!

  1. PointerLock was invisible — users couldn't figure out how to start moving. The 3D canvas needs mouse capture for FPS controls, but nothing indicated this. We added a full "CLICK TO PLAY" overlay with control instructions that disappears once the pointer locks.
  2. Black screen on game entry — the AudioManager component used useFrame from React Three Fiber but was rendered outside the Canvas. This crashed the entire component tree silently. Took extensive debugging to trace — it wasn't a rendering issue, it was a context mismatch.
  3. Decision chain was completely broken — decisions had a nextDecision field but nothing in the code ever read it. After the first decision, the game dead-ended. We rebuilt the entire decision flow with a pendingDecisionId chain and processDecision() → dismissEducation() → next decision pipeline.
  4. Score double-counted — makeDecision() in the store added points, AND the DecisionModal called addScore() with the same points. Every decision scored twice. Consolidated into a single processDecision() method.
  5. Port 5000 conflict on macOS — Apple's ControlCenter occupies port 5000 and can't be killed. Switched the entire backend to port 5001.
  6. MongoDB not installed — the original backend required MongoDB. Rewrote the entire server with an in-memory data store so it works instantly with zero setup.

Accomplishments that we're proud of

  • Fully procedural audio — every sound effect (fire, alarms, heartbeat, footsteps, explosions, earthquake rumble, flood water) is generated algorithmically with zero external audio files. The audio engine is ~200 lines of Web Audio API code.
  • 4 complete disaster scenarios — each with unique decision trees, unique visual effects, and unique safety education content. Not just a fire demo — a full multi-scenario preparedness platform.
  • Real safety education — every wrong decision teaches with real physics (flashover at 600°C, carbon monoxide toxicity levels, electrocution in standing water) sourced from FEMA and Red Cross guidelines. This isn't a game — it's training.
  • Decision chain architecture — decisions flow through branching chains where one choice determines which decision you see next. The same apartment, different paths, different outcomes.
  • The "wow" visual quality — post-processing pipeline with bloom, chromatic aberration, vignette, screen shake on damage, volumetric fog, particle fire with embers and sparks, all running at 60fps in the browser.
  • Zero-dependency audio — the fact that we built a complete sound design system with no MP3 files, no CDN, no loading screen for audio — all algorithmic — that's something we're genuinely proud of.

What I learned?

  • 3D web development is deceptively hard — React Three Fiber abstracts Three.js beautifully, but debugging issues like "component using hooks outside Canvas" requires deep understanding of React's reconciler and R3F's context system.
  • First-person controls need ruthless UX — technical features (PointerLock, WASD, mouse look) mean nothing if users can't figure out how to activate them. The "CLICK TO PLAY" overlay was more important than the entire 3D engine for user experience.
  • Educational content is the real product — the 3D visuals and audio are the hook, but the safety education after every decision is what makes this actually useful. We spent more time writing accurate safety content than writing shaders.
  • State management architecture matters — when you have 15+ interconnected state variables (health, smoke, score, decisions, phase, audio, UI toggles), getting the flow right (what triggers what, in what order) is the hardest part. We rewrote the game store 3 times.
  • In-memory backends are underrated for hackathons — zero setup, instant deploy, no database costs. The tradeoff (data resets on restart) is fine for a demo.

What's next for Last66?

  • Real 3D models — replace our geometric primitives with actual apartment models from Sketchfab/Blender for photorealistic interiors
  • Multiplayer scenarios — Socket.IO is already in the stack; add cooperative disaster response where teams navigate together
  • More disasters — Tsunami, wildfire, nuclear emergency, active shooter lockdown
  • VR support — WebXR integration for Meta Quest — the experience becomes truly immersive
  • AI-powered scoring — analyze movement patterns, reaction times, and decision sequences to give personalized preparedness ratings
  • Mobile AR mode — point your phone at your own apartment and get a fire safety assessment
  • School integration — package as a curriculum tool for K-12 fire safety education
  • Community contributions — open-source the decision tree framework so local fire departments can add scenarios specific to their region
  • Certification — partner with Red Cross to offer digital preparedness certificates after completing scenarios
Share this project:

Updates

Submission history