Lab
The Lab
Interactive experiments and live demos. Launch any of them right here.
Small, self-contained things I’ve built: music theory, retro computing, generative art, systems, and AI agents. Click a card to run it in the browser; most link to a full write-up over in projects.
Showing all 21 experiments
Circle of Fifths
Click around the circle of fifths to hear each key and see how they relate.
Audio
Circle of Fifths
Click around the circle of fifths to hear each key and see how they relate.
Circle of Fifths
Perfect Fifth: G
Perfect Fourth: F
Tap or click any key to hear its root note. The outer ring shows major keys, the inner ring shows relative minors.
DosKit
Watch a simulated DOS boot sequence, then pick a program to run in the real WebAssembly emulator.
Retro Computing
DosKit
Watch a simulated DOS boot sequence, then pick a program to run in the real WebAssembly emulator.
Gopher Client
Browse a mock Gopherspace in a modern client, laid out the way the 1991 protocol did it.
Retro Computing
Gopher Client
Browse a mock Gopherspace in a modern client, laid out the way the 1991 protocol did it.
Gopher Client
Gives an AI client the Gopher and Gemini protocols — the “small internet”.
Retro Floppy
A tactile 3.5-inch floppy you can label, re-theme and resize. Pure CSS nostalgia.
Retro Computing
Retro Floppy
A tactile 3.5-inch floppy you can label, re-theme and resize. Pure CSS nostalgia.
Retro Floppy
Hover the shutter, or tap or focus the disk, to slide it open. Each click bumps the counter.
Zero-Crust Architecture
Click through the process map of a dual-screen POS: sandboxed renderers, a trusted main process, and the IPC between them.
Systems
Zero-Crust Architecture
Click through the process map of a dual-screen POS: sandboxed renderers, a trusted main process, and the IPC between them.
Zero-Crust Architecture
- Commands · renderer to main
- State · main to renderers
- Trace · main to debugger
Trusted process: MainStore, PaymentService, BroadcastService, IPC handlers
Pattern: Centralized State + Command Handler
Security: Zod validation, sender verification
Tap or click a node to explore. The highlighted edge is the IPC message in flight between processes.
Accessibility Techniques
Toggle accessibility techniques on and off to feel the difference each makes.
Accessibility
Accessibility Techniques
Toggle accessibility techniques on and off to feel the difference each makes.
Accessibility Techniques
Documentary Film
An archive of civil rights documentaries spanning five decades.
Body text 7.56:1 pass · Watch button 5.17:1 pass
Tab, or use Show focus, to see focus rings.
Frostpane
A frosted-glass panel component you can tune in real time.
Systems
Frostpane
A frosted-glass panel component you can tune in real time.
Frostpane
Liquid Glass
Adjust the controls to see real-time changes to the frosted glass effect.
Equivalent CSS
backdrop-filter: blur(10px) saturate(180%);
background: rgba(166, 153, 191, 0.25);
border-radius: 16px;At the defaults the white copy measures about 4.7:1 over the center of the gradient, then slips under 4.5:1 once opacity passes 30% or the panel crosses the pink end. One tint can’t hold AA everywhere, which is why Frostpane ships separate light and dark recipes.
Electromagnetic Spectrum
Sweep the electromagnetic spectrum from radio to gamma rays.
Generative
Electromagnetic Spectrum
Sweep the electromagnetic spectrum from radio to gamma rays.
Electromagnetic Spectrum
Region: Visible Light
Frequency: 545 THz
Energy: 2.25 eV
The only portion of the spectrum visible to human eyes.
Drag the bar or the slider; frequency and photon energy follow from c/λ and hc/λ.
Uzumaki
A hypnotic, interactive generative spiral.
Generative
Uzumaki
A hypnotic, interactive generative spiral.
Uzumaki
θ = n·137.508°
See it on every platform
Pick an algorithm and drag the slider; Randomize rolls a fresh spiral.
AT Protocol MCP Tools
Fire sample AT Protocol MCP tool calls and read the structured responses an AI client would get back from Bluesky.
AI Agents
AT Protocol MCP Tools
Fire sample AT Protocol MCP tool calls and read the structured responses an AI client would get back from Bluesky.
MCP Tool Explorer
{
"tool": "get_profile",
"handle": "bsky.app"
}Fetch a user profile by handle or DID
This is a simulated demo. The real MCP server answers requests from AI assistants like Claude.
Skills Radar
A self-cycling radar of the stack. Watch each category come into focus, or grab the wheel.
Generative
Skills Radar
A self-cycling radar of the stack. Watch each category come into focus, or grab the wheel.
Skills Radar
Frontend Skills
Hover or tap a skill to spotlight it; pick a category to stop the cycle.
ActivityPub MCP
Fire sample Fediverse MCP tool calls and watch WebFinger discovery and outbox responses come back, as recorded from Mastodon.
AI Agents
ActivityPub MCP
Fire sample Fediverse MCP tool calls and watch WebFinger discovery and outbox responses come back, as recorded from Mastodon.
MCP Tool Explorer
{
"tool": "webfinger_lookup",
"account": "@user@mastodon.social"
}Discover a user via WebFinger lookup
This is a simulated demo. The real MCP server answers requests from AI assistants like Claude.
OpenZIM MCP
Search Wikipedia through MCP with the cable unplugged: sample calls, recorded answers, zero network.
AI AgentsSystems
OpenZIM MCP
Search Wikipedia through MCP with the cable unplugged: sample calls, recorded answers, zero network.
MCP Tool Explorer
{
"tool": "zim_search",
"query": "quantum computing",
"limit": 5
}Search for articles in the ZIM knowledge base
This is a simulated demo. The real MCP server answers requests from AI assistants like Claude.
Clarissa
Step through a terminal agent’s tool calls: read a file, run git, diff, fetch the web. The ReAct loop, one recorded sample at a time.
AI Agents
Clarissa
Step through a terminal agent’s tool calls: read a file, run git, diff, fetch the web. The ReAct loop, one recorded sample at a time.
MCP Tool Explorer
{
"tool": "read_file",
"path": "./src/agent.ts"
}Read the contents of a file
This is a simulated demo. The real MCP server answers requests from AI assistants like Claude.
ClarissaBot
Follow a vehicle-safety agent through its NHTSA tool calls: recalls, complaints, crash ratings, from recorded responses.
AI Agents
ClarissaBot
Follow a vehicle-safety agent through its NHTSA tool calls: recalls, complaints, crash ratings, from recorded responses.
MCP Tool Explorer
{
"tool": "check_recalls",
"make": "Honda",
"model": "Civic",
"year": 2019
}Find recall campaigns affecting a vehicle
This is a simulated demo. The real MCP server answers requests from AI assistants like Claude.
Step Sequencer
Tap out a beat on a 16-step grid and hear it loop. Drums and bass, no install.
AudioGenerative
Step Sequencer
Tap out a beat on a 16-step grid and hear it loop. Drums and bass, no install.
Step Sequencer
Stopped
Tap or click a cell to arm that step, then hit Play — every sound is synthesized live with the Web Audio API, no samples. On iPhone, flip the silent switch off to hear it.
Contrast Lab
Pick two colors and watch the WCAG ratio pass or fail in real time.
AccessibilityGenerative
Contrast Lab
Pick two colors and watch the WCAG ratio pass or fail in real time.
Contrast Lab
The quick brown fox
jumps over the lazy dog
Sample text at 4.83:1
Contrast 4.83 to 1, passes 3 of 4
Already passes AA for normal text, so there is nothing to fix.
Ratios follow the WCAG 2.x relative-luminance formula. AA needs 4.5:1 for normal text (3:1 large); AAA needs 7:1 (4.5:1 large). “Suggest a fix” nudges the text color toward black or white until AA-normal passes.
CRT Terminal
Type into a green-phosphor terminal with scanlines, flicker, and a blinking block cursor.
Retro ComputingGenerative
CRT Terminal
Type into a green-phosphor terminal with scanlines, flicker, and a blinking block cursor.
CRT Terminal
Try help, about, or echo hi. It is all client-side — no real shell behind the glass.
Subnet Calculator
Drag the CIDR slider and watch network, broadcast, and host range recompute bit by bit.
Systems
Subnet Calculator
Drag the CIDR slider and watch network, broadcast, and host range recompute bit by bit.
Subnet Calculator
Edit the address or drag the prefix; the mask, host range, and binary view recompute as you go.
Reaction-Diffusion
Paint into a Gray-Scott reaction and watch organic Turing patterns spread.
GenerativeSystems
Reaction-Diffusion
Paint into a Gray-Scott reaction and watch organic Turing patterns spread.
Reaction-Diffusion
Paint into a Gray-Scott reaction and watch organic Turing patterns spread.
Lexicon Inspector
Pick an AT Protocol record type and see the lexicon schema and a sample record side by side.
AI AgentsSystems
Lexicon Inspector
Pick an AT Protocol record type and see the lexicon schema and a sample record side by side.
Lexicon Inspector
{
"lexicon": 1,
"id": "app.bsky.feed.post",
"type": "record",
"key": "tid",
"record": {
"type": "object",
"required": [
"text",
"createdAt"
],
"properties": {
"text": {
"type": "string",
"description": "Post body (max 300 graphemes)"
},
"createdAt": {
"type": "string",
"format": "datetime"
},
"langs": {
"type": "array",
"description": "BCP-47 language tags"
},
"reply": {
"type": "object",
"description": "Parent + root refs"
}
}
}
}{
"$type": "app.bsky.feed.post",
"text": "Hello from the AT Protocol.",
"createdAt": "2026-06-27T10:15:00.000Z",
"langs": [
"en"
]
}Lexicon is the AT Protocol schema system. Each record is validated against its NSID’s schema (required fields + types) before it’s written to a repo. Schemas here are faithful, abbreviated subsets of the real Bluesky lexicons.
No experiments match this filter.
Want the full story behind these?
Most experiments started life as a project. Read the write-ups, or get in touch.