Executive summary

Mathematics on the web in 2026 is a much better place than it was when Distill.pub went into hiatus in 2021, but the gold-standard register has not gotten cheaper. The technical floor is excellent: KaTeX renders LaTeX-quality formulas in milliseconds with a CDN script tag, and Three.js handles WebGPU 3D math without configuration as of release r171. The ceiling — a Bartosz Ciechanowski page with a hundred hand-rolled interactive diagrams — remains a six-month project for a single author. What changed is the middle. Mafs and Penrose 3.0 closed real gaps; Manim Community’s CLI plus AI-driven Manim wrappers (Math-To-Manim as a Claude Code skill) made pre-rendered animations a one-paragraph prompt away; Astro + MDX is a credible alternative to Quarto for math-heavy explainers; and View Transitions plus scroll-linked CSS animations let you do in zero JavaScript what required a small framework two years ago.

For someone with the requester’s stack — pandoc + KaTeX + custom CSS + inline SVG, served by npx live-server — the answer to “what should I add” is short and opinionated. Add Mermaid (free, ten-minute learning curve) and Mafs (one React island per page) for interactivity. Add Manim Community via pipx install manim (one no-sudo install) when an explainer wants pre-rendered animation. Treat Quarto as an upgrade path you don’t need yet — it adds executable code blocks and Observable JS bindings, both useful, but it doesn’t change the floor. Skip Astro unless the project becomes a multi-page site. Bartosz Ciechanowski’s blog is the single most-effort-rewarding reference to study for two hours; its source is open on GitHub and the techniques are adoptable solo.

This report covers the full landscape so the next hour of decision-making is grounded.

Stack at a glance

If you only do one thing: add Mermaid to the Markdown source for diagrams that don’t merit hand-coded SVG. Five-minute setup, zero install, renders inline.

If you only study one site: ciechanow.ski. The techniques are open and adoptable. If you have two hours, read Gears and view source.

1. Formula rendering

The performance argument that drove the KaTeX-vs-MathJax decision in 2018 has narrowed but not closed. MathJax 3 (the rewrite) is a different library from MathJax 2; in some pages with many small equations, it now beats KaTeX on initial render. KaTeX still wins on bundle size and synchronous rendering — equations appear before paint, no reflow — which matters for a page where the user will reload often during typography iteration (BigGo News, 2026).

Recommendation. For the requester’s use case, stay on KaTeX. It loads from CDN with a single line, the auto-render extension scans the DOM for $...$ and $$...$$, and the rendering is synchronous. The features KaTeX lacks (the long tail of LaTeX commands like \diagram from xy-pic, full mathlib3-style cd, etc.) don’t appear in our content.

KaTeX (katex.org, github.com/KaTeX/KaTeX) Synchronous LaTeX-to-HTML math rendering. Status: active, last release in 2025, multi-maintainer. Cost: ~280KB gzipped, MIT license, ~2 hours to be fluent including macros. Best for: any page where math density is moderate and reload speed matters. Avoid for: pages relying on AsciiMath or full xy-pic commutative-diagram syntax (use MathJax 3 instead).

MathJax 3 (mathjax.org) Broader LaTeX coverage, AsciiMath and MathML input, SVG and HTML output. Status: active. Cost: ~600KB gzipped, Apache 2.0, ~4 hours to be fluent including configuration. Best for: accessibility-critical sites (built-in screen-reader support, braille output, interactive math exploration), or pages using AsciiMath / xypic. Avoid for: greenfield pages where KaTeX covers the LaTeX subset you actually use.

MathML Core (native browser) (w3c MathML Core spec) Browser-native math rendering. Status: implemented in Firefox, Safari, Chrome (since 2023). Cost: zero — it’s a browser feature. Best for: pre-render-at-build-time pipelines that emit MathML once and let the browser do the work; accessibility wins. Avoid for: hand-authored content. Direct MathML is verbose and tooling around it is thin. Use KaTeX or MathJax to output MathML if you want it.

The pre-render path is worth flagging. Astro’s recipes (build-time math) compile $$...$$ to SVG at build time, which means zero KaTeX/MathJax JavaScript ships to the reader. The page paints faster and degrades gracefully if JS fails. The cost is a build step.

Practical answer to the requester’s question 1 (“Is MathJax still worth installing in 2026?”): no, not for greenfield work that doesn’t need AsciiMath, MathML input, or first-class screen-reader support. KaTeX has absorbed the win.

