Demos & Experiments
Things I've built over the years — WebXR experiences, CSS experiments, progressive web apps, and developer tools.
AR Light & Shadow →
Integrating virtual objects into the real world using the WebXR Light Estimation API for realistic lighting and shadows.
Lancer Map Editor →
A hex-grid map editor with snapshot export, lighting controls and GLB download.
bARsketball →
Shoot some hoops in your own home with Augmented Reality! Built with AFrame, THREE.js and WebXR.
AR Starter Kit →
A WebXR augmented reality starter scene with a dinosaur model, geometric primitives and physics.
RollAR Coaster →
An augmented reality roller coaster you can place in your own room.
Fold Me →
A WebXR demo exploring how to embed immersive content in HTML iframes.
XR Koi Garden →
A relaxing VR garden with koi fish swimming around trees, featuring 3D positioned audio. Listen with headphones for the full effect.
AR Hit Test →
A starter kit for building augmented reality scenes using the WebXR Hit Test API.
Slide on Scroll Menu →
A menu bar that reveals and hides as you scroll, built with Intersection Observer.
Pink Paper →
A magazine-style horizontally scrolling pane layout built with pure CSS and enhanced with Intersection Observer.
Toon Ocean →
A stylised water effect built with SVG, Canvas and WebGL shaders.
VR Sky & Ocean →
A WebXR scene with a stylised ocean, animated sky and floating rocks.
Favicon Badge / Time Feed →
A demo of dynamically updating favicon badges with notification counts using the Push API.
A-Frame Toon Ocean →
A colourful VR scene with a stylised toon ocean, floating objects and sky.
Houdini Paint Demos
Experiments with the CSS Houdini Paint API — rendering 3D models and camp-fire scenes directly in CSS.
A Slice of Pi →
Generate digits of Pi in the browser, comparing main thread vs Web Worker performance.
Time When →
A minimal clock displaying the current time and date.
SVGBob in a Worker →
SVGBob ASCII-to-SVG diagram rendering running in a Web Worker for non-blocking conversion.
Dramatic Lighting →
A moody WebXR scene with dramatic lighting on 3D primitives.
A-Frame Cursor Test →
A WebXR test scene with interactive 3D primitives and a control panel.
500 Breezy Cursors →
A WebXR scene with hundreds of floating cursor hands.
101 Paper Planes →
A WebXR scene filled with animated paper planes.
Comlink iFrame Demo →
A demo of using Comlink to run code in a hidden iframe and communicate via post messaging.
A Rube Goldberg Machine →
A demo of exciting new web platform features: CSS Grid, Web Components, Custom CSS Properties and the Web Animation API working together.
A-Frame Hello World →
A simple A-Frame starter scene with 3D primitives on a blue background.
A-Frame Super Standard Shader →
A demo of normal maps, ambient occlusion, displacement maps and spherical environment mapping in A-Frame’s standard shader.
Hello Metaverse →
A vaporwave-themed WebXR physics demo built with A-Frame.
Contrast Checker →
A bookmarklet for checking colour contrast accessibility on any website.
Starsword →
A progressive web app demo with lightsaber sound effects using the Web Audio API and device motion.
SoundThing →
A WebVR audio visualisation experiment, one of my earliest VR web demos.