Skip to content

Latest commit

 

History

History
44 lines (33 loc) · 5.51 KB

README.md

File metadata and controls

44 lines (33 loc) · 5.51 KB
Raw

O̅͒͊̎̌ͯ͋̀̉uͭ̒͂̉ͪ͐̌ͦ̀i͒͋ͭ͋́͑͗͒̔̅̓̓̎̒̾͂̈̔̍j̇͗ͮ̉͑̃ͩͩ̀̒ͥͧ̉ǎ͂ͣͩͥ̿̓ͤͬ ͛ͦ͌̔ͣ͑̄ͭ̎̑̅̽͑ͯoͦ̈͋̀͗ͧ͒̈̊̃̆̐̓͑͋̄̀nͧ͆ͬ̅̾l̈͊ͪͮ̄̽ͧi̇ͨ̿̂ͤͣ͛̒̐̐̈̾͋ͥ̌ͩ͆̀n̋́̃̍̑̓ͪeͨ̇ͥ̍ͭ͗̓ͣͮͤͪͩ̓ͣͥͫͮ͋̚

A web ho̲̘̙̜̮ͦrro̦̅̑̆̀r experience where you communicate with sp̙̝̜͐̇̀ir̛͡͏̀͝its͍̙̅ͣ using a Ouija board.

Try it here: 😱 😱 😱 https://ouija.attejuvonen.fi 😱 😱 😱

Screenshot of Ouija Online

Notable features:

  • Despite existing only as a web page, the spirits have the ability to m̜͙̼͉̊͐ͬo̖̗͆̽v̫̺̘̇͗e̮͎̦̞̼ ̩̥͉̆͋̆̎ͅt̞̬͍͓̅̾̎͆́h̫ễ̱̦̤͖̊̅ͭͥ̚ ̳̗͐ͥͭp̺̜̤̅̏̌ͮl̤͒̌a̙̺̣̗̘͆ͣ̒͗͊ͅy̝̻̭̖͑ͭ͑̉e̱͔̯̬̘̅̀͋̍̃ͥr͔͇͉̯̣ͤ̍'͚͎̖̲̞̬͈̈̅̇̑̇š́ͮͦ ̠͈͚̣̩̝ͅm̹̌͊o̗͐ͧ̇̊̏̉̔uͯͧ̓̎̋ͣ̈́s̺̩̗͓͉͈͒̾ͬͯ̒ͧ̆e͉͔̘̒̇̂ͤ towards letters on the board
  • Two different chatbots available: a scripted experience is available for all, and for players who have OpenAI API keys, there is a more versatile GPT-3 mode
  • The scripted experience has 3 achievements to unlock and various special effects including a few jumpscares 😱

How does it work

  • Ouija Online is built as a static website with vanilla JS, HTML, and CSS. No frameworks, no libraries, no generators, no bundlers, no servers. You can fork this repo and simply open index.html in your browser. (There are a couple of Cloudflare Workers to provide geolocation and logging, but these are supplementary functions and the app works fine without the workers.)
  • Control of the user's mouse is an illusion (settings have a toggle to reveal the trick visually).
  • Chatbot in GPT-3 mode constructs a prompt with verbal instructions, question-answer examples, previous question and answer, and current question. We request 5 completions for the prompt, and then heuristically choose one of them (considering length, repetition, dullness, etc.).
  • Chatbot in scripted mode utilizes state-of-the-art if-else technology.

Attribution

Design and implementation: Baobab Koodaa

Assets and effects:

  • The Ouija board image is a photograph of the original Ouija board from 1889, created by Kennard Novelty Company. According to Wikipedia, this image is in the public domain. Photographer is unknown.
  • Planchette PNG image is from KindPNG, which provide permission for use in "non-commercial or personal projects". Author is unknown.
  • Smoke effect used in tooltip is adapted from work by chokcoco. I modified the effect heavily in order to get smoother transitions for dissipation and hover. Those transitions now animate the Perlin turbulence filter by using SVG animate (not CSS!) in addition to some CSS transitions.
  • Spirit message text glitch Tiktok effect was popularized by Tiktok, implementation adapted from AmazingCSS.
  • Spirit message text glitch Zalgotext was inspired by the legendary Stackoverflow answer, implementation adapted from tchouky and The Great Rambler
  • Magnifying glass effect adapted from W3Schools example code.
  • Font 'Feral' was created by Marcus Lien Gundersen and was downloaded from 1001fonts, which provide permission for both personal and commercial use.
  • Font 'Carnevalee Freakshow' was created by Chris Hansen and was downloaded from 1001fonts, which provide permission for both personal and commercial use.
  • Font 'Kingthings Trypewriter 2' was created by Kevin King and was downloaded from 1001fonts, which provide permission for both personal and commercial use.
  • Background pattern used in first-visit popup is from Hero Patterns, which provide permission for use under CC BY 4.0 license.
  • Icons for settings and external links are from FontAwesome with permission for both personal and commercial use.
  • Jack-in-the-box audio is from SoundBible, uploaded by Mike Koenig with attribution license.
  • Creepy old photo used in easter egg is from Vintage Everyday, copyright expired.
  • Easter egg jumpscare audio is from Mixkit, which provide permission for both personal and commercial use.
  • Banshee scream jumpscare audio is from Pixabay, which provide permission for both personal and commercial use.
  • Glass crack PNG image is from SeekPNG, which provide permission for personal use.
  • Glass crack audio was recorded in-house.