Show Dev: I made a glassblowing sim you blow into

#javascript #showdev #sideprojects #webdev

Why blow into your laptop?

I've been building a series of tiny, weird web toys under the banner of "edge case factory" — apps that exist mostly because nobody asked for them. The latest one is Glassblower's Breath, a browser-based glassblowing simulator where you shape a virtual vase by literally exhaling into your microphone.

One breath. One vase. No undo.

The whole thing started from a dumb question: what if the input to a creative tool was something you can't really control precisely? Mouse input is too deliberate. Keyboards are too discrete. But breath? Breath is messy, noisy, and deeply analog. It felt like the right kind of input for molten glass.

Turning breath into geometry

The mic pipeline is embarrassingly simple. Grab an audio stream, run it through an AnalyserNode, and sample the low-frequency RMS to estimate breath intensity. Plosives and speech get filtered out by looking at spectral flatness — breath is broadband noise, speech has formants.

const ctx = new AudioContext();
const source = ctx.createMediaStreamSource(stream);
const analyser = ctx.createAnalyser();
analyser.fftSize = 1024;
source.connect(analyser);

const buf = new Float32Array(analyser.fftSize);

function sampleBreath() {
  analyser.getFloatTimeDomainData(buf);
  let sum = 0;
  for (let i = 0; i < buf.length; i++) sum += buf[i] * buf[i];
  const rms = Math.sqrt(sum / buf.length);
  // map rms to radial displacement on the current vase ring
  return Math.min(1, rms * 8);
}

Each frame, the current "ring" of the vase (it's built bottom-up, lathe-style) expands proportional to your breath. Stop breathing and the ring sets. The next ring starts slightly above. After ~15 seconds you've got a silhouette that's unmistakably yours — shaky inhales become pinched necks, a strong exhale makes a bulb.

The mesh is a revolved spline in Three.js with a refractive shader that cheats hard: a cubemap of a studio environment, a fresnel term, and some chromatic aberration on the edges. It's not physically accurate glass. It looks like glass from across a room, which is all you need.

Why it lives on its own Railway service

This app was almost entirely AI-generated — I scaffolded it by describing the behavior I wanted and iterating on the shader and the breath-detection heuristics. That workflow produces code fast, but it also produces code I don't fully trust to share a process with anything important.

So every edge-case-factory app gets its own Railway service on its own subdomain. Isolated deploys, isolated dependencies, isolated blast radius. If glassblowers-breath leaks memory or the shader pins a GPU somewhere, it doesn't take down the neighbors. Each app is a Next.js project with essentially zero shared code — I gave up on the monorepo dream after the second app.

The tradeoff is obvious: more services, more cold starts, more dashboards. The upside is that I can ship a weird thing in an afternoon and genuinely not care if it catches fire at 3am. For toys, that calculus is correct. For a real product, it wouldn't be.

The one UX decision I'm proud of

There's no "try again" button during a blow. Once you start, you're committed for the full duration. You can save the result or discard it, but you can't pause mid-breath to reconsider. This is annoying. It's also the entire point — real glassblowers can't pause either. The constraint is the feature.