📷 Camera
Live camera feed into a <video>, snapshots onto a canvas,
filters in CSS, downloads via <a download>.
getUserMedia canvas 2D
🛰️ Geolocation
Where are you? One call. Watch mode streams updates and tallies distance with six lines of trigonometry.
navigator.geolocation
🗣️ Speech Synthesis
Every OS voice on the machine, in every installed language. No API key, no cloud, works offline.
speechSynthesis
👂 Speech Recognition
Live transcription with interim results — and a page that repaints itself when you say a CSS color name.
SpeechRecognition
🎨 Paint
A drawing app where a stylus's pressure changes the stroke. Mouse, touch, and pen through one event model.
pointer events canvas 2D
🧊 3D Cube
Raw WebGL — shaders, a vertex buffer, a draw call. The stuff Three.js is made of, in ~120 readable lines.
WebGL
🎛️ Audio Visualizer
Microphone → FFT → canvas, sixty times a second. The audio-visualizer web component, unwrapped.
Web Audio AnalyserNode
🎹 Web MIDI
Plug in a MIDI keyboard: raw 3-byte protocol messages light an on-screen piano and drive a Web Audio synth.
requestMIDIAccess
🎮 Gamepad
Xbox/PlayStation controller → live sticks, analog triggers, buttons — and a rumble test. Works in every browser.
getGamepads
💙 Web Bluetooth
Connect a heart-rate strap over BLE and watch your pulse beat a CSS heart at your actual rate.
navigator.bluetooth GATT
🔌 Web Serial
A two-way byte stream to an Arduino or any USB-serial device, with the 12-line sketch to pair with it.
navigator.serial
📡 Barcode Scanner
Point the camera at any QR code or barcode — the browser's built-in detector reads it live and boxes it on screen.
BarcodeDetector