I Built a Neural Network You Can Watch Train — Forward Pass, Loss, and Backprop, Animated

A developer built an animated neural network visualization that shows forward pass, loss, and backpropagation in real time. The project uses Framer Motion for smooth animations and includes a fixed-timing system to ensure consistent run lengths. The network's output nodes change color based on loss, allowing viewers to visually track training progress.

Every neural-network tutorial I tried threw equations at me before I ever saw what was actually happening. I wanted the reverse: watch the activations flow forward, watch the loss bars shrink, watch backprop push gradients right-to-left across the layers. So I built it. Here's a neural network that trains itself in front of you 👇 No training data is harmed in the making of this animation — it's a faithful visual model of the phases, built for intuition, not for crunching MNIST. idle → forward → loss → backward → done My first version animated each particle's cx / cy . It worked but stuttered. Switching to Framer Motion's x / y which compile to GPU-friendly CSS transforms made it buttery: <motion.circle r={4} cx={0} cy={0} initial={{ x: x1, y: y1, opacity: 0, scale: 0 }} animate={{ x: x1, x2 , y: y1, y2 , opacity: 0, 1, 1, 0 }} transition={{ duration: 0.65, ease: "easeInOut" }} / Sounds obvious, but my first pass spawned the backprop particles in the same direction as the forward pass. The fix was just swapping the source/target layer so the dots travel from the deeper layer back toward the input: // Forward: layer l-1 → l left → right spawnParticles l - 1, l, FORWARD COLOR ; // Backprop: layer l → l-1 right → left spawnParticles l, l - 1, BACKWARD COLOR ; Tiny change, huge difference in how "correct" it reads. Loss bars are fine, but I wanted the network itself to react. So the output nodes are colored by the current loss — the same thresholds as the bars, so the legend stays consistent: function lossColor loss { if loss < 0.15 return GREEN; // basically trained if loss < 0.40 return GOLD; return RED; // high error } Early epochs glow red; by the end they settle into green. You see the network heal. setInterval drift made every recording a slightly different length. I anchored a start timestamp and held each epoch to a fixed budget, correcting drift as it goes: js function waitUntil targetMs { const remaining = targetMs - Date.now - runStart ; return sleep Math.max remaining, 0 ; } // ...end of each epoch: await waitUntil epoch + 1 EPOCH BUDGET MS ; Now every run lands on the same total time regardless of frame jitter. I'm animating a whole set of these — sorting, Dijkstra, hash tables, binary trees. What algorithm should I visualize next? Drop it in the comments 👇