Dev.to WebDev πŸ›  Dev πŸ‘ 0 πŸ“– 6 min read

Halls of Horror: Build a Haunted House with Gemma, Then Dare Your Friends to Walk It

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine What I Built I've always treasured Halloween. It's my favorite holiday. My dad and I share the same love for Ha

Halls of Horror: Build a Haunted House with Gemma, Then Dare Your Friends to Walk It

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

I've always treasured Halloween. It's my favorite holiday. My dad and I share the same love for Halloween - I definitely inherited the love from him. I mean, there is a reason why I have Freddy and Jason tattoos!

I remember going to Netherworld for the first time back in college, 16 years ago. It was my first haunted house! I've gone almost every year since. I went to a few different haunted houses but nothing beats the best. I am so fond of it. The art. I view haunted houses as the ultimate art form. Netherworld just knocks it out of the park each year. They are the true masterminds of the art of Halloween.

I'm truly sad to miss this year because I’m recovering from ankle surgery but I will be back next year!

I wanted to build an app as an homage to my love for haunted houses and storytelling.

So I built Halls of Horror: a haunted house builder where Gemma, running right in your browser, is the creative director.

  • Pick your nightmare: an abandoned asylum, a carnival that never left town, a hotel with a sealed 13th floor, a toy shop after dark… or dream up your own
  • Choose how scary: Cozy creepy, Creepy or Terrifying
  • Gemma builds the haunt: the legend guests hear in line, then room after room of what they see, what they hear, the scare and the scare actor's line
  • A secret 13th room: behind the last room waits a locked door, with a twist ending you only see at the very end
  • Walk it: a dark, flickering hallway, room by room, with a flashlight that follows your mouse and creepy sound made live in your browser. No audio files at all.
  • Every character screams their own way: the ghost wails, the doll giggles, the clown laughs, the witch cackles, the shadow growls, the captain moans and the bellhop rings his bell
  • Sound captions: every scream, the thunder and the 13th door show up as text, so the scares work on mute too
  • Survive it: make it out and you get a card with the rooms you walked, the scares you survived, and whether you found the secret room, plus a button to share the haunt
  • Share it: send a link and your friends can walk your haunt, no download needed
  • Print the actor script: every room as a script for real scare actors. Home haunters, this one's for you.

How I read the theme: "Ghost in the Machine" is the ghost writer living in your browser. Gemma dreams up the haunt, and the walk-through puts you inside it.

Demo

Live app: https://halls-of-horror.onrender.com (Chrome or Edge on a laptop works best. Click "walk through a sample haunt" to try the walk-through without downloading Gemma.)

The homepage

The builder with your rooms

The β€˜You survived’ card with rooms walked, scares survived and the secret room found

Code

GitHub logo tmott13 / halls-of-horror

πŸ•―οΈ Gemma builds you a walk-through haunted house, right in your browser. Pick a theme, get a legend, rooms full of scares, and a secret 13th room. Painted scenes, a flashlight mode, character screams, and sound captions. No server, no sign-up. Built with Angular + WebLLM.

Halls of Horror

A blood-red keyhole looking into a dark hallway

Build a walk-through haunted house with Gemma. Then dare your friends to walk it.

Pick a nightmare (an abandoned asylum, a carnival that never left town, a hotel with a sealed 13th floor…), choose how scary, and Gemma, running right in your browser, writes your haunt: the legend guests hear in line, then room after room of what they see, what they hear, the scare and the scare actor's line. Behind the last room waits a locked 13th door with a twist ending.

Then take the walk-through: a dark, flickering hallway, room by room, with creepy sound made live in your browser (no audio files). Share a link and your friends can walk it too, no download needed.

Live: halls-of-horror.onrender.com Β· Built for the DEV Hacktoberfest Open-Source AI Challenge, Week 4: Ghost in the Machine.

How it works

  1. Design: pick a theme (or dream up your…

How I Built It

  • Open model: Gemma 2 2B (gemma-2-2b-it-q4f16_1-MLC) on laptops, with Gemma 3 1B as the lighter option for phones.
  • Runs in the browser: WebLLM runs Gemma on your GPU with WebGPU. It downloads once and is cached, so building works offline.
  • Sound: all synthesized with the Web Audio API: a low drone, wind, heartbeats, creaks, a detuned music box, a carnival waltz, and a different scream for each character.
  • Frontend: Angular 22 with signals, plus the Creepster and Special Elite fonts.
  • Hosting: a free static site on Render, with no backend at all.

Like my last four projects, the big idea is Gemma writes the words, and the app owns everything else:

  1. One room at a time. A 2B model loses the thread if you ask for a whole haunted house at once. So Gemma builds one room at a time, and each one sees the legend and the rooms before it. They stay on theme and never repeat.
  2. A simple format the app can always read. Gemma answers in ROOM / SEE / HEAR / SCARE / LINE. The app reads it even when Gemma adds bold or numbers, and fills in anything missing, so a room never breaks.
  3. The app picks the sound. If Gemma writes about a calliope, the room gets the carnival organ. Dripping water gets drips, whispers get whispers. Gemma never touches the audio.
  4. The twist is its own step. The secret 13th room gets its own prompt: it sees every room and has to flip the legend.
  5. Spooky, not gory. Every prompt asks for PG-13 haunted-house fun: no gore, no real people, no real tragedies. And before you enter, a warning screen lets you turn off sound or flashing light. Flashing starts off for anyone who prefers reduced motion.

I was surprised how well Gemma created the script for the haunted houses. A true mix of storytelling and spook.

I built this with Claude as my pair programmer. I picked the idea, made the product calls, and tested every haunt myself.

Accessibility

Accessibility is very important to me, which is why I included some methods inside Halls of Horror.

  • A content warning before you enter, with switches for sound, flashing light and the flashlight
  • Sound captions for every scream, the thunder and the door, read out by screen readers too
  • Reduced motion: the shaking, lunging and flickering turn off, and the scares just fade in and out
  • Keyboard friendly: Space, Enter or β†’ to keep walking, Esc to leave
  • Labeled buttons that say whether they're on or off
  • Your choices are remembered
  • A tap finishes the typing so you never wait

Spoiler alert: I will be creating a series soon called Vibe Check. A series on how AI misses the mark on accessibility and how humans are still needed "in the loop". I will also be making some updates to include more accessibility features and attributes to the projects I created for Hacktoberfest this month.

Why Does Open Innovation Matter?

  • It runs anywhere, even offline. Once Gemma is downloaded, you could plan a haunt in a basement with no signal, which feels right.
  • It's private. Your haunts are saved in your browser. Even the share link is the haunt, packed into the part of the link after #, which browsers never send to a server.
  • It's free. No API bill and no subscription, so home haunters and families can play with it all October.
  • It won't disappear. No service to shut down. The model, the code and your haunts are all yours.
  • I control the whole pipeline. I decide what Gemma sees, how it's broken into steps, and the safety rules around it.

The Spirit of It

In the spirit of Halloween, I hope this brings you a spark of joy or even a scare! I loved being able to share my love for Halloween with you! I enjoyed being able to combine my passions of tech, art, and storytelling together with my favorite holiday.

Prize Categories

  • Gemma: Gemma 2 2B and Gemma 3 1B run fully in the browser with WebLLM, writing the legend, every room and the secret 13th room.
  • Render: deployed as a free Render static site from a render.yaml blueprint.

Thanks to DEV, the Hacktoberfest team, and the MLC/WebLLM and Gemma teams. Happy Halloween!

πŸ“° Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.