Skip to content
Lab

Interactive 3D experiments

Real-time 3D / WebGL prototypes I build and customise — a feel for what custom interaction, product configurators, and motion can do in a browser. Best on desktop.

3D Space Planner — interactive 3D demoOpen demo
Commercial layout tool

3D Space Planner

A drag-and-drop 3D planner for commercial spaces — place furniture, move around the room, and export a PDF spec sheet. Real-time WebGL rendering in the browser.

  • Three.js
  • WebGL
  • jsPDF
  • Tailwind
3D Watch Studio — interactive 3D demoOpen demo
Real-time product configurator

3D Watch Studio

A cinematic 3D product configurator — swap materials, dials, and straps under live lighting and watch the model update instantly. The pattern behind any custom 3D configurator.

  • Three.js
  • WebGL
  • GLSL
  • Tailwind
Goban — AI Go Analysis — interactive 3D demoOpen demo
Board-game AI interface

Goban — AI Go Analysis

A 9×9 Go board with live AI analysis — play stones and watch real-time territory estimates, win-rate, and move-by-move intent. Pure Canvas rendering, no libraries.

  • HTML5 Canvas
  • JavaScript
  • Game AI
AI Workflow Command Center — interactive 3D demoOpen demo
Isometric 3D operations map

AI Workflow Command Center

A premium isometric 3D command centre — move a business operation through five connected stages (discover → design → automate → monitor → deliver) on a live spatial workflow map, with bottlenecks, automation paths and delivery confidence in view.

  • CSS 3D
  • Isometric
  • SVG
  • Interactive

Prototypes I build and theme to explore 3D and motion — the same techniques behind product configurators, dashboards, and immersive landing pages for client work.

Free tool

Palette engine — generate an accessible color system

Pick a seed color, pick a harmony, get a full light + dark token system with the WCAG contrast already checked — built on the same OKLCH engine that powers this site's own dark mode. Copy hex codes, export CSS or Tailwind, or share the exact palette by link.

BrandGet started

Your product, in your colors.

Generated live — this preview updates as you change the seed and mode.

Secondary surfaceAccent 2
Ink / Paper · 16.6:1 · AAAInk / Surface · 18.1:1 · AAAWhite / Accent · 5.2:1 · AA
:root {
  --color-paper: #fcf3f0;
  --color-surface: #ffffff;
  --color-ink: #1e130f;
  --color-muted: #735e57;
  --color-line: #ebdad5;
  --color-accent: #bb461d;
  --color-accent2: #007398;
}

.dark {
  --color-paper: #110c0a;
  --color-surface: #1f1917;
  --color-ink: #f5ecea;
  --color-muted: #aa928b;
  --color-line: #443733;
  --color-accent: #bb461d;
  --color-accent2: #007398;
}