2. Charts and plots

Distinguish four categories. Recommendations differ sharply.

Static publication-quality plots. Use matplotlib + seaborn (Python; export PNG/SVG/PDF), or plotnine (Python, ggplot2-shaped), or ggplot2 in R if you’re already there. For a one-off de Bruijn factor chart in a workshop submission, this is the right tool. The plot is a static image; embed in HTML or LaTeX. No JavaScript runs on the reader’s machine.

Interactive web-native charts. Three viable options in 2026:

Vega-Lite (vega.github.io/vega-lite) Declarative JSON specification for grammar-of-graphics charts. Status: active, mature. Cost: ~200KB, BSD, learning curve ~6 hours including grammar. Best for: charts whose specification needs to be stored, generated, or templated. Reproducibility wins. Avoid for: highly bespoke interaction patterns; the declarative model fights you.

Plotly.js (plotly.com/javascript) Imperative chart library with built-in zoom/pan/hover. Status: active. Cost: ~3MB gzipped (heavy), MIT, ~3 hours to fluent. Best for: scientific/financial plots needing rich interactivity out of the box, large datasets via WebGL. Avoid for: minimal pages — the bundle size is a real cost.

Apache ECharts (echarts.apache.org) Comprehensive chart library, originally Baidu’s, ~1.8M weekly npm downloads (npmtrends). Status: very active. Cost: ~900KB, Apache 2.0, ~4 hours to fluent. Best for: dashboards, real-time data, visually rich animations. Avoid for: print-style publication plots.

For a single chart in a single explainer, the lowest-effort path is matplotlib → static SVG embedded directly in the HTML.

Math-flavored charts. This is where the 2026 landscape is genuinely different. The standout:

Mafs (mafs.dev, github.com/stevenpetryk/mafs) Opinionated React components for interactive math: function plots, vector fields, sliders, polar coordinates, draggable points. Status: active, v0.21+ shipped 2025–2026, well-tested (unit + e2e + visual regression). Cost: React dependency, ~150KB on top of React, MIT. Best for: interactive math demos in a React/Next/Astro page. Output looks Distill-shaped out of the box. Avoid for: non-React stacks; embedding Mafs alone in a static HTML page requires React’s runtime.

Desmos API (desmos.com/api) Embeddable graphing calculator (the same one used by 50M students). Status: active. Desmos Studio is a Public Benefit Corporation since the 2022 spinoff. Cost: free for non-commercial, proprietary. Best for: a quick polished interactive plot you don’t need to customize deeply. Avoid for: aesthetic consistency with a custom-styled site (Desmos’s UI doesn’t blend).

GeoGebra (geogebra.org) Geometry, algebra, calculus interactive embeds. Status: active. Cost: free, GPL. Best for: geometry-heavy explainers, K–12 audiences. Avoid for: research-flavored math; the GeoGebra aesthetic reads as classroom.

JSXGraph (jsxgraph.uni-bayreuth.de) JavaScript library for interactive geometry, function plotting, charting. Status: active, well-established (Bayreuth University). Cost: ~250KB, MIT. Best for: when you want code-controlled geometry in a vanilla JS or non-React page. Avoid for: data-heavy plotting (use Vega-Lite or Plotly).

Hand-coded SVG with d3. Still the right call for a one-off illustrative diagram with no live interactivity. The setup cost is zero (write SVG by hand or with d3-selection); the maintenance cost scales with complexity. Anything with sliders or dragging belongs in Mafs or JSXGraph.

Practical answer to question 2 (“lowest-friction path to add one slider-controlled plot to a Markdown-pandoc page?”): drop in Mafs via a small React island. The page stays pandoc-built; one <div id="my-plot"> placeholder gets hydrated with a 30-line React component imported from a CDN. If React is a no-go, JSXGraph plugged into a standalone <div> with vanilla JS is the equivalent.

3. Diagrams

Mermaid (mermaid.js.org) Markdown-to-diagram syntax for flowcharts, sequence, ER, gantt, classDiagram, mindmap. Renders inline in Markdown, GitHub README, Quarto, Astro, MkDocs, almost everywhere. Status: very active, added new diagram types in 2025–2026. Cost: ~1.2MB if loaded as a CDN bundle, MIT. Best for: flowcharts, sequence diagrams, simple state machines. The default for protocol/system diagrams. Avoid for: precise mathematical diagrams (commutative diagrams, tree visualizations) — Mermaid wasn’t designed for them.

