{"slug": "i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop", "title": "I Built a Neural Network You Can Watch Train — Forward Pass, Loss, and Backprop, Animated", "summary": "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.", "body_md": "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.\n\nSo I built it. Here's a neural network that trains itself in front of you 👇\n\nNo 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.\n\n`idle → forward → loss → backward → done`\n\nMy first version animated each particle's `cx`\n\n/`cy`\n\n. It worked but stuttered. Switching to Framer Motion's `x`\n\n/`y`\n\n(which compile to GPU-friendly CSS transforms) made it buttery:\n\n```\n<motion.circle\n  r={4}\n  cx={0} cy={0}\n  initial={{ x: x1, y: y1, opacity: 0, scale: 0 }}\n  animate={{ x: [x1, x2], y: [y1, y2], opacity: [0, 1, 1, 0] }}\n  transition={{ duration: 0.65, ease: \"easeInOut\" }}\n/>\n```\n\nSounds 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:\n\n```\n// Forward: layer l-1 → l   (left → right)\nspawnParticles(l - 1, l, FORWARD_COLOR);\n\n// Backprop: layer l → l-1  (right → left)\nspawnParticles(l, l - 1, BACKWARD_COLOR);\n```\n\nTiny change, huge difference in how \"correct\" it reads.\n\nLoss 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:\n\n```\nfunction lossColor(loss) {\n  if (loss < 0.15) return GREEN;   // basically trained\n  if (loss < 0.40) return GOLD;\n  return RED;                       // high error\n}\n```\n\nEarly epochs glow red; by the end they settle into green. You *see* the network heal.\n\n`setInterval`\n\ndrift 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:\n\n``` js\nfunction waitUntil(targetMs) {\n  const remaining = targetMs - (Date.now() - runStart);\n  return sleep(Math.max(remaining, 0));\n}\n// ...end of each epoch:\nawait waitUntil((epoch + 1) * EPOCH_BUDGET_MS);\n```\n\nNow every run lands on the same total time regardless of frame jitter.\n\nI'm animating a whole set of these — sorting, Dijkstra, hash tables, binary trees. **What algorithm should I visualize next?** Drop it in the comments 👇", "url": "https://wpnews.pro/news/i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop", "canonical_source": "https://dev.to/amargul/i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop-animated-45db", "published_at": "2026-06-20 17:36:00+00:00", "updated_at": "2026-06-20 18:06:49.353243+00:00", "lang": "en", "topics": ["neural-networks", "developer-tools", "machine-learning"], "entities": ["Framer Motion"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop", "markdown": "https://wpnews.pro/news/i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop.md", "text": "https://wpnews.pro/news/i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop.txt", "jsonld": "https://wpnews.pro/news/i-built-a-neural-network-you-can-watch-train-forward-pass-loss-and-backprop.jsonld"}}