Math, diagrams, and animations

This post is a quick tour of what the writing pipeline supports, beyond plain prose and code blocks.

LaTeX

Inline math, like the energy-momentum relation $E^2 = (pc)^2 + (mc^2)^2$, flows naturally inside paragraphs. Display equations get their own block:

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0} \qquad \nabla \times \mathbf{B} - \frac{1}{c^2}\frac{\partial \mathbf{E}}{\partial t} = \mu_0 \mathbf{J}$$

Multi-line aligned equations work too:

$$\begin{aligned} f(x) &= \sum_{n=0}^{\infty} a_n x^n \\ a_n &= \frac{f^{(n)}(0)}{n!} \end{aligned}$$

Everything is rendered to HTML+CSS by KaTeX at build time. No runtime JS, no network calls.

Animated diagrams

For 3blue1brown-style animations, Python scenes live under diagrams/manim/ and render to MP4 with make diagrams. The output lands in public/diagrams/ and gets referenced like any other asset:

The full scene is just a Python class:

from manim import Circle, Create, ReplacementTransform, Scene, Square

class CircleToSquare(Scene):
    def construct(self):
        circle = Circle(radius=1.5).set_fill(opacity=0.4)
        square = Square(side_length=3).set_fill(opacity=0.4)
        self.play(Create(circle))
        self.play(ReplacementTransform(circle, square))
        self.wait(1)

To render: make diagrams-setup once, then make diagrams whenever scenes change.

Interactive widgets

For Khan Academy–style interactive diagrams, MDX posts can embed Astro components with client islands. Drop a Svelte/React/Solid component into src/components/ and import it here with client:load (eager) or client:visible (lazy). The rest of the page stays static — only the widget ships JS.

Static figures

Static SVGs and images use the same <Figure> component:

<Figure src="/diagrams/lattice.svg" caption="A lattice of integers under addition." />

That’s the toolkit.