Quiver (q.uiver.app, github.com/varkor/quiver) Web-based commutative-diagram editor. Exports to TikZ for LaTeX or to embeddable iframe/img. Status: active. Cost: free, MIT. Best for: category-theory diagrams, commutative squares, pasting diagrams. Avoid for: live interactive diagrams (it’s an editor, not an embed runtime).

TikZJax (tikzjax.com) TikZ in browser via WASM. The Pascal source of TeX is compiled to WebAssembly. Status: active, used by the Obsidian community. Cost: ~1.2MB initial WASM load, free. Best for: pages that already think in TikZ (academic authors). Avoid for: lightweight pages — the WASM payload is heavy and load is one-time-per-session.

Penrose 3.0 (penrose.cs.cmu.edu, github.com/penrose) Declarative diagram synthesis. You write Substance (mathematical objects + relationships) and Style (graphical realization); Penrose produces the SVG. Status: very active. Penrose 3.0 announced in 2026 with reworked core API. Cost: free, MIT, ~10 hours to learn the DSLs. Best for: diagrams where the mathematical content stays stable but you want multiple visual treatments (e.g., teaching the same theorem twice with different aesthetics). Avoid for: one-off diagrams with no reuse story; the up-front cost of writing Substance + Style isn’t amortized.

Excalidraw (excalidraw.com) Hand-drawn-feel illustrations. Embeddable as iframe or exported SVG. Status: very active. Cost: free, MIT. Best for: warm informal diagrams in blog posts; whiteboard-style figures that pair well with conversational prose. Avoid for: formal academic submissions.

tldraw SDK 4.0 (tldraw.dev) Infinite-canvas SDK for React; full editing/collaboration features available. Status: very active, SDK 4.0 released 2026. Cost: free for self-hosted, commercial license for SaaS use. Best for: when you want a user-editable whiteboard inside an explainer (e.g., let the reader sketch alongside the text). Avoid for: read-only diagram embeds — the SDK is a heavy dependency for that.

Inline hand-coded SVG What the requester is currently doing. Cost: zero install, however many minutes the diagram takes to draw. Best for: one-off diagrams without live interaction; commutative-diagram-style geometric figures; expression trees if simple. Avoid for: anything with > ~10 nodes or any case where text labels need to reflow.

Tree visualizations specifically (relevant to EML expression trees): for static trees, hand-coded SVG remains the right move. For trees that grow programmatically or change shape, react-d3-tree (npm) wraps d3-hierarchy.tree() with a React component that handles collapsible nodes, custom path drawings, and styling. ~10KB once React is on the page.

Practical answer to question 5 (“Is hand-coded SVG genuinely the right move?”): yes, for the diagrams currently in the math-team explainer (composition arrow chain, commutative square, expression tree, domain-narrowing rings). Penrose is overkill for one-off illustrations. Quiver is good if the diagram is specifically a commutative diagram and you want LaTeX export — for HTML-first work, hand-coded SVG is faster.

4. Animations

Two distinct registers. Pre-rendered video and live-interactive animation produce very different artifacts and have very different production costs.

Pre-rendered animation

Manim Community Edition (manim.community, docs.manim.community, v0.20.1 stable as of 2026) Python framework for programmatic mathematical animation. The 3Blue1Brown aesthetic. Status: actively maintained but undergoing a major refactor; new feature contributions paused as of 2026. Cost: pip install (pip install manim), Python 3.10+, optional FFmpeg for video output, MIT. Best for: pre-rendered animations where the math drives the motion. Output is MP4, GIF, or WebM, embeddable in any HTML page. Avoid for: interactive animations driven by reader input — Manim is offline rendering only.

Math-To-Manim (github.com/HarleyCoops/Math-To-Manim) Claude Code skill that turns natural-language prompts into Manim Python code. Status: active 2026. Cost: free, Claude Code subscription. Best for: someone who wants a 30-second Manim animation in five minutes without learning the API. Iterate on the prompt; the LLM rewrites the Python. Avoid for: production-quality animations with strict aesthetic control — LLM-generated Manim is often verbose and the outputs need cleanup.

