Vibe Coding a Quantum State Simulator

If you came here just for the Quantum State Simulator itself, please check it out here in the new Tools section. This short blog post provides some background on my motivations for building it and what the experience was like.

Simulating a rotation around the z-axis

Why I build a quantum state simulator

The year is 2025 and the vibe is: vibe coding. While my news feed has been full of people making games with Three.js, I was wondering if it's possible to scratch an itch I've had for a long time...

I had never found an interactive tool that allowed me to investigate changes to a quantum state in terms of their Bloch sphere representation translate to measurement probabilities in different bases. Also, I was wondering if there was a way, however crude it may be, to get a better intuition (visually) of concepts like the wave function, phase shifts and single qubit interference, and how that all relates to the Bloch sphere.

So, when I saw everyone vibe coding 3D games with Three.js, I knew the time had come to take matters into my own hands - I had to build this tool myself. (darn, another weekend project!)

Who is this for?

I hope this simulator will be useful for some of you who are just starting to learn about quantum computing. Myself, I think I would have found it useful as a resource for sure.

Quantum states can feel abstract, especially when juggling complex numbers and phases. This simulator helps bridge that gap by showing how changes to the qubit's state produce shifts in measurement probabilities, and how those same changes look in different bases.

It's a hands-on way to build intuition about quantum superposition and measurement. Feel free to play with the sliders, watch the qubit rotate, and see how its probabilities and waveforms respond. By exploring the qubit's behavior in multiple bases, I hope you'll gain a deeper appreciation for the subtleties of quantum mechanics, especially if you're just starting to learn about quantum computing.

What it was like vibe coding a quantum state simulator

I've been a heavy user of Github Copilot and Cursor from pretty much the day they were released. Both at work and on side projects like this blog. As such, I've been working on both relatively large code bases as well as green field repos using AI coding assistants.

But this was probably the first time I really vibe coded in the sense that I (not a frontend dev) knew nothing about Three.js and just went with the flow: accepting code changes until it got stuck or something went wrong.

That was enough for v0, which was a single, quite lengthy, html page with the main Bloch Sphere display and controls. Also the second step, turning it into react components and integrating it into the rest of the code base, was all smooth sailing.

The only point where it really got stuck was when it came to visualising rotations around the z-axis, and how that affects probability amplitudes. I tried the flagship LLMs of OpenAI, Anthropic and Google - reasoning and non-reasoning, and none of them were able to correctly calculate and visualise the rotations.

I think that's a really interesting data point actually. It's not complex math or code, so are models struggling because there is so little overlap between javascript and quantum mechanics in the training data?

Check it out for yourself here if you're interested and let me know what you think!