ACCELERATOR ARCHITECTURE / INTERACTIVE DEMO
A weight-stationary systolic array is hard to follow from a static diagram. This animation shows one activation and its partial sum moving through the array, one cycle at a time.
Run the animation ↗ Source code ↗
What I built
A self-contained JavaScript and Canvas visualization of an int8 matrix engine. It exposes array dimensions, playback speed, single-cycle stepping, randomized inputs, and a comparison with a reference matrix multiply.
The scope is the matrix engine: a full NPU also needs memory movement, scheduling, and vector operations. Those are explored in the NPU learning roadmap.
The design constraint
The animation must communicate the timing correctly. Activations are skewed across rows, partial sums move between registered stages, and useful utilization changes during fill and drain. A visually plausible animation can still show an impossible dataflow.
How it is checked
The repository includes verify.js, which compares a cycle-accurate register model with a reference matrix multiplication. It also checks the renderer’s closed-form timing against that model: active cells, activation positions, partial-sum values, and output arrival cycles.
git clone https://github.com/conboy/npu-anim.git
cd npu-anim
node verify.jsThe suite covers seven array configurations. The README records two bugs caught during development: starting at cycle 1 dropped the first activation, and too few tokens prevented the array from reaching full utilization.
What to inspect
- Pause and step through the first activation entering the array.
- Follow the partial sum down a column.
- Compare fill and drain behavior across array sizes.
- Generate new data and check the reference comparison.
The displayed utilization describes this matrix-engine model. It is not a measurement of FPGA timing, power, DDR bandwidth, or end-to-end model throughput.