Generative Manim (github.com/marcelo-earth/generative-manim) Open-source GPT-driven Manim wrapper. Status: active. Cost: free, requires OpenAI/Anthropic API key. Best for: people who don’t want to use Claude Code specifically.

Motion Canvas (motioncanvas.io) TypeScript-based programmatic animation framework. Different aesthetic from Manim — closer to After Effects timeline + code than to 3Blue1Brown’s mathematical scenes. Status: active. Cost: ~10MB once dependencies are installed, MIT. Best for: presentations, technical talks, code-first animation if you prefer TypeScript over Python. Avoid for: math-paper-shaped pre-rendered animations — Manim has a tighter math idiom.

Practical answer to question 6 (“pre-rendered Manim vs interactive — when is each correct?”): Manim for a 30-second cinematic intro (the moment in your essay where you want the reader to watch a thing unfold). Interactive (Mafs / GSAP / CSS) for the body of the essay where the reader manipulates parameters. Most great math explainers use both: Ciechanowski’s Internal Combustion Engine opens with a static scene-setting figure, then puts the reader in control.

Practical answer to question 7 (“right Linux Fedora setup for animation production no-sudo?”): pipx install manim (no sudo, no system Python pollution); FFmpeg via mise install ffmpeg; that’s it. Manim handles its own asset rendering. For screen recording, OBS Studio is in the Fedora Flatpak repo (flatpak install com.obsproject.Studio); Flatpak doesn’t need sudo.

Live interactive animation

GSAP (gsap.com) Industry-standard animation library; SVG, DOM, CSS, Three.js bindings. Status: very active. Free for most uses since the 2024 license change. Cost: ~50KB gzipped, free. Best for: complex chained animations, timeline control, coordinated SVG transformations, scroll-triggered reveals. Avoid for: simple CSS-only animations.

Anime.js v4 (animejs.com) Lighter alternative to GSAP. Recently rewritten with new modular API. Status: active. Cost: ~25KB, MIT. Best for: when GSAP feels heavy.

Framer Motion (motion.dev) React-first animation library, recently rebranded from “Framer Motion” to “Motion.” Status: very active. Cost: ~80KB, MIT. Best for: React-based explainers (Astro, Next, etc.). Pairs naturally with Mafs.

CSS scroll-driven animations (animation-timeline: scroll()) Browser-native, no JavaScript. Status: shipped in Chrome and Safari (2025); Firefox behind a flag as of 2026 (dev.to article). Universal support except Firefox flag. Cost: zero. Best for: scroll-locked reveals, parallax, “as you scroll, this morphs” effects. Avoid for: animations that need to respond to other inputs (clicks, drags).

View Transitions API Browser-native page-transition animation. Cross-document transitions shipped in Safari 18.2; Interop 2026 focus area. Status: shipped Chrome + Safari + Firefox (cross-document is the 2026 push). Cost: zero. Best for: smooth navigation between math-explainer pages, image-state transitions, “expand this figure to full screen” effects.

The Josh Comeau register (joshwcomeau.com/animation) is the single best teaching resource for live-interactive web animation in 2026, including his upcoming Whimsical Animations course and individual deep-dive articles on CSS keyframes and scroll-linked timelines.

5. Explorable explanations

The genre that Bret Victor’s Tangle defined in 2011. Distill.pub became its journal-of-record for ML; that journal went on indefinite hiatus in 2021 due to maintainer burnout (Topos Institute, 2025). Multiple groups have proposed AI-tooling-driven resurrections; none has shipped a production replacement.

The current landscape:

Idyll (idyll-lang.org, github.com/idyll-lang/idyll) Markdown-shaped DSL for explorable essays with reactive data binding. Status: maintenance — active in 2024 but no major releases in 2025–2026. Cost: npm install, MIT. Best for: someone who wants the Distill aesthetic without writing React from scratch. Avoid for: greenfield work where Astro + MDX gives more flexibility for less framework lock-in.

Curvenote (curvenote.com, github.com/curvenote/components) Scientific-writing platform connecting to Jupyter; their components library is “tangle.js re-imagined as web-components.” Status: active. Cost: free + paid SaaS tiers. Best for: research workflows that already live in Jupyter and want a publishing surface. Avoid for: standalone-blog-shaped output.

