---
title: "Interactive Blog Posts: Why I Built 30 Components Instead of Pasting Screenshots"
description: "Why this blog renders live simulators, draggable easing curves and step-through diagrams instead of static screenshots: the idea behind its 30 MDX components, what they cost to build, and the research — from Bret Victor's explorable explanations to Distill — on why a claim you can drag beats a claim you can only read."
date: 2026-06-09
url: https://valdemird.com/blog/interactive-blog-components/
lang: en
tags: ["interaction-design", "writing", "frontend"]
---

# Interactive Blog Posts: Why I Built 30 Components Instead of Pasting Screenshots

> Why this blog renders live simulators, draggable easing curves and step-through diagrams instead of static screenshots: the idea behind its 30 MDX components, what they cost to build, and the research — from Bret Victor's explorable explanations to Distill — on why a claim you can drag beats a claim you can only read.

This week I went back into a two-month-old post about testing and added a Monte Carlo simulator next to one sentence. One sentence. The post had been live since April, people had read it, and the line I kept thinking about was this one: a 3% flake rate is not a 3% problem.

I believed it when I wrote it. I had watched my own CI turn red on changes that touched nothing. But I could feel how a reader files that sentence: under exaggeration, next to every other blogger rounding up for effect. The math behind it is a one-liner, 0.97^40 ≈ 0.30, and that's exactly the problem. Nobody feels an exponent. You can print the formula in bold, you can graph it, and the reader's eyes slide over it at reading speed, which is the one speed where compounding never looks scary.

So instead of defending the sentence with two more paragraphs, I built it a machine.

That collapse from 97% green to roughly 30% is the exponent, felt. No paragraph I write gets you there, because reading is a spectator activity and the claim only lands when you're the one who made the bar fall. The retry bars then sneak in the second, more uncomfortable point: retries pull the build back to green without making a single test less flaky. The reader discovers that by dragging, before I've said it. An argument you arrive at yourself needs no defending.

This is the entire idea behind the component library on this site. Not decoration. Not "engagement". A specific tool for a specific failure mode: the claim that is true, that matters, and that prose physically cannot carry.

## Twenty years of prior art

None of this is my idea, and pretending otherwise would be silly when the lineage is this easy to trace.

The clearest statement is Bret Victor's [*Explorable Explanations*](https://worrydream.com/ExplorableExplanations/) from 2011: a reactive document, he wrote, lets the reader "play with the author's assumptions and analyses, and see the consequences". His [*Up and Down the Ladder of Abstraction*](https://worrydream.com/LadderOfAbstraction/) is the same argument performed instead of stated — you learn the design of a steering algorithm by scrubbing through every level of it. Fifteen years later both essays still read like a to-do list the web mostly ignored.

Mostly, not entirely. [Distill](https://distill.pub/) spent five years publishing machine-learning research as interactive articles, and its 2020 piece [*Communicating with Interactive Articles*](https://distill.pub/2020/communicating-with-interactive-articles/) is the best survey of why this works that I know of. It walks through the evidence that interaction improves engagement and understanding, connects it to active learning research, and is itself interactive, so the argument demonstrates itself while you read it.

This site currently runs 30 components. The four newest — the flaky-suite simulator above, a step-through git graph, an agent-loop player, a draggable easing-curve editor — took a full working session to build, and that was the cheap part. The expensive part came after: every one of them needs keyboard navigation, reduced-motion behavior, dark mode, a Spanish version of every label including the ones generated client-side, and re-initialization when the site's page transitions swap the DOM out from under them. None of that is visible in a demo GIF, and all of it is the difference between a component and a toy.

And then there's the part I'd skip if this post were marketing. The dot grid in that simulator — the one part whose entire purpose is being seen — shipped invisible. Astro scopes component styles with an attribute selector, the dots are created from a client script, client-created nodes don't carry the attribute, so every dot rendered at height zero. The bars worked, the verdict text worked, the math was right, and the centerpiece was a hole. I only caught it days later when a Playwright screenshot came back with an empty band in the middle of the figure.

That bug earns its place here because it's the strongest argument for the whole approach that I have. I had read that component's code several times and believed it worked. Reading was not enough — for me, the author, on my own code. That is exactly the reader's position on every claim you publish, and it's why "just describe it well" keeps losing to "let them run it".

## The rule that keeps it honest

Thirty components is also how you end up with a blog that looks like a component vendor's demo reel, so there's one rule that decides whether something gets built: a component exists only when a specific post needs it for a claim prose couldn't carry. The git graph exists because the worktrees post tells a story about three branches not colliding, and "not colliding" is a sequence, not a picture. The easing editor exists because a post about game feel was asking readers to take four bezier numbers on faith.

Every component documents that reason on its own page, in a section called "why this exists", in both languages. The whole library runs live at [/lab](/lab/) — same styles, same dark mode, same transitions a post gets, nothing mocked. If a component's "why" paragraph ever reads as "it looked cool", it shouldn't have been built.

The corollary cuts the other way too, and it's the part I have to keep relearning: most claims don't need a component. The majority of every post on this site is still paragraphs, because most sentences are doing fine on their own. The simulator above exists for the one sentence per post that readers file under exaggeration. Spending a working session on that sentence only makes sense if you actually want to be believed — which is, I suspect, the real filter, and a less comfortable one than build cost.

I know which side of it I'm on. The dots were invisible for three days, and reading my own code had me convinced they weren't. You're in that exact position with this post right now. Scroll back up and drag the slider.