How we built The Flashlight: a horror story made of light and sound

For Halloween we wanted to find out how much fear a browser tab can hold. The Flashlight is the result: a five-minute horror story set in Harrow House, a dark house with the power out. You find three fuses, get them into the fuse box in the basement, and once the lights come back you have fifteen seconds to reach the front door. Something in the house is looking for you, and it only moves when it is out of your light.

It runs on a phone or a computer from a link, with nothing to install. This post is about how it is made.

One rule, built into the renderer

Most horror games give you a torch to see by. In The Flashlight the torch is the game. The light sits on your head, so it points wherever you look, and the presence can only move while it is outside the beam. That makes "is it lit?" the most important question the code asks, every frame.

The answer is not a simple distance check. The game tests the figure against the torch's cone at three heights, from the feet to the head, and widens the test as the figure gets close, because at arm's length no cone is wide enough to hold a whole body. Without that, walking past a figure you were lighting could still get you caught, which felt unfair the first time we tried it.

The torch is three lights working together: a spot light with soft shadows for the beam itself, a wider and dimmer spill around it, and a small fill at the lens so the nearest surfaces never go completely black. All three follow the battery. Brightness falls with the square root of the charge, so the beam fades slowly at first and quickly near the end, which is when it matters.

Light you can believe in a dark room

The scene is rendered in linear light into a floating-point buffer, then drawn to the screen through one final shader of our own. That pass does the tone curve and a colour grade (cold shadows, warm torchlight), a vignette, film grain that grows stronger in the dark, and a little chromatic fringing when something is close. It also draws the warning at the edge of the screen: amber, then red, on the side the threat is coming from.

Surfaces use physically based materials. Wood has a clear coat, metal reflects, glass behaves like glass, and everything picks up a faint environment reflection, a dark room with one cold window, so a polished surface catches the beam the way you expect it to.

On a phone, all of this has to hold a steady frame rate. The game estimates what the device can do when it starts, then keeps watching its own frame times. When frames run slow it lowers the resolution first, then the anti-aliasing, then the shadows, and it climbs back when there is headroom again. There is no quality menu to find.

A house made when the page opens

There are no image files for the house. Wallpaper, floorboards, plaster, concrete, wood and fabric are generated from seeded noise on canvases as the page loads, and normal and roughness maps are derived from the same noise, so stains, grain and wear catch the light. The writing that appears on the basement wall is lettered one character at a time while you watch.

The furniture is other people's modelling work: CC0 models from Poly Haven, and Sketchfab models for the two figures, the fire axe and the telephone, all credited on the experiment's page. The red figure moves with Mixamo animations: an idle, an attack with a wind-up you can dodge, and a flinch when the axe lands.

The half you cannot see: spatial audio

Sound does more of the work in The Flashlight than the picture does, because most of the house is dark. Almost every sound is synthesised while you play, from oscillators and filtered noise, with the Web Audio API.

Placed in the room. Every sound that comes from somewhere goes through a panner at its position in the house, using HRTF (head-related transfer function) panning, and the listener is your head. Turn left, and a footstep that was on your left is now in front of you. With headphones you can tell behind from in front, which is the point: when the game whispers "behind you", it means it.

A house with a size. Every placed sound also feeds one shared reverb. Its impulse response is built from shaped noise when the game starts: a few early reflections, then a dark tail of about two and a half seconds. One reverb for the whole house costs less than one per room, and it makes the rooms sound as if they belong to the same building.

The presence. What is hunting you has a voice of its own: a low growl from two saw-wave tones with a tremor in them, a rattle made from breath noise chopped into a stutter, and a scrape. They grow louder as it comes closer, and they come from where it is. When it appears, there is a scream built from formant-filtered voices.

Your own body. A heartbeat is always there, at about 56 beats a minute while you are calm. Dread, the presence's nearness and every scare push it up, to a ceiling of 175. Breathing follows a separate measure of fear: slow inhales and exhales when you are fine, shorter, catching ones when you are not. These are the sounds people mention first, and none of them are recordings.

The telephone. The house has a rotary phone, and it rings with a proper double ring made from two struck, inharmonic tones. If you answer it, you hear the one sound in the game that is not made in the browser: a short voice line generated with Google's Gemini speech model, sent through a telephone filter of our own, band-limited, with a little distortion and hiss, so it sounds as if it is coming down an old line.

Browsers will not play sound until you interact with the page, so the game starts with a sound check: a few knocks, a whisper and a heartbeat, a reminder about the silent switch on iPhones, and a note on the controls.

A director, not a script

The story is a set of beats rather than a fixed sequence. Each beat waits for its moment (a room, a fuse, how long the light has rested on something) and then plays out: a phone that rings until you answer it, a door that slams behind you, a figure in the mirror. The hunt begins once you are holding two fuses. If the presence stays in your light for too long, it vanishes and comes back somewhere ahead of you, a spot the game finds by casting rays for clear floor in front of you.

The fuses, batteries, photographs and the basement key are somewhere different on every run. Each new arrangement is checked before you start, so nothing lands inside a cabinet or out of reach. Escape once and you can go back in for a second pass: the whole house is mirrored, you start with thirteen percent battery, and the presence carries a light of its own.

Phones first

On a phone you drag to look and the light follows, a thumb pad on the left walks and turns, and you tap whatever you want to use. The fuse box, which on a computer you press and hold, becomes "tap it and stay close", because a finger cannot hold still for three seconds. The game asks for full screen wherever the browser allows it.

How do you test a horror game?

With a robot that plays it. A headless browser drives the whole story on a desktop screen and on a phone-sized one: it collects the fuses, restores the power, gets caught, escapes and starts the second pass, and fails the run on any error. Other scripts look for flicker by comparing still frames pixel by pixel, which is how we found two surfaces drawn on top of each other and a floor that shimmered under the moving beam.

What it is for

The Flashlight is a Lab experiment: something we build to find out what is possible before anyone asks. The same approach works for a seasonal campaign, a launch or a venue: a short story people play and pass on, from a link, built around a product or a place. If one of those is on your list, tell us about it.

Play The Flashlight with headphones on. It contains flashing lights, loud sounds and jump scares.