Observable (observablehq.com) Reactive JavaScript notebooks with Observable Plot baked in. Over 1M notebooks created. Status: active. Cost: free for individuals, paid for teams. Best for: prototyping interactive data visualizations; embedding individual notebooks into other pages. Avoid for: full-essay-shaped explainers; the notebook format isn’t a long-form medium.

Mathigon (mathigon.org) Full-curriculum interactive math textbook. Status: active. Cost: free for users; the source is open (github.com/mathigon). Best for: a multi-page interactive math course. Overkill for a single article.

Quarto Observable JS (quarto.org) Quarto’s native support for Observable JS lets you write reactive interactive blocks inside Markdown documents. Status: very active. Cost: Quarto install, MIT. Best for: someone already in the Quarto ecosystem (R or Python authors). Avoid for: pandoc-only stacks where Quarto is an over-investment for one feature.

Practical answer to question 3 (“contemporary equivalent of Distill.pub for someone publishing today?”): there is no single answer. The closest options:

• Quarto + Observable JS if you’re publishing one article on a personal site and want the Distill aesthetic out of the box.
• Astro + MDX + Mafs if you want full control over typography and component architecture.
• A static HTML site (the requester’s current path) + Mafs islands for ad-hoc interactivity. This is the simplest answer that produces near-Distill output.
• Substack with embedded Observable iframes if you want zero hosting infrastructure and the audience is on Substack already.

None matches Distill.pub’s editorial standard at scale. The standard is currently held by individual authors (Ciechanowski, Comeau, the 3B1B-influenced YouTube-to-blog crossover) rather than a platform.

6. 3D math visualization

Three.js (threejs.org, r170+ release line) The workhorse. WebGPU support is now first-class (no configuration since r171). Status: very active. Cost: ~600KB core gzipped, MIT. Best for: any 3D math figure. Surfaces, manifolds, vector fields, geometric proofs. Avoid for: trivial 2D — overkill.

Mathbox (github.com/unconed/mathbox) Steven Wittens’s library on top of Three.js for math-specific 3D rendering. Famous for the Acko.net intro. Status: maintenance only — last meaningful releases in 2023; recent commits address Three.js compatibility, not new features. Cost: free, MIT. Best for: the Acko.net aesthetic — high-density mathematical scenes with grid overlays and parametric surfaces. Avoid for: greenfield work — the project’s age means Three.js compatibility lags. Use Three.js directly with custom math helpers.

Babylon.js (babylonjs.com) Three.js alternative; stronger for game-shaped 3D. Status: very active. Cost: ~1.2MB, Apache 2.0. Best for: 3D scenes with physics, sound, XR. Avoid for: pure math illustration — Three.js is better here.

WebGPU adoption. Three.js’s WebGPURenderer became zero-configuration in r171; WebGPU is supported in all major browsers including Safari iOS as of September 2025 (utsubo.com). For a single math explainer page, WebGL is still the right default — WebGPU’s performance wins matter for draw-call-heavy scenes, not for one rotating manifold.

7. Build pipelines

Pandoc + xelatex + custom CSS + KaTeX (the requester’s current stack) Single Markdown source produces both HTML (with KaTeX) and PDF (with xelatex). Cost: ~zero — pandoc and texlive are system packages on Fedora. Best for: bilingual HTML/PDF output, full typography control, no framework lock-in. Avoid for: multi-page sites where shared layout matters (use a static site generator).

Quarto (quarto.org) Pandoc-based, adds executable code blocks (Python/R/Julia/Observable JS), reactive widgets, books and websites. Status: very active, backed by Posit. Cost: ~250MB install, MIT. Best for: data-science-shaped explainers where the math comes from running code; technical books with embedded interactive plots. Avoid for: pure prose + KaTeX explainers — Quarto’s value-add is wasted, and the install is heavier than pandoc alone.

Astro + MDX (astro.build) Modern static site generator with React/Vue/Svelte islands, build-time math via plugins, near-zero JavaScript shipping by default. Status: very active. Cost: npm-based, ~50MB node_modules, MIT. Best for: multi-page math-explainer sites where Mafs/Three.js islands are needed throughout. The right pick for an interactive-math-blog. Avoid for: single-document explainers — overkill versus pandoc.

Hugo + KaTeX shortcode (gohugo.io) Single Go binary, fast incremental builds, large theme ecosystem. Status: very active. Cost: single binary install, free. Best for: blog-shaped math sites with hundreds of posts where build speed matters. Avoid for: dynamic interactivity — Hugo’s strength is static rendering.

