Thaumaturgy
Case Study — Real-Time Web Application

Thaumaturgy

A browser app that generates living soundscapes in real time — no audio files streamed, no two minutes alike. Built from scratch: the audio engine, the edge backend, the installable app and the Android release.

The Problem

Every existing option made the person running the game do the wrong job.

The Thaumaturgy session screen: an environment playing above a board of sound-effect buttons
The brief

Background sound that doesn’t loop, and effects you can hit in one tap

Game masters were running tabletop sessions off playlists and video sites: tracks that loop audibly every few minutes, adverts mid-scene, and no way to fire a single sound the moment it’s needed. The alternative was paid desktop software tied to one machine.

The brief was to make a browser do both jobs at once — generate ambience that never repeats itself, and keep a grid of one-tap effects within reach — on a phone at the table and a laptop at home, for free, with nothing to install.

TypeScriptWeb Audio APIService WorkerPWACloudflare WorkersCloudflare D1Cloudflare R2Trusted Web ActivityAndroidPlaywrightPython

The Engineering

Six problems worth solving, and what we built for each.

🎵

A generative audio engine

Sound is assembled live in the browser with the Web Audio API. Each layer is either a seamless loop or a set of one-shots fired on a cadence with jitter, at randomised pitch and stereo position, through a shared convolution reverb and a feedback delay. Nothing is pre-rendered, so an hour of play never repeats.

⚡

Audio that survives a four-hour session

Long sessions exposed real faults: decoded buffers exhausting memory on phones, and audio nodes leaking on every scene change until playback died. We added a bounded LRU buffer cache, a single shared reverb and explicit teardown — a measured drop from 351 live nodes to 34 after ten scene changes — with regression tests pinning both.

☁

Edge-hosted sync, no passwords

A Cloudflare Worker with D1 and R2 behind it. Sign-in is an emailed single-use link — no passwords stored, nothing to leak. Environments, boards and the current scene sync across devices; everything works fully offline first, and syncing is an option rather than a requirement.

📱

One codebase, three places to run it

The same app is a website, an installable PWA with a service worker caching the shell and its sounds for offline use, and an Android release on Google Play via a Trusted Web Activity with verified asset links. Media Session integration keeps sound running with the screen locked.

📊

A sound library built by pipeline

Around five hundred clips across ninety-four environments were sourced, filtered and encoded by a Python pipeline: licence-filtered search, title heuristics to reject the wrong material, loudness normalisation, seamless-loop crossfading and Ogg Vorbis encoding with content-hashed filenames. Every clip is credited automatically from the same data.

✅

Tested like software, not like a page

Over a hundred automated checks run against the live site on every release — audio actually sounding, node counts, layout at four viewport sizes, offline behaviour, and end-to-end flows that build an environment and a board and then verify the result. Caught a layout fault that only appeared with more than one board loaded.

What Shipped

A free public beta, in the browser and on Google Play.

The environment editor: layers with dials for frequency, randomness, volume, distance, reverb and echo
The product

Ninety-four environments, seventeen boards, and scenes saved in one tap

Every environment is a stack of layers, and every layer exposes the same dials — how often a sound fires, how much the timing wanders, volume, distance, reverb, echo. Changes apply live while it plays. Boards are grids of big named buttons with notes, including one board per character class.

A chapter saves the whole scene — environment plus the boards loaded for it — and brings it back with a single tap, crossfading from whatever was playing before.

Built for the Table

The phone is the instrument, so the phone got designed first.

Thaumaturgy on a phone: a fixed bottom bar, a one-line environment strip and a grid of sound buttons
Mobile engineering

Navigation that survives a game in progress

Running sound from a phone mid-session is a different problem from browsing a site. The screen switcher moved to a fixed bottom bar within thumb reach, with a permanent stop control. The environment collapses to a one-line strip so the buttons you tap constantly are on screen the moment you arrive — nine of them, instead of none.

The Android build routes Back through the app’s own screens instead of quitting, and audio keeps playing with the screen off. Every one of those behaviours is covered by an automated check that runs against the live site.

Web AudioService WorkerMedia SessionTWASafe-area insets

By the Numbers

94
Built-in environments
~500
Licensed sound clips
100+
Automated checks per release
0
Passwords stored

What This Kind of Work Looks Like

Thaumaturgy is our own product, which makes it a fair sample of how we build for clients.

🔧

Real-time browser applications

Audio, canvas, live data — work where the browser is doing something continuously rather than rendering a page. It needs profiling, memory discipline and teardown, and most web work never goes there.

🌐

Edge backends without servers to babysit

Cloudflare Workers, D1 and R2 give an application a database, object storage and an API at the edge with no VM to patch. Cheap to run at low volume and it does not fall over at high volume.

📲

One build, every device

An installable PWA and a store listing from the same codebase — no separate native app to maintain, no second team, and an update reaches every platform the moment it deploys.

🔍

Findable by search and by AI

Structured data, generated sitemaps, task-shaped documentation and machine-readable summaries, so a product is described accurately by search engines and by the assistants people increasingly ask first.

Have something like this in mind?

If you need a web application that does real work — not a brochure with a form on it — we should talk.