---
name: "canvas-neural-network-visualizer"
description: "Animated neural network visualization with signal propagation, node activations, and weighted connections. Feed-forward architecture with sigmoid activation."
metadata:
version: "1.0.0"
dependencies:
system:
- "browser"
runtime:
language: "html"
entrypoint: "neural-net.html"
timeout_seconds: 30
---
# Canvas Neural Network Visualizer
> **Difficulty:** Intermediate | **Runtime:** HTML5 Canvas | **Output:** Animated visualization
Teach an AI agent to visualize a feed-forward neural network with animated signal propagation, node activations, and weight connections.
## What You'll Build
A self-contained HTML file showing an animated neural network:
- Configurable layer sizes (input → hidden → output)
- Weighted connections drawn as lines (thickness = weight magnitude)
- Signal pulses traveling along connections during forward pass
- Node activation glow effect (brighter = higher activation)
- Continuous forward pass animation with random inputs
## Teaching Points
- Neural network architecture visualization
- Canvas arc drawing for nodes
- Line thickness mapping for weight visualization
- Particle/pulse animation along paths
- Color interpolation for activation display
---
## Files
### `neural-net.html`
```html
Neural Network Visualizer
Feed-Forward Neural Network — Forward Pass
```
### `README.md`
```md
# Neural Network Visualizer
Animated feed-forward neural network visualization with signal propagation.
## Features
- Configurable layer architecture (4→6→6→3)
- Animated signal pulses traveling along weighted connections
- Node activation glow based on sigmoid output
- Color-coded positive (green) and negative (red) weights
- Continuous forward pass with random inputs
## Run
Open `neural-net.html` in any browser.
```