mdBook (rust-lang.github.io/mdBook) Rust-based; the Lean and Rust documentation use it. Status: very active. Cost: cargo install, free. Best for: book-shaped technical documentation; pairs naturally with Lean’s Verso ecosystem. Avoid for: blog-shaped or single-essay output.

Verso (github.com/leanprover/verso) Lean’s official documentation tool; embeds Lean code with proof states and goal hovers natively. Status: active, experimental for the Lean-to-HTML renderer. Cost: Lean install required. Best for: documentation that includes interactive Lean proofs (the math-team’s natural future home if it goes Lean-native). Avoid for: prose-only content — pandoc is lighter.

Practical answer to question 9 (“does the requester’s stack have an upgrade path or does Quarto/Astro deprecate it?”): the existing stack has a clean upgrade path. The single most useful migration is adding (not replacing) one piece — for example, dropping in Mafs as a React island while keeping pandoc as the document compiler. The full Quarto/Astro switch only pays off when the project reaches three or more pages with shared layout.

8. Aesthetic references — the gold standard

The single highest-leverage two hours you can spend studying technical-explanation aesthetics in 2026:

Bartosz Ciechanowski (ciechanow.ski) The single highest-bar reference. Articles on Gears, Internal Combustion Engine, Earth and Sun, Mesh Transforms, Curves and Surfaces. Distinctive: each post has 30–100+ hand-rolled interactive diagrams. The reader can drag, scrub, slide, zoom. Typography is straightforward Source Serif Pro on a near-cream background. The interactivity is the differentiator. Adoptable: the source is open. View source on Gears — the diagrams are inline SVG with <canvas> overlays, no framework. The technique is reproducible by anyone with patience and ~50 hours per article. Funded via Patreon (541 paid members as of 2025). One person, four articles a year.

Distill.pub archive (distill.pub) Archived in 2021 but the editorial standard. Specifically Olah & Carter on Attention, Schubert et al. on neural net visualization, and Carter & Mordvintsev’s Building Blocks of Interpretability. Distinctive: typographic care (Source Serif Pro again, generous leading), a strict editorial process, custom illustrations integrated mid-paragraph rather than as figures. Adoptable: the article-template repo is on GitHub (github.com/distillpub/template) and still works in 2026.

3Blue1Brown / Reducible aesthetic Pre-rendered video, not HTML. The Manim library is the toolchain. Distinctive: navy background, cyan-and-yellow accent palette, slow easing, mathematical objects that demonstrate themselves rather than being explained at. Adoptable: install Manim Community, copy a 3B1B-style scene, modify; the visual language transfers if you keep the palette and easing curves.

Stripe Press (press.stripe.com) Book design, not web. Recommended as a general typography reference. Distinctive: Source Serif Pro body, Inter sans, generous margins, navy + cream covers, no-nonsense layout, refined-not-flashy. Adoptable: the website (press.stripe.com) shows 3D book mockups via custom Three.js work — overkill for explainer use, but the book covers themselves are a typography reference. The math-team explainer site already mirrors this stack (Source Serif 4 + Inter + JetBrains Mono).

Quanta Magazine (quantamagazine.org) The “explanatory journalism” register for advanced math. Distinctive: long-form essay layout, bespoke illustrations, careful but readable. Adoptable: the typography (a serif body, a custom display sans for headlines, generous figure margins) transfers easily.

Setosa.io / Explained Visually (setosa.io/ev) Static-but-interactive d3-driven explainers (PCA, eigenvectors, image kernels). Distinctive: sparse layout, big margins, one diagram per concept, the diagram does the work. Adoptable: the technique (SVG + d3 + sparse text) is what the math-team explainer site already approximates.

Nicky Case explorables (ncase.me) Conversational tone, hand-drawn-feel illustrations, accessibility-first. Distinctive: warmth. The reader is treated as a friend, not a student. Hand-drawn cursors, joke captions, intentional rough edges. Adoptable: the tone is what transfers. Technically the explorables are vanilla JS + SVG.

Josh W. Comeau (joshwcomeau.com) Front-end-development teaching with interactive blog posts. Distinctive: every CSS or animation concept is demonstrated by a live widget the reader can manipulate. Very comfortable margin-and-leading rhythm. Adoptable: the technique is React-Mafs-like islands inside Markdown. Worth studying for how he integrates interactivity into prose.

