This is a small interactive visualization of single-qubit states and transformations on the Bloch sphere, created as part of my work in the student club PushQuantum. It is more of a learning project and teaching aid than a full quantum simulator. While web development is definitely not my calling, I enjoyed the combination of visual design and the underlying mathematics.

The Visualizer

Ignoring global phase, a pure single-qubit state can be written as

so it corresponds to a point on the unit sphere. The website shows this state as a vector and displays both its Cartesian coordinates and the angles $\theta$ and $\phi$. A state can be changed by selecting one of the six common basis states, applying the $H$, $X$, $Y$, $Z$, $S$, or $T$ gate, or choosing a rotation around one of the coordinate axes. The transition is animated, and the sphere itself can be rotated and inspected in 3D.

Bloch and Poincaré Spheres

The same geometry also describes the polarization of light (I am told by the physicists in the department). The interface can therefore switch from the Bloch-sphere convention to a Poincaré sphere, replacing the quantum-state labels with horizontal/vertical, diagonal/antidiagonal, and right/left circular polarization. This does not add a second visualization, but makes the connection between the two interpretations explicit by reusing the same sphere and transformations.

Implementation

The demonstration website is built with Next.js, React, and TypeScript. I kept the actual 3D visualization in a separate reusable component, which uses React Three Fiber and Three.js. It accepts states as either spherical coordinates or complex amplitudes and exposes options for animation, labels, colors, camera controls, and trajectories. The website then provides the controls and translates their input into states for that component.