Quick summary
Overclock is a top-down survival roguelite built in Three.js, and one idea drives everything: heat is both your damage buff and your ammunition. Firing heats the core and your damage climbs with it, but touch 100% and you melt down. The vent-dash dumps that stored heat as a nova whose radius scales with how hot you dared to run. So every second is a live risk-and-reward decision.
Who this template is for
Overclock is for anyone who needs proof that a browser tab can hold a real 3D game, systems and all.
- Studios pitching WebGL work who need a build that survives technical scrutiny, not a spinning-cube demo
- Developers studying runtime-generated content (procedural meshes, GPU particles, and synthesised audio) in one readable file
- Brands who want an arcade moment that loads instantly with nothing to install and no store to pass through
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 survival roguelite built on one idea: heat is both your damage buff and your ammunition. Every second is a live risk-and-reward decision.
- A heat economy where firing raises your damage and your risk together; touch one hundred per cent and you melt down
- A vent-dash that dumps stored heat as a nova whose radius scales with how hot you dared to run
- Five enemy types with distinct AI, a three-phase boss with orbiting shield pylons, and twenty-one stacking upgrades drafted between waves
Page sections overview
| Section | Purpose |
|---|---|
| Heat economy core loop | Tie damage output and death risk to the same rising heat value |
| Runtime-generated world | Assemble every mesh, texture, and sound at load with no asset files |
| Heat-reactive presentation | Drive lighting, fog, bloom, and the music filter from the same heat value |
| GPU particle simulation | Simulate particles on the GPU so hundreds of units stay on screen |
| Spatial-hash enemy AI | Run five distinct enemy behaviours on a spatial-hash grid for cheap collision |
| Adaptive resolution scaler | Hold sixty frames a second by trading resolution instead of dropping frames |
Design and branding system
The look is a reactor deck under load: dark industrial metal, molten accents, and an interface that gets more agitated as the core heats up.
- A molten palette anchored on deep graphite and ember orange, with the accent intensity driven live by the heat value rather than fixed in CSS
- Every surface is a procedurally patched PBR material, so the deck reads as metal without downloading a single texture file
- Post-processing (bloom, fog, and colour grade) is treated as part of the game state from the start
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
Overclock is a single self-contained file with no build step. A few notes before you adapt it.
- It needs WebGL and a discrete-capable GPU to hold sixty frames a second at full resolution; the scaler covers weaker machines
- Controls are keyboard and mouse, so the build targets desktop, and phones are prompted to turn sideways
- Enemy definitions, the upgrade pool, and the boss phases are all data tables you can rewrite without touching the engine
- Because nothing is an asset file, reskinning is a palette-and-parameters job rather than an art pipeline
How it works
Every pixel is generated at runtime, and there are no image or audio files anywhere. Meshes are assembled from primitives, and the reactor deck is a PBR material patched with procedural texture and a dynamic light-pool system. Particles are simulated on the GPU, and the whole soundtrack is synthesised through the Web Audio API. Heat drives the lighting, fog, bloom, and music filter, so the world visibly runs hot alongside you.
Under the hood
Five enemy types with distinct AI run on a spatial-hash grid. There’s a three-phase boss with orbiting shield pylons, twenty-one stacking upgrades drafted between waves, and an adaptive resolution scaler that holds sixty frames a second with hundreds of units on screen. It all ships as one self-contained file with no build step.
Screenshots
Captured from the live build: the title screen, then gameplay, level by level.