Brilliant.org (brilliant.org) Proprietary curriculum, but the visual language of “interactive math lesson” is shaped here. Distinctive: clean typography, restrained palette, consistent interactive-widget grammar. Adoptable: as inspiration, not directly.

Color palettes specifically. Three traditions worth knowing:

• Brewer palettes (cynthia.brewer / colorbrewer.org) — for categorical/sequential data. The default in matplotlib, ggplot2.
• Viridis / cividis / mako / rocket — perceptually uniform, colorblind-friendly. The 2020s default for serious data work.
• OkLCH-based modern palettes (oklch.com) — perceptually uniform color picker, increasingly the basis for design-system palettes.

The 3Blue1Brown cyan-and-yellow is a navy-background palette. The Stripe navy tradition is a near-black-on-cream tradition. The math-team explainer site uses both — navy for section headings, cream-shifted-white for body, accent-orange for callouts.

Typography. The math-text-pairing question. KaTeX defaults to Computer Modern math; in a serif-prose context, this clashes (Computer Modern is too academically narrow, and the math italic doesn’t share a designer with the prose font). Options:

• Source Serif 4 + KaTeX Computer Modern math — what the math-team site uses. Clash is mild because Source Serif’s slightly old-style figures and KaTeX’s slab-y math italic find common ground.
• STIX Two Math + STIX Two Text — designed-together pair. The “academic typography” gold standard, free.
• EB Garamond + Garamond Math — the classical look. Garamond Math is a recent project (github.com/YuanshengZhao/Garamond-Math).
• Latin Modern Math + Latin Modern Roman — the TeX defaults, free, ubiquitous, slightly bookish.

Practical answer to question 4 (“most-effort-rewarding aesthetic reference to study for two hours?”): Bartosz Ciechanowski’s Gears article. Read it once for the experience; read it once more with view-source open. The interactive-diagram pattern is reproducible.

9. 2025–2026 specific developments

MathML Core in browsers. Native MathML rendering is now in Chrome (since 2023), Firefox, and Safari (mathml.igalia.com). For pages where you want the smallest possible JavaScript footprint, pre-render KaTeX or MathJax to MathML at build time and let the browser do the rest. The practical answer is that for hand-authored content KaTeX-as-runtime remains easier; for archive-shaped content where build complexity is amortized, MathML is the right output.

CSS scroll-driven animations (animation-timeline: scroll()). Universal browser support except Firefox-behind-flag as of 2026. Use cases for math explainers: scroll-locked reveals of proof steps, parallax-style “as you scroll, the equation transforms” effects. Zero JavaScript.

View Transitions API. Cross-document view transitions shipped in Safari 18.2 and the 2026 Interop focus area. Use cases: smooth navigation between pages of a multi-part math article; expanding a small figure to full-screen.

Container queries. Stable. Math figures can now respond to their container size, not the viewport — which means a Mafs widget can render compactly in a sidebar and richly when full-page.

WebGPU. Three.js zero-config since r171, all major browsers including Safari iOS as of September 2025. For 3D math, WebGPU is now the recommended path.

WebAssembly Lean / Coq / Agda in browser. Lean4Web lets readers run Lean proofs in browser. For an explainer that wants readers to actually re-run the formalization, this is the right tool. The catch is configuration — running a Lean4Web instance against your specific mathlib-dependent project is non-trivial (~1–2 days of work). For static rendering of Lean proofs with hover-to-see-state, Alectryon 2.0 is much lighter (~3–4 hours setup).

AI-generated math illustration. This is the genuinely new category in 2026. Math-To-Manim (a Claude Code skill, github.com/HarleyCoops/Math-To-Manim) and Generative Manim (github.com/marcelo-earth/generative-manim) let you describe an animation in natural language and get Manim Python code back, ready to render. Manimator (arxiv.org/html/2507.14306v1) goes further — feeds research papers in, gets explanatory animations out. For a math-team workflow that already uses Claude Code, Math-To-Manim is the lowest-friction way to add a 30-second pre-rendered animation to an explainer.

Practical answer to question 8 (“is AI-generated math illustration worth investing time in 2026?”): yes, specifically for pre-rendered Manim scenes. The LLM-to-Manim pipeline is mature enough that a 30-second animation is a 5-minute prompt iteration cycle. For interactive widgets, AI-generation isn’t there yet — Mafs/Three.js code can be drafted by an LLM but needs human polish.

10. Recommendation matrix — expanded

Cell legend:

• “recommended”: the cell shows the right pick.
• “avoid” is implicit by absence; specific anti-recommendations:
  • Avoid Mathbox for greenfield 3D work — Three.js directly.
  • Avoid Idyll for greenfield — Astro + MDX + Mafs has more flexibility for similar effort.
  • Avoid Quarto unless data-science-shaped — overkill for prose + KaTeX.
  • Avoid full Astro for a single document — pandoc is lighter.
  • Avoid Generative Manim web app (the SaaS); use the Math-To-Manim Claude Code skill or local Manim CE directly.

Bookmarks — the curated list

Formula rendering - katex.org - mathjax.org

Charts - mafs.dev ← the standout - vega.github.io/vega-lite - echarts.apache.org - desmos.com/api

Diagrams - mermaid.js.org - q.uiver.app - tikzjax.com - penrose.cs.cmu.edu - excalidraw.com - tldraw.dev

Animation - manim.community - github.com/HarleyCoops/Math-To-Manim ← AI-generated - motioncanvas.io - gsap.com - motion.dev (formerly Framer Motion) - joshwcomeau.com/animation ← teaching reference

Explorables - idyll-lang.org - observablehq.com - curvenote.com - mathigon.org

3D math - threejs.org - github.com/unconed/mathbox (study only — maintenance-mode)

Build pipelines - quarto.org - astro.build - rust-lang.github.io/mdBook - github.com/leanprover/verso

Aesthetic references — study these - ciechanow.ski ← read Gears first - distill.pub (archive) - press.stripe.com (typography) - quantamagazine.org - setosa.io/ev - ncase.me - joshwcomeau.com - acko.net (Mathbox author’s blog — for the aesthetic, not the framework)

2026 dev resources - Interop 2026 announcement - MDN: View Transitions API - MDN: scroll-driven animations - Three.js r170 release

Sources cited

• BigGo News, KaTeX vs MathJax: Web Rendering Supremacy (2026). https://biggo.com/news/202511040733_KaTeX_MathJax_Web_Rendering_Comparison
• CSS-Tricks, Bartosz Ciechanowski’s Interactive Blog Posts. https://css-tricks.com/bartosz-ciechanowskis-interactive-blog-posts/
• Topos Institute, Distilling Research at Scale (2025). https://topos.institute/blog/2025-04-04-scalable-distillations-for-research/
• ManimCommunity GitHub, current release v0.20.1. https://github.com/ManimCommunity/manim
• Mafs project, mafs.dev, github.com/stevenpetryk/mafs.
• Penrose 3.0 announcement. https://penrose.cs.cmu.edu/blog/v3
• Three.js r170 release notes. https://github.com/mrdoob/three.js/releases/tag/r170
• Utsubo, What’s New in Three.js (2026): WebGPU, New Workflows. https://www.utsubo.com/blog/threejs-2026-what-changed
• Mathmlcore via Igalia. https://mathml.igalia.com/
• Webkit, Announcing Interop 2026. https://webkit.org/blog/17818/announcing-interop-2026/
• Manimator paper. https://arxiv.org/html/2507.14306v1
• AlternativeTo, Manim Community Alternatives. https://alternativeto.net/software/manim-community/
• npm trends comparison: ECharts/Plotly/Vega-Lite. https://npmtrends.com/echarts-vs-plotly-vs-vega-vs-vega-lite
• Awesome Explorables. https://github.com/blob42/awesome-explorables
• Awesome Interactive Math. https://github.com/ubavic/awesome-interactive-math
• Curvenote components. https://github.com/curvenote/components
• Joshwcomeau.com animation index. https://www.joshwcomeau.com/animation/
• Stripe Press. https://press.stripe.com/
• Tldraw SDK 4.0 announcement. https://tldraw.dev/blog/tldraw-sdk-4-0
• Curvenote / Idyll pages, GitHub repos. https://github.com/idyll-lang/idyll
• Math-To-Manim. https://github.com/HarleyCoops/Math-To-Manim

Report compiled by the strategist agent on 2026-05-10 in response to Daniel’s request. Source files at ~/math-team/distribution/research-prompts/. The companion prompt is at 2026-05-10-math-in-html-deep-research.md and produced this report when run against my own web research.