A qubit on the Bloch sphere: gates, Rabi flips, decoherence and a spin echo.
A spin-1/2 is drawn as its Bloch vector and evolved with the Bloch equations in the frame rotating with the drive, using exact Rodrigues rotations per substep plus T1 relaxation and T2 dephasing; the lab frame view spins it about the field so a resonant drive traces the nutation spiral of magnetic resonance. Gates are pulses that rotate the vector about their axis, and measurement fires repeated projective shots into a histogram beside the predicted probability. The spin echo runs 48 spins with Gaussian detunings: after a pi/2 pulse they fan out like comets and the net signal vanishes, then a pi pulse mirrors the fan so the fast spins trail the slow ones and they all line up again, the trick behind MRI and qubit dynamical decoupling.
Try it. Click the gate buttons or press H, X, Y, Z, S and T to apply gates. D toggles the resonant drive, M (or Space) measures, E runs a spin echo, C toggles decoherence, F switches between the lab and rotating frames, and R resets. Drag the arrow tip to set the state, or drag elsewhere to turn the sphere.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive Bloch sphere for a single qubit with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a dark navy background.
- Draw a sphere with an orthographic projection you write yourself: the outline, the equator and two meridians as projected circles (front halves solid, back halves dashed), and the x, y and z axes labeled |0>, |1>, |+> and |+i>.
- Store the state as a Bloch vector (x, y, z), starting at |0> on the north pole, and draw it as an arrow from the center with a small arrowhead.
- Add buttons for the X, Y, Z, H, S and T gates. Each gate is a rotation about an axis (H turns by pi about (x + z) / sqrt(2)), so animate it over half a second using Rodrigues' rotation formula.
- Let me drag to turn the view.
Once that works, make it beautiful:
- Add a precession about z (the magnetic field) and leave a fading trail behind the arrow tip, so a resonant drive traces a spiral from pole to pole.
- Add a decoherence toggle: shrink x and y by exp(-dt / T2) and relax z toward 1 by exp(-dt / T1), and watch the vector spiral inward.
- Add a Measure button that samples |1> with probability (1 - z) / 2 a hundred times and grows a two-bar histogram next to the predicted value.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a spin echo with an ensemble of slightly detuned spins, a plot of the signal over time, or switching between the lab and rotating frames.
