All projects
Vue 3TypeScriptTwitch APIFirebase

Halloween Aife

A Halloween night game for Aife's stream made of 5 sequential puzzles, each unlocked at a specific time. One puzzle uses Twitch chat as its input - viewers type their answers live in chat to progress.

Oct 2021 Live demo
Halloween countdown timer with blood-red dripping numbers on black

Overview

A one-night Halloween experience broadcast on Aife’s stream. The game is a sequence of 5 puzzles displayed as a browser source, each one revealed at a scheduled time during the event.

Puzzles

  • A countdown timer with a 666 aesthetic and hidden audio, building tension before the game begins
  • A Twitch chat puzzle where viewers type directly in chat to submit answers; validated against an obfuscated solution using a character comparison algorithm
  • A visual state puzzle requiring a precise combination of CSS filters (invert, blur, contrast, hue, shadow…) and layered images to all be active simultaneously
  • A moving image pattern puzzle where sprites must be revealed or arranged correctly across the screen
  • A 3-field password puzzle; entering the correct codes and clicking the button redirects to the final URL, wrong answers play a piano slam sound effect

How it works

The root page reads the current time and switches between puzzle components accordingly - each puzzle is only shown during its scheduled window. The Twitch chat integration connects live to the channel so viewer messages feed directly into the puzzle logic.

Stack

  • Frontend: Vue 3, TypeScript, WindiCSS, Vite
  • Twitch: Twurple (chat connection for the chat puzzle)
  • Storage: Firebase