Lab Notebook

A page of a squared notebook where an explanation is worked out by hand: the diagram is drawn stroke by stroke as the narration describes it, labelled as each part is named, and the result is boxed in red. It feels like watching someone who understands the thing think it through on paper.

Essence, and what it is not

• One notebook page, squared, with a red margin rule and punched holes. Everything is drawn or written on it.
• Every line is drawn on the word that describes it, in the order a person would draw it: the vessel before the liquid, the atom before its bonds.
• Three pens with fixed meanings: ink draws and writes, red marks the one result, pencil is working and asides.
• Paper things are stuck on, never typeset: an index tab for what to come back to, a figure label under a framed drawing.

Not a whiteboard (no marker, no erasing: a notebook keeps its working), not a blueprint (no ruler-perfect lines, no title block), not a textbook diagram (nothing appears finished; the drawing is the explanation happening).

Ground and material

sheet.tsx draws the ground: warm paper (panel) ruled in pale blue squares of 40 px (faint), a double red margin rule (border) at x 220, punched holes on the left, the heading written by hand at the top, the sheet lying on a grey desk (bg) and ending above the caption band. SHEET gives the writing area (x 260 to 1800). Ink has a feathered edge (a lighter hair beside each stroke); pencil is plain and thinner. A drawn shape may get a pale wash of colour once its outline closes.

Colour roles

• text: the ink. Every drawn line and handwritten word unless it is the result or working.
• grad: the red pen. The one result of a scene (a boxed value, an exclamation), never more than one red thing at a time.
• muted: pencil. Construction lines, angles, figure labels, the date.
• faint, border: the paper's grid and margin. Never drawn with.
• warn, good, data, op: tab papers and the pale wash inside a drawn shape (data), nothing else.

Type and captions

Shantell Sans (display) is the hand: labels 40 to 60 px, the heading 46 px, working 40 to 52 px at weight 500 to 600. Atkinson Hyperlegible Next (sans) only where the page needs print: the caption and dense small text. Chinese: LXGW WenKai writes, Noto Sans SC prints. The caption is a paper slip with a short red stroke above its text, in the print face, 34 px.

Motion

Drawing is the motion. A line or outline draws over 0.6 to 1.5 s with an ease in and out (the hand slows at corners); writing is linear, about 0.15 s a word, left to right; a label's underline follows its words. Tabs are stuck on in one beat (no slide). Nothing that is drawn moves afterwards, and the page does not move: a new idea is drawn further along the page, or on a new scene's page.

Composition and framing

The page fills the frame and stays. A scene's main drawing takes the left two thirds of the writing area at a size that fills it; labels sit beside what they name, close enough to need no leader, or with a short arrow; working and results sit to the right. A new scene may start a clean page. Leave room for the result: the boxed value is the last thing written and needs space beside or under the drawing.

Sound

Optional: a soft nib scratch while a long line draws, very low. No music is part of the motion.

Components

• ground — Notebook sheet (react/parts/sheet.tsx): A page of squared paper with a red margin rule and punched holes, the topic written at the top by hand. Fits: every scene; a new question is a new heading on the same page, or the page turned
• link — Curved arrow (react/parts/arrow.tsx): A hand-drawn arrow that bends from one place on the page to another, its head added when the line arrives. Fits: this leads to that; a cause and its effect; from a drawing to the formula it explains
• steps — Working (react/parts/formula.tsx): Lines of working written one after another by hand, the last one boxed in red as the result. Fits: a short derivation; a definition then a value; a comparison reduced to one inequality
• steps — Ink line (react/parts/ink.tsx): Any line, shape or diagram as SVG path data, drawn with the pen as the narration describes it. Fits: a vessel, a molecule, a circuit, a graph's curve: whatever the explanation draws
• term — Hand label (react/parts/label.tsx): A word or a short phrase written by hand on the word that names it, underlined when it matters. Fits: naming a part of the drawing; a term the narration introduces; a quantity next to what it measures
• title — Figure frame (react/parts/frame.tsx): A pencil box drawn round a drawing, with its figure label written underneath. Fits: setting one drawing apart as the thing to look at; naming a view (from above, in section, magnified)
• transition — Index tab (react/parts/tab.tsx): A coloured paper tab stuck to the page with a strip of tape, marking a place to come back to. Fits: the question a section answers; a result to remember; a page that changes topic

Native moves

• Draw it as you say it. An outline draws itself on the noun; its parts on theirs. Fits content like: a cell and its membrane; a circuit's loop; a gear train.
• Label on the word. A name is written next to its part the moment it is said, underlined if it is the key term. Fits content like: parts of an engine; the layers of the atmosphere; the axes of a graph.
• Work it out. Lines of working written one by one, the last boxed in red. Fits content like: a density; a speed from distance and time; a probability from counts.
• Frame the figure. A pencil box closes around a finished drawing and its figure label is written beneath. Fits content like: a view from above; a cross-section; a magnified detail.
• Tab the question. A paper tab is stuck at the page edge with the scene's question or answer. Fits content like: the gap a theory fills; the step that changes everything; the thing to remember.

Avoid: pitfalls

• A diagram drawn all at once: it is a picture, not a notebook. Fix: tween the drawing over the words that describe it.
• Lines too thin to read at 1920 × 1080: Fix: ink 4 to 6 px, pencil 3 px.
• Red for decoration: the result stops standing out. Fix: one red thing per scene.
• Handwriting for long sentences: Fix: keep written text to labels and short working; the narration carries the sentences.
• A label far from its part: Fix: write it beside, or draw a short arrow.

Freedom in each work

Each film decides its story, scenes, drawings, which pens, how many pages, tabs and the ending. Three far-apart structures: one drawing built up across the film until the result is boxed; a comparison of two drawings on facing halves of the page; a sequence of steps, each a small numbered drawing down the page.