Steven Foerster

Lab

Bloch Sphere Playground

Interactive 3D visualization of qubit states and quantum gate operations.

Learn quantum computing fundamentals

The Bloch sphere visualizes a single qubit's state as a point on a unit sphere. Apply quantum gates to see how they transform the state vector.

What this is

An interactive 3D visualization of qubit states using the Bloch sphere representation. Watch how quantum gates rotate the state vector in real-time.

Key concepts

  • Superposition: states between |0⟩ and |1⟩
  • Phase: rotation around the Z axis
  • Gates as rotations on the sphere

Bloch Sphere

θ=0° φ=0°

Drag to rotate the view. The arrow shows the current qubit state.

|0⟩
|1⟩
|+⟩
|−⟩
|i⟩
|−i⟩

Current State

|ψ⟩ = |0⟩
α = 1.000, β = 0.000
P(|0⟩) 100%
P(|1⟩) 0%

Preset States

Gate History

No gates applied

Try this

  1. Start at |0⟩, then click H to land on the equator (50/50).
  2. Click S or T to spin the arrow around Z while probabilities stay 50/50.
  3. Click Measure to collapse the state to |0⟩ or |1⟩.

Quantum Gates

Apply gates to transform the qubit state. Each gate is a rotation on the Bloch sphere.

Pauli Gates (180° rotations)

Hadamard & Phase Gates

Custom Rotations

90°
Collapse the superposition to |0⟩ or |1⟩ based on probabilities

Gate Reference

Matrix representations and geometric interpretations of each gate.

X Pauli-X (NOT)
0 1 1 0

180° rotation around X axis. Swaps |0⟩ ↔ |1⟩

Y Pauli-Y
0 −i i 0

180° rotation around Y axis. Combines bit and phase flip.

Z Pauli-Z
1 0 0 −1

180° rotation around Z axis. Flips relative phase.

H Hadamard
1 1 1 −1
× 1/√2

Creates superposition: |0⟩→|+⟩, |1⟩→|−⟩

S Phase (√Z)
1 0 0 i

90° rotation around Z axis. S² = Z

T T Gate (√S)
1 0 0 eiπ/4

45° rotation around Z axis. T² = S

Understanding the Bloch Sphere

Qubit State Representation

Any pure qubit state can be written as:

|ψ⟩ = cos(θ/2)|0⟩ + eiφsin(θ/2)|1⟩

Where θ (theta) is the polar angle from the +Z axis (0° to 180°), and φ (phi) is the azimuthal angle in the XY plane (0° to 360°).

Key Points on the Sphere

  • |0⟩ — North pole (θ=0°)
  • |1⟩ — South pole (θ=180°)
  • |+⟩ — +X axis (θ=90°, φ=0°)
  • |−⟩ — −X axis (θ=90°, φ=180°)
  • |i⟩ — +Y axis (θ=90°, φ=90°)
  • |−i⟩ — −Y axis (θ=90°, φ=270°)

Why It Matters

The Bloch sphere provides geometric intuition for quantum operations:

  • • Single-qubit gates are rotations on the sphere
  • • Measurement projects onto the Z axis
  • • Opposite points are orthogonal states
  • • Superposition = points not on the poles

Connection to Quantum Computing

Understanding the Bloch sphere is foundational for:

  • • Designing quantum algorithms
  • • Understanding gate decomposition
  • • Visualizing quantum error correction
  • • Grasping why Shor's algorithm breaks RSA
Keyboard shortcuts
  • X Apply X gate
  • Y Apply Y gate
  • Z Apply Z gate
  • H Apply Hadamard gate
  • S Apply S gate
  • T Apply T gate
  • M Measure
  • R Reset to |0⟩
  • Arrow keys Rotate view
Security model (30 seconds)

This tool runs entirely in your browser. All quantum state calculations and rendering happen locally using JavaScript. No data is sent to any server. This is an educational simulation — it does not connect to real quantum hardware.

Further reading