Reader · design mock-ups

A stage beside the explanation

The Explain page keeps each section's figure in the margin beside its paragraph. In the few sections where motion says more than a still, a stage appears at the top of the margin, stays put while you scroll that section, steps with the paragraph you are reading, and leaves when the section ends.

These are frames of a working mock-up in the reader's own colours and type, on a distillation paper as the example. The feature isn't built yet; the design note is in the reader's repository under docs/explain-stage.md.

▶ Scroll the mock-up itself · the stage follows your reading; press Animate on section 02

Section 01 of the explanation: the outline on the left, the prose, and in the margin a figure drawn by Claude beside its paragraph; no stage
1

Figures first

Every section keeps its figure in the margin, as today. Only some sections get a scene: the ones Claude marks as worth animating, a mechanism or a loss rather than a table or a timeline, and the ones the reader asks for.

Section 02: its figure in the margin with a row under it reading Animate this figure, and Claude's one-line reason
2

Claude suggests one

A figure Claude thinks worth animating carries Animate this figure with a one-line reason. The section head has the same button and the outline marks the section with a hollow play. Any other figure can be asked for in the Ask bar; Claude just does not offer.

The stage has appeared at the top of the margin with an amber drawing indicator; the network's edges are streaming in
3

Drawing

Pressing it is a section-scoped edit like any other: Claude writes a small declarative motion block, the scene streams in node by node, and the block is saved into the page.

The scene plays: packets flow through a small fully connected network; the outline mark is filled and the section head reads On the stage
4

Drawn

The scene plays, bound to the paragraphs: the paragraph crossing the reading line picks the step, and reading backwards steps backwards. Dots and a slider step by hand; Pin holds a scene while you read on.

Section 03: no stage, only the section's figure beside its paragraph
5

A stage per section, not per page

In the next section the stage is gone and the margin is exactly what it is now.

Section 04: the stage with the temperature scene, a slider at T = 4, and below it a still of the softmax at three temperatures coming out from under the stage
6

Stills and motion, both

In a section with a scene, its other margin items sit beside their paragraphs beneath the stage and come out from under it as you read on. The still shows all three temperatures at once; the scene shows one at a time.

Section 05: the stage's tab row reads Scene, Still, Cell, Paper; the scene shows the teacher's and student's softened outputs joined by a T²·KL link
7

The tab row is the filmstrip

Only what the section has: the scene, its still, the cell, and the paper's own figure when Claude cites one, snipped from the PDF. Three pictures of one idea, from the most trusted to the most explanatory.

Section 06 on the Still tab: the layer-matching drawing at rest, with all three teacher-to-student links and the total loss
8

One drawing, two states

The figure and the scene are the same drawing. The margin's still is the scene on its last step, the Still tab is the resting frame, and Keep and the notes always get the still.

Section 07: a static loss-curve figure with a chip reading curves from In [3], ran on T4, and the cell under it
9

Bound to a cell when it should be

A figure or scene can name a cell. Until it runs, the illustrative values Claude wrote; after, the real ones, and which machine ran them. Drawing stays on the page; computing stays in Colab.

The stage's menu: Open large, Save as video, Save as GIF, Keep this frame as a still, Animate every section, Copy the motion block
10

Video is an export

Nothing is generated as a video file. The menu renders the scene to WebM or GIF in the browser and keeps a frame as a still.

The loss scene in the dark theme, on its backward step: the teacher greyed out, the gradient path down the student
11

Dark

Scenes colour themselves with the same few classes the page themes for Claude's figures, so they follow light and dark like everything else.

On a phone: the stage fixed to the top of the screen while its section is read, the prose scrolling under it
12

Phone

The stage is pinned to the top of the screen only while its section is read.

Open questions