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

> Source: <https://dev.to/amargul/i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop-animated-45db>
> Published: 2026-06-20 17:36:00+00:00

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 👇