The framework is about the ethics of generative AI in education — four nested scales of ethical concern, three threads that cut across them. The content comes from a research collaboration with Marie Heath. I started by sharing two versions of our work-in-progress paper with Claude, and from there we began figuring out how to turn the ideas into something interactive and explorable.
That's been a back-and-forth process — I'd sketch something on paper, Claude would build it, I'd push back on what didn't feel right, we'd try again. Some versions were dead ends. The attempt to go "visually powerful" was an instructive disaster. The thread interaction went through three complete redesigns before it started working. Each version here is a snapshot of what we were thinking at the time, and what we learned by actually looking at it.
v1
The Skeleton
Foundation
Where it all started. I described the framework to Claude — four scales, categories within each, three cross-cutting threads — and asked for something interactive. What came back was clean and functional: expand a category, expand a subcategory, click a thread button to highlight connections. It worked. You could navigate the whole thing. But it felt like a wireframe that never got dressed.
Proved the structure could hold together as an interactive piece. Also proved that "it works" isn't enough when you're trying to get people to engage with something this complex. It needed to feel like something worth spending time with.
Open v1 →
v2
The Overswing
Instructive failure
So I asked for something more visually compelling. What came back was... cinematic. Dark backgrounds, particle effects, a star field, each scale with its own visual world — deep blue orbits for Global, purple grids for Institutional, amber neural webs for Epistemic, green organics for Individual. It looked impressive in screenshots. It was almost unreadable in practice.
A useful overcorrection. When you tell an AI to make something "visually powerful," it reaches for spectacle — because that's what generates praise in most contexts. But atmosphere and readability pull in opposite directions, and for something people need to actually read and think about, readability has to win. Worth keeping here as an honest record of what didn't work.
Open v2 →
v3
The Fix
UX breakthrough
A real interaction problem surfaced: when you clicked a thread button, it highlighted things in the main content — but those highlights were off-screen. You couldn't see the connections, which is the whole point of threads. I flagged this, and we came up with a slide-in overlay panel that shows one thread traced across all four scales in a single view.
The overlay panel turned out to be the most Spiro-influenced piece of the design — criss-crossing the same landscape from a different vantage point without losing your place. This version also made it obvious the piece needed a proper introduction. "Mapping the Invisible" on its own doesn't tell you what you're looking at.
Open v3 →
v4
The Reset
Turning point
I pulled the plug on the dark cinematic look. We went back to light backgrounds, chose real typography (Source Serif 4 for prose, Inter for UI, JetBrains Mono for labels), and picked muted colors for each scale. I asked for a gateway introduction — something with a Veyne epigraph, authorship, a "how to explore" guide, and proper credits. We also killed the audience entry-point buttons that had been there from the start.
This is where the piece started taking itself seriously as a scholarly instrument rather than a tech demo. The key realization: the content is already complex — the design's job is to reduce friction, not add spectacle. Removing audience buttons was a bet that the framework's own structure is the organizing principle. It was.
Open v4 →
v5
The Navigator
Navigation
I wanted navigation visible at all times — Home, the four scales, Coda, Credits — in a left sidebar from the moment you land. Tooltips on every nav item. Thread buttons that fade out when you scroll past the framework. Darker text, larger fonts, viewport-aware highlighting that tracks where you are as you scroll.
The shift from "scroll and discover" to "navigate freely." Earlier versions assumed linear reading. This one respects that you might want to jump straight to Epistemic, or check the credits first, or skip the intro entirely. Giving that freedom is, in its own small way, consistent with what the framework is about.
Open v5 →
v6
The Zoom
Experimental
Two experiments in a fundamentally different direction. Instead of scrolling, the four nested scales fill the viewport as concentric rounded rectangles — the diagram is the experience, not a sidebar to it. The first attempt (v6a) laid out the rings with content alongside. The second (v6b) pushed further: click a ring to zoom in, content slides in from the right, thread lines pierce visually through all four layers with pulsing dots at each intersection. Neither version became the path forward, but we learned something from both before going in a different direction entirely.
Born from staring at the nested rectangles in our own presentation slides and asking: why doesn't the website feel like this? The zoom metaphor — Powers of Ten style — makes the nesting visceral. You physically move between scales instead of scrolling past them. An interesting direction that we may return to.
Open v6a →
Open v6b →
v7
The Three Columns
Current
The thread interaction was still bugging me. In v5, clicking a thread at the Global scale gave you the same information as clicking it at the Individual scale. That defeats the purpose — threads should mean something different depending on where you stand. I sketched a three-column layout on paper: navigation on the left, content in the center, and a dedicated thread column on the right with a vertical spine and floating cards. When you're inside a scale, the thread shows context-sensitive content for that scale; the other scales appear as compact cards you can click to jump across. Criss-crossing, as Spiro would say.
This version finally makes the threads feel like they belong to the framework rather than sitting on top of it. The right column is always there, always available. The compact cards let you navigate between scales through the lens of a single concern — surveillance at the global level connects to surveillance at the individual level, and you can see and move between them. This is the version we're sharing for feedback.
Open v7 →