Ouijably, Real time messaging from beyond the grave
summary
A browser PWA written in TypeScript recreates a Ouija board that syncs live planchette movement across clients using Abely’s pub/sub over websockets, batching mouse/gyro deltas into a buffer cap 150 and flushing every second as bulk messages. Collision uses SVG polygons and elementsFromPoint collision to reveal characters, animation via requestAnimationFrame and CSS transforms, audio from a single ogg sprite indexed at 5s intervals, and hosting on Azure Static Web Apps; the demo runs and stays in sync across multiple browsers.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 2:54Building the Ouija board
- 9:53Real-time messaging with Ably
- 15:03Designing the spirit board
- 23:29Animating the planchette
- 26:40Hosting and deployment
- 27:21Potential use cases
- 28:04Q&A session
related talks
24mBuilding Realtime Singlepage Apps
29mThe Code Behind Every Real-Time Collaboration Tool
24mSolving the Puzzle of Real-Time Collaboration using the Fluid Framework
57m🚨 Live On the Edge 🚨
01h 18mThe future of chat
23mBuilding a Real-Time Multiplayer Reactions Component
34mA conceptual future for the multi-device web
35mBuilding Multiplayer Games with Phoenix and Phaser