Add diagrams and animations to course website (inspired by makingsoftware.com)

I love the work of the creator of MakingSoftware, and I used his design style for the website. Building on that direction, we should keep adding striking visuals and animations.

We should enhance the ai-engineering-from-scratch website with rich diagrams and subtle animations inspired by [makingsoftware.com](https://www.makingsoftware.com/). refs The goal is to explain complex AI engineering concepts visually (systems, data flows, training loops, deployment pipelines) without distracting from the reading experience. [refs](https://refs.gallery/projects/makingsoftware)

Motivation / Why

• Visual explanations help learners understand complex systems faster than text alone. [bool](https://bool.dev/blog/detail/animated-architecture-diagrams)
• Animated diagrams can illustrate flows (data movement, requests, training steps) much more clearly than static images. [bool](https://bool.dev/blog/detail/animated-architecture-diagrams)
• MakingSoftware shows there is appetite for a “beautiful, illustrated manual” style for technical topics; we can adapt that idea for AI engineering. [refs](https://refs.gallery/projects/makingsoftware)

Requirements / Acceptance criteria

• Add a visual style guide for diagrams (colors, line weights, typography, background, spacing) that matches the existing site branding.
• Implement at least 3–5 core animated diagrams for key concepts (e.g., inference request flow, training pipeline, eval loop, vector search, retrieval-augmented generation). [bool](https://bool.dev/blog/detail/animated-architecture-diagrams)
• Animations must:
  • Be smooth and minimal (no constant distracting motion; prefer subtle reveals, fades, line-drawing, or step-wise animations). news.ycombinator
  • Respect prefers-reduced-motion and degrade gracefully to static diagrams. [refs](https://refs.gallery/projects/makingsoftware)
  • Perform well on mobile and desktop (no jank, reasonable asset sizes).
• Diagrams should be reusable components in the codebase (e.g., React components, MDX shortcodes, or SVG/Canvas modules).
• Add documentation to the repo on how to create, update, and embed diagrams.

Implementation ideas (non-binding)

• Use SVG-based diagrams with CSS or lightweight JS for line-drawing and fade-in animations.
• Consider tools like Figma, diagrams.net, or Canva to design diagrams, then export to SVG/GIF/MP4 as appropriate. [bool](https://bool.dev/blog/detail/animated-architecture-diagrams)
• For code-driven diagrams, consider libraries like Mermaid or a small custom SVG component system, keeping bundle size in mind. [reddit](https://www.reddit.com/r/softwarearchitecture/comments/1rirj2e/whats_your_goto_tool_for_creating_architecture/)
• Add a components/diagrams/ (or similar) directory to organize reusable visual components.

Scope for first iteration

• Pick 1–2 representative lessons and:
  • Design static diagrams for them.
  • Add one animated version where animation genuinely helps understanding (e.g., showing step-by-step data flow).
• Get feedback on motion level, clarity, and accessibility before rolling out across the course.

Open questions

• What is the primary diagram “language”? (e.g., boxes-and-arrows for systems, timelines, matrices for embeddings, etc.)
• Do we want inline micro-animations inside paragraphs, or only in dedicated “diagram sections”?
• Should diagrams be auto-generated from source-of-truth specs (e.g., config files, architecture definitions), or hand-crafted?

Tasks

• Audit top 10–15 lessons where diagrams would have the highest impact.
• Define visual style guide for course diagrams.
• Prototype 2–3 diagram styles and get feedback.
• Implement diagram components and animation patterns in the codebase.
• Integrate diagrams into selected lessons.
• Add contributor docs for adding/editing diagrams.