Back

Halloween Manor

A Halloween browser game: you’re the ghost of a dark old manor, possessing portraits, mirrors and rocking chairs to scare flashlight-carrying visitors out the front door. The visitors are the mascot Triboo in Halloween costumes, made with the Tripo API from costume to animation.

Author: Theodore
Try it live
Halloween ManorTry it live

Description

Halloween Manor is a Halloween mini-game that runs right in the browser. You’re the ghost of a dark old manor: visitors let themselves in with flashlights, and your job is to possess the things in the house, pick your moment to appear, and send them screaming out the front door one by one. Up to four visitors can be in the house at once, sometimes arriving in pairs, and each has their own nerve — the nameplates tell you who’s a scaredy-cat and who’s a skeptic.

The objects come in two kinds. The music box and the kitchen door are lures: they make a sound that draws anyone who hears it. The lamps, the rocking chair, the portrait, the floor mirror, and the bedroom’s bed and wardrobe are scares, and they only work if someone is looking — an eye lights up above an object when someone can see it right now. The basic play is lure first, then scare: the music box pairs with the bedroom lamp, the kitchen door with the rocking chair. The portrait is an ordinary lady until you possess it, when her eyes turn and her face melts into something horrible; a face lunges out of the floor mirror; and six horror paintings hang on the walls of the foyer, hallway, study, living room and bedroom.

Visitors only see what their flashlight is pointed at. When a beam falls on you, you grow denser and they stop to stare — but that alone won’t scare them. Press F or right-click to appear: the nearby lights dim twice like failing bulbs, and 0.6 seconds later you take shape as a dark figure, holding for 1.5 seconds as you slowly raise your head. Appearing only frightens two kinds of people: whoever has a flashlight on you, and anyone already nervous who can see you. The more frightened they are, the harder it hits, so use the objects to rattle people first and appear to finish the job. Appearing has an 18-second cooldown.

Hold the left mouse button on an object for about half a second to set a trap: frost creeps over it, and it springs on its own when someone comes close. You can have two traps at once, and a trap disarms if no one comes within 60 seconds. When your crosshair is on an object, a faint frost line appears on the floor marking where it can scare (or lure) people, and a small eye before a visitor’s name lights up when your next move will get them. After you act, the label by the crosshair tells you what happened — “Theo jumped” or “No one saw it”.

A game is one night of about five minutes. The first visitor walks in at the start, then another every 12 seconds until there are four in the house. At 3:20 the night closes — the porch light goes out and no one else comes — and at 4:30 dawn breaks and anyone still inside walks out on their own. When the last one leaves, the Register of Visitors opens: when each person came in, what they ran from or whether they left at dawn, with a closing line that depends on how many you scared off. There’s no score and no winning or losing; choose Keep haunting to carry on, or Another night to start over.

Controls: with a mouse and keyboard it’s third-person — you are the ghost. Click to lock the mouse, drift with WASD (straight through walls), look with the mouse and zoom the camera with the wheel. Click an object within 4 meters to possess it, hold the left button to set a trap, and press F or right-click to appear. Esc releases the mouse and shows the full controls, M mutes, and graphics quality is in the bottom-right corner. You can’t see visitors through walls, so follow their footsteps — headphones help. On phones and tablets the house becomes a top-down dollhouse: tap an object to possess it and rotate the view. That mode has no appearing, traps or paintings — scare a visitor again before they calm down and they’ll run.

A browser with WebGPU, such as a recent Chrome or Edge, is recommended; browsers without WebGPU fall back to WebGL2 automatically. It’s single-player, with no sign-in or download, though the first load takes a little while to fetch the models and compile the shaders. The game’s interface is in English.

How Tripo was used

Every character in the game — the visitors with their flashlights and the ghost you play — was made with the Tripo API; the house, furniture and props are built in code from basic shapes, and the paintings, portrait and mirror face are separate 2D textures.

  • Visitors: Triboo, the mascot of VAST, the team behind Tripo, in four Halloween costumes — a Victorian vampire, a lantern-carrying night explorer, a witch and a hand-drawn skeleton. Tripo image-to-image first poses Triboo in a T-pose, and all four costumes start from that one image, so the proportions match and the figures rig cleanly; a second image-to-image pass adds the costume while keeping the round black body, the logo on the front and the yellow sneakers, with the outfit made like vinyl-toy accessories: hats, capes and collars.
  • Visitor models: each costume image is turned into four views, then Tripo multiview-to-3D builds a model with PBR textures. In third person you mostly see visitors from behind, and the four views get the capes and shoulder wraps right on the back; the textures are delit so the game’s lamps and flashlights do the lighting.
  • Rigs and animation: after a riggability check, Tripo auto-rigging fits a humanoid skeleton, and eight Tripo preset animations are applied — idle, walk, run, look around, afraid, flee and two kinds of startle. Before export, a Blender script refines every visitor the same way: the ball body, hat and cape move as one piece with the torso, accessories by the legs don’t stretch with them, the triangle count is capped and root motion is removed. Each visitor comes to about 1.1–1.7 MB, with WebP textures.
  • The ghost: Tripo text-to-image produced four concept images, and the chosen one went through Tripo image-to-3D as an untextured white model — the translucent cold mist, the way it thickens in a flashlight beam and the dark solid form it takes when it appears are all drawn by the game’s own shaders, so it needs no textures. A Blender cleanup then pushed the face inside the hood into a deep hollow, brought it under 8,000 triangles and baked occlusion into the vertices, so the inside of the hood and the deep folds darken.

How it runs in the browser

There’s no game engine: the game is built directly on three.js’s WebGPU renderer with TypeScript and Vite, and switches to WebGL2 automatically in browsers without WebGPU. The build is a set of static files with relative paths, so it opens from any subpath on any static host.

The flashlights are the most important lights in the house: every visitor carries one, and each casts its own shadows. The ghost’s shader works out, pixel by pixel, which flashlight cones it’s standing in — inside a beam it thickens, its outline tightens and it picks up a little of the torch’s warmth, while outside it stays cold mist. When it appears, it swaps to a dark “solid” material that blocks light and writes depth, a little brighter on the side a flashlight is hitting. As the ghost passes through walls and furniture, they dissolve around it with frost along the edges.

All sound is synthesized live with Web Audio — there isn’t a single audio file in the game. The screams, the creak of the rocking chair, the lamp’s electric hum, the music box, the sting when the mirror face lunges and the house’s ambience are all generated in code. When you can’t see anyone through the walls, footsteps are how you find them.

The start button waits until the house, the first visitor outfit and a shader precompile for the whole house are ready; click it and the night begins in about 20 milliseconds. The other outfits download in the background as you play and join the rotation once their pipelines are compiled. Light flicker is capped for photosensitivity: no light dims more than three times in any second. Graphics come in High and Low, and Low renders at 75% resolution.