The name "Quirk" seems to have been wisely chosen here.
Quirk itself is very easy to use and intuitive, just drag and drop gates or indicators to those lines, and the vizualization of the results is the best: the circuit is always live, with Bloch spheres animated even during editing a circuit. Couldn't ask for more.
What makes it look complicated is the symbols for quantum gates and displays. Those are symbols similar with gates or flip-flops from digital schematic diagrams, or transistors, resistors and so on in analog electronic schematics.
A quantum circuit starts from the most left side, and goes to the right side following those lines between the two grey areas named "Toolbox". Quantum gates are "interpreted" from left to right, step by step (a step is a full column of gates on all the available lines) like the musical notes on musical scores. Each line correspond to a qubit.
At the most left side of the quantum circuit are the initial values. A quantum circuit always starts with all the qubits reset to "0", which in quantum notation is written as "|0>". This "|0>" is called the bra-ket style notation.
https://en.wikipedia.org/wiki/Bra%E2%80%93ket_notationHappily, in Quirk the initial |0> value can be easily changed by clicking on it, which is very good for situation where one want to see "what if" instead of |0>, this qubit is made |1>, or maybe something else.
All the qubits together form a register, same as bits that are processed together form a register (or word) in a classical computer.
You can think about a quantum algorithm flowing like a "signal" from left to right, along those line, at each step passing through a new column of gates.
The number of parallel lines (the width of the quantum register) is adjusted automatically by Quirk if you drag a gate lower than the already existing lines.
To delete a quantum gate, simply drag and drop it outside of the circuit. Anywhere along the signal path can be inserted "Displays". "Bloch" is one of the nicest Display, very useful to understand or debug a quantum circuit. Displays are similar with voltage or current probing in LTspice or similar.
In real life, it wouldn't be possible to probe a quantum circuit somewhere along the signal path, that will completely destroy the quantum state. However, this is a simulation, and we can use a Display wherever we like. In real life, once you "read" the state of a qubit by a measurement process, it's game over, the state of the measured qubit collapses to either a "0" or a "1".
Note that at the right side of the signal paths, there are by default some displays attached, like a template, so we don't have to add it manually each time we want to look at the results. Usually, any quantum circuit ends with a "measurement gate" on each qubit we want to read as a result.
Now, the tricky part is what each type of gates is doing, and how they rotate or mirror the qubits. That can be find online by Googling "quantum gates", or starting from
https://en.wikipedia.org/wiki/Quantum_logic_gateIf you just want to see a nice yet very simple and live animated example, click on the "
Quantum Teleportation" example link (from the inside of the Quirk webpage)
https://algassert.com/quirkAn animated quantum circuit should appear in Quirk. On the first line, is the bit we want to "quantum teleport", or the "message". On the last line is the qubit "received".
If you look at the first and second animated Bloch spheres, you can see the green dots are moving the same way (they are both moving according to the "message"). That's "quantum teleportation", which means rather to "copy" then to "teleport" the state from the first qubit into the fifth qubit.