Visualizing qubits using both the Bloch sphere and two complex planes.
This project provides an interactive way to visualize a qubit’s state and how quantum gates transform it. While the Bloch sphere is a common and powerful representation, it hides certain details like phase information.
I personally find it more intuitive to imagine a qubit as two stacked complex planes.
This is similar to the circle (dial) notation:
-
Upper plane: amplitude of
$|0\rangle$ -
Lower plane: amplitude of
$|1\rangle$
This tool combines both perspectives:
- Bloch sphere view – for geometric intuition.
- Two complex planes view – for phase clarity.
- Visualize the initial state of a qubit.
- See how various gates transform the state in both representations.
- Gate definitions sourced from IBM Qiskit Documentation (e.g., for the T gate).
The Bloch sphere is elegant, but it doesn't always make it easy to see “what’s really happening” when a gate is applied — especially regarding phase shifts. This visualization aims to make those transformations clearer.
- Built using AI models for idea development and prototyping.
- The first builds were pure html / css / js.
- Most recent build uses React and Vite as a package manager.
- My plan is to learn more React and Three.js in order to improve the app.
- The math and visuals should be correct, but there may be undetected errors.
Contributions are welcome! Feel free to:
- Fork and extend the project.
- Add more gates or visual modes.
- Improve the code structure.
- Fix bugs or improve the math.
This is a learning and visualization tool — not a full-featured quantum simulator. Use it to build intuition, but verify calculations independently when precision is critical.
MIT License — free to use, modify, and share.