Soft Machine

What you’re looking at

Everything on that device works. The keys play through the sound engine built into every modern browser: an oscillator makes the raw tone, a filter shapes it, and an envelope decides how each note fades in and out. Once you’ve played a note, the screen draws the actual sound the synth is making, about 60 times a second. There are no audio files, no plug-ins and no libraries underneath. It’s about 1,700 lines of code, and not one of them was written by a person.

I found the original in a gallery of 100 single-file web pages, each published next to what the gallery says is the exact prompt behind it. The gallery credits Claude Opus 5.5 for all of them: according to its notes, 20 Claude agents worked in parallel, and every page was rendered in a browser and checked from screenshots before it was accepted. I’m pretty sure most people outside the AI bubble have no idea a model can do this now, so I had Claude Code rebuild it here, in this site’s colours, where you can play it without downloading anything.

One paragraph? Not quite

The paragraph describing the synth is about 170 words. The full prompt has a second part that’s easy to miss: ten house rules the gallery added to every one of its 100 prompts. One self-contained file. Works on anything from a 360-pixel phone to a large monitor. Labelled, accessible controls. Respect the reduced-motion setting. Sound only after a user gesture, with a visible mute button. And a quality bar that asks outright for something “bookmark-worthy, showcase-grade, premium”.

That second part does more work than it looks like. It’s the gallery’s standards document: written once, inherited by every brief. It’s the argument I make in Your AI Has No Idea What Your Company Does: the brilliant new hire does far better work when your standards come with the job instead of being re-explained in every request. The house rules are why the synth has a mute button and knobs you can turn with the arrow keys, even though the paragraph never mentions either.

You can do the same for your own recurring requests: write your standards down once and paste them under every brief, or put them in your assistant’s custom instructions if it has them. The Setup That Makes AI Stop Being Generic walks through how.

Why the paragraph works

Read it again and count the decisions in it. Exact colours for the surface, the two shadows and the single accent. Four named knobs, dragged vertically. The signal chain spelled out: oscillator, then filter, then envelope. Which computer keys play notes. What should happen on a phone. And one line that saves you a confusing afternoon: “Audio starts only after the first gesture.” Browsers won’t play sound until you’ve clicked or typed something on the page. Forget that and your synth stays silent, with nothing on screen to tell you why.

That’s a spec: it makes the decisions that matter and leaves the rest open. That’s the real skill on display. Writing specs is a big part of my day job, and the lesson carries straight over: the model needs what a good developer needs, which is clear decisions on what matters and freedom on everything else.

It’s also why I’m not handing this out as a prompt to memorise. Copy it, sure. The part that transfers to your own work is how it’s written.

What the prompt never says

Paragraph and house rules together come to about 450 words. The finished synth is about 1,700 lines of code. Everything in between had to be worked out, and most of it is the kind of detail you only know if you’ve built audio software before:

Timing that doesn’t drift. A sequencer has to hit every step exactly on time. Browser timers are sloppy: they fire late whenever the page is busy, and you’d hear that as a stumbling rhythm. The fix uses two clocks. A loose timer wakes up every 25 milliseconds and books the notes due in the next eighth of a second on the sound card’s own clock, which is exact. The prompt says “adjustable tempo” and nothing about clocks.

Notes that end without a click. Let go of a key halfway through its fade-in and the volume has to glide down from wherever it is at that moment. Cut it off abruptly and the speaker pops. Not every browser has a shortcut for holding that in-between value (Firefox doesn’t), so the code calculates it itself.

A screen that holds still. Draw raw sound samples and the wave slides sideways every frame. The screen waits for the wave to cross zero on its way up and starts drawing there, the same trick a hardware oscilloscope uses. Before the first note, it can’t show sound that doesn’t exist yet, so it rebuilds the current waveform from its harmonics and runs them through the same filter maths. Turn the cutoff knob before you play anything and you’ll see the wave round off.

Knobs that feel like knobs. A vertical drag that keeps working when your finger slides off the knob, Shift for fine adjustment, arrow keys for people who don’t use a mouse, and a screen reader that announces “Cutoff, 2.4 kHz” instead of an unlabelled box. The house rules ask for keyboard support and labelled controls in general terms; the details are the model’s.

Fingers. On a phone, dragging on a knob would normally scroll the page, so the synth claims those gestures and leaves the rest of the page scrollable. Slide a finger along the keyboard and each key plays as you pass it.

The paragraph mentions none of this, and the house rules only ask in general terms (“keyboard support where it makes sense”). The two clocks, the click-free release and the steady screen weren’t asked for anywhere. In this build, Claude Code worked all of them out on its own.

What changed for this page

The gallery’s version is a standalone page. Moving it into a live site meant a few changes, and they show the last stretch between an impressive demo and something you’d actually ship:

• The colours follow the site. The clay is warm cream in light mode, parchment in sepia and charcoal in dark mode. Try the theme switch in the header. The single accent is this site’s orange instead of coral.
• The computer keys only play while the synth has focus. On a standalone page it’s fine to grab every keypress. Inside an article with a newsletter form below it, typing your email address shouldn’t play a tune.
• Keys are mapped by position. On Swiss and German keyboards, Y and Z trade places, so the mapping follows where a key sits, not the letter printed on it.
• It’s part of the site’s own code. It uses the page’s fonts and has tests for its maths.

The adapted brief at the bottom of this page has all of these folded back into the original prompt.

How the rebuild went

I gave Claude Code the paragraph and asked for a version in this site’s design. It wrote the synth, then checked its own work: unit tests for the maths, and a real browser driven by a script that clicked keys, dragged knobs, switched themes and shrank the window to phone width.

The most useful catch came before any testing. The first version followed the paragraph only. When Claude Code read the gallery’s full prompt, it found the house rules asking for a visible mute button and “a beautiful first frame before any interaction”, and added both. That’s the screen preview you see before your first note. The gallery’s notes on its own version describe drawing that preview from the waveform’s harmonics, and this build uses the same idea. Same model, better result, because it now had the standards.

The browser round found two small problems. On a 320-pixel screen, the Clear button pushed the page sideways by 47 pixels. And quiet sequencer notes drew as an almost flat line on the screen. Claude Code fixed both. Write, render, look, fix: it’s the same loop the gallery describes for its own pages.

Try it yourself

1. Copy the full prompt above. The button takes both parts. (The house rules mention the gallery’s other 99 pages; the model will cope.)
2. Paste it into Claude, ChatGPT or Gemini and send it. Depending on your plan and settings, all three can show the result right next to the chat (Claude calls it an artifact, the other two Canvas). If yours can’t, save the answer as soft-machine.html and open it in your browser. If the answer stops halfway through the file, type “continue”.
3. Then keep going. Ask for an echo effect. Ask it to use your company’s brand colours. Ask it why the sequencer needs two clocks, and you’ll learn something about how software handles time that applies well beyond music.

A single chat reply is a harder test than what the gallery or I did, since both versions were checked and fixed in a loop. So expect your first version to need a round or two of “this part is broken, please fix it”. That back-and-forth is how it’s supposed to work. The gallery credits its version to one of the strongest models available in September 2026, and other models will give you a different result. Seeing that difference for yourself is worth the five minutes. When something breaks, describe what you see and paste the error from the browser console (F12, then Console). That’s how most debugging with AI starts, mine included.

There’s no company data anywhere in this prompt, so it’s a safe one to try on whichever assistant you have, including the one your employer gave you. If you want the bigger picture on building things this way, The Weekend Trip That Came With Its Own App is the same idea applied to something useful.