3D Architecture
The 3D canvas renders a faithful geometric model of the transformer's structure. Every dimension, ratio, and component count reflects the actual model configuration — not a schematic.
Geometry mapping
| Model property | 3D geometry |
|---|---|
| Layer count (24) | Stack height — 24 horizontal slices |
| Q heads (14) / KV heads (2) | 14 Q blades, 2 KV groups in the attention district |
| FFN expansion (4864/896 = 5.43×) | SwiGLU funnel width proportional to expansion ratio |
| Hidden size (896) | Spine diameter encoding |
| RMSNorm (not LayerNorm) | Collar geometry (ring only, no double-ring) |
Scene districts
The scene is organized into districts, each rendered by a dedicated React Three Fiber component:
- EmbeddingDistrict — the embedding lookup layer at the bottom of the stack, showing the PCA-projected token embedding cloud.
- AttentionDistrict — the GQA blade structure and attention heatmap for the selected layer.
- TokenizerDistrict — the tokenization visualization with colored token chips.
- TransformerStack — the full 24-layer spine with all sub-components.
Camera
The camera uses an orbit controller with a configurable target. In Generation mode, “follow mode” automatically recenters the camera on the currently active operation. In Walkthrough mode, each chapter has a preset camera position and target optimized for that chapter's geometry.