Wii Motion Canvas
Turn your phone into a Wii remote and paint with motion - a real-time WebSocket-powered drawing experience
The Concept
Remember the Nintendo Wii? That feeling of motion-controlled gaming that made everyone get up from the couch? I wanted to recreate that magic in the browser - turning any smartphone into a motion controller for creative expression.
The result is a two-part system: a mobile app that transforms your phone into a motion-sensing remote, and a web canvas that responds in real-time to your movements. Scan a QR code, connect instantly, and start painting with gestures.
The Mobile Controller
Built using Bloom.diy, the mobile app is a React Native application built with Expo that leverages your phone's accelerometer and gyroscope. It transforms raw motion data into intuitive controls - tilt to move, gesture to draw.
- Real-time motion sensing using device sensors
- QR code scanning for instant pairing
- WebSocket connection for sub-100ms latency
- Built entirely with Bloom.diy - from concept to functional app
The Web Canvas
The web application serves as both the connection hub and the creative canvas. It starts with a simple QR code - scan it with the mobile app, and you're immediately connected through WebSockets.
Once paired, every motion on your phone translates into brush strokes on the canvas. The experience is fluid, responsive, and surprisingly intuitive - like digital finger painting, but with your whole hand.
- Canvas-based drawing with motion-mapped coordinates
- Real-time synchronization via WebSockets
- QR code generation for seamless pairing
- Built with React and powered by Bun runtime
Try it Yourself
Want to experience motion-controlled painting? Here's how:
- Install the mobile app from Bloom.diy
- Open wii.kevinzingg.ch on your computer
- Scan the QR code with the mobile app
- Start moving your phone and watch the magic happen
Video coming ASAP
Technical Architecture
The magic happens in the real-time communication layer. WebSockets create a persistent bidirectional connection between the mobile controller and web canvas, allowing motion data to flow continuously with minimal latency.
Using Bun as the runtime brings exceptional performance - WebSocket handling is blazingly fast, and the TypeScript-first approach keeps the codebase clean and type-safe across both client and server.