Quick summary
Operation Blackout is a first-person night-ops shooter built in Three.js and art-directed like a film frame. There’s one rain-soaked city street, sodium streetlights against neon, a full cinematic post stack, and waves of enemies pushing a checkpoint. Sprint, slide, aim down the optic, and hold the line.
Who this template is for
Operation Blackout is a lighting exercise wearing a shooter. It’s for people who want proof that a browser scene can be art-directed like a film frame.
- Studios and agencies who need a cinematic real-time moment in the portfolio, something that reads as a still from a AAA night mission
- Developers studying a full Three.js post stack of ambient occlusion, bloom, film grade, and grain, wired into a playable loop instead of a tech demo
- Brands who want a moody, rain-soaked interactive scene that runs from a static folder with nothing to install
What problem this template solves
Most “browser games” on offer are either heavy engine exports or toy demos that fall apart the moment you look under the hood. This build is neither.
- Engine exports ship megabytes of runtime before the first frame ever draws
- Toy demos skip the hard parts: real collision, game states, difficulty curves, and persistence
- Builders who want to learn from a finished game almost never get to see the instructions that produced it
What you get with this template
You get a complete night-ops firefight on one rain-soaked city street. It’s a wave shooter wrapped in a cinematic grade, built module by module with no engine and no build step.
- A first-person loop with sprint, slide, aim-down-sights, and reload: the full modern-shooter control model on WASD and mouse
- A city street lit like a film set: sodium streetlights against darkness, cyan and magenta neon, and wet asphalt that carries every light as a streak
- Fifteen ES modules with strict ownership and one shared context, so you can inspect every system on its own: weapons, AI, rain, and grade
Page sections overview
| Section | Purpose |
|---|---|
| Cinematic post stack | Grade every frame with occlusion, bloom, and a film-style colour pass |
| Rain-soaked street set | Light one city block like a film set, with weather that sells the mood |
| Layered weapon viewmodel | Build the rifle the player stares at for the whole session out of real parts |
| Squad wave combat | Send readable enemy squads at a held checkpoint |
| Deterministic QA mode | Make every visual claim reproducible with seeded scenes and parked cameras |
Design and branding system
The art direction is a night city held to film rules: darkness is allowed to be dark, and every light source earns its place in the frame.
- A warm-cool split carries the palette: sodium amber against blue night, with cyan and magenta neon kept to accents
- The procedural sky stays overcast and low, so the street’s own lights do all the storytelling
- The interface holds to a thin tactical register (compass strip, ammo block, and objective line) and leaves the centre of the screen to the fight
Mobile and speed optimization
The game targets desktop first, with keyboard and mouse as the primary controls. It stays light enough to load instantly anywhere.
- There’s no engine runtime and no asset downloads, so the whole game arrives in a handful of requests
- A capped frame delta keeps the simulation stable even when the browser tab stutters or loses focus
- The page stays lean, with no frameworks or trackers between the visitor and the game loop
How this template helps you convert
A playable game holds attention longer than any showreel. The page around it is built to turn that attention into a next step.
- Visitors play right away, with no signup, download, or install before the first round
- The finished build is fully inspectable, which turns curious players into builders who want the prompt behind it
- Paying once for the prompt is a small, concrete next step while the session is still hot
Other information about this template
Operation Blackout is a rendering statement first and a game second. A few notes before you build on it.
- You need a keyboard and mouse. Pointer lock drives the aim, so the build targets desktop instead of touch
- Everything ships as static files: ES modules and a CDN import map, with no bundler, no server, and no install
- The street, the grade, and the weapon are separate modules, so any of the three can be swapped without touching the others
- Texture and HDRI assets are the heaviest part of the payload. Swap them for lighter sets if first paint matters more than fidelity
How it works
It runs entirely in the browser from static files: fifteen ES modules on a CDN import map, with no bundler and nothing to install. The street, the lighting, the weapon, and the grade are separate systems, and every screenshot on this page can be reproduced from the build’s own QA setup.
Screenshots
Captured from the live build: the title screen, then gameplay, level by level.
