Night Diagram

A science diagram at night: one big glowing subject in a deep blue field, and around it the instruments of someone measuring it.

Essence, and what it is not

• The picture is a diagram that happens to be beautiful. Every frame explains one thing and could be paused and understood.
• Light is the event. The field stays dark so that whatever is happening (a stroke, a signal, a reaction) is the brightest thing on screen and lights what stands near it.
• Instruments are thin and quiet: hairline pins, a fine ruler, one dark glass card. Each measures or names something real.
• Scale is how it impresses: a small event in a lens, the big body it happens in, the planet that body is on.

Not Stage Light (a dark stage, one spot and big figures: there is no picture to explain there). Not Depth Stage (painted layers and racked focus for history and places). Not Drafting Table (white ruled line art on a blue sheet; here bodies are solid and lit). Not a sci-fi HUD: no scan lines, hex grids or rings that measure nothing.

Ground and material

Sky is the field: near black at the top, a lighter blue at the horizon, fine stars, a dark land line or none. Bodies are flat soft rounds (Mass), darker low and lit on top, with no outline or texture. Glow is built by blur on real light only: a white core inside two blooms of colour (Arc), and a pool on the field where a light stands (Sky glow, light). Nothing that is not a light glows.

Colour roles

• bg, panel, panel2: the field, darkest to lightest. Bodies are mixes of them.
• grad (ember) and data (ice) are the two sides of whatever opposes: positive and negative, hot and cold, up and down. A scene that has no opposition uses one. A spectrum is the one gradient between them: ember at the red end, ice at the violet end (Refraction).
• text: names and figures. muted: notes and numerals. border: the card's edge.
• White belongs to the brightest light. Never fill a large area in ember or ice, and never add a third accent.

Type and captions

Hanken Grotesk, with Noto Sans SC for Chinese; JetBrains Mono for every instrument numeral and source. Question heading 64–76 px at 800; pin names 40 px at 700 with notes at 28 px; a reading's figure 104 px at 800; ruler numerals 26 px; a source 28 px. Nothing under 26 px. The caption is white on dark glass, the same material as the reading card.

Motion

• A body swells from its base (grow) and keeps breathing (drift): the picture is never frozen.
• Particles take their own paths and keep stirring on arrival (Motes).
• Instruments draw themselves on the word: a pin's line, then its words.
• Light is the only thing that moves fast. A strike runs in under 0.2 s, spikes, flickers once, then decays over more than a second, and everything near it dims with it.
• A camera move is one unbroken change of scale (Dive), eased, with words and readings left outside it. Figures roll up to their true value.

Composition and framing

The subject fills the middle two thirds. The question sits top left; pins run out to clear space; the reading sits low beside what it measures; the ruler stands just outside the subject. Keep the land line above y 880: the band below it holds the captions. Change the frame by changing scale, not by cutting to a new layout.

Sound

Light gets the only loud sounds: a crack, a late rumble. Music is sparse and drops out before the big event.

Components

• data — Moving motes (react/parts/motes.tsx): Small marks that travel between regions, each on its own path and time, so a process can be watched happening. Fits: charge separating, ions crossing, gas spreading; flashes all over a region
• data — Reading card (react/parts/reading.tsx): A dark glass card with one measured number: what it is, the figure rolling up, a comparison, and its source. Fits: the one number a scene is about; one on screen at a time
• ground — Night sky (react/parts/sky.tsx): A deep blue field, lighter at the horizon, with fine stars and a dark land line; a light in the scene pools on it. Fits: every scene
• mark — Light path (react/parts/arc.tsx): A line of real light, a white core in two blooms of colour, that runs along a path on the word and can fork. Fits: a stroke of lightning, a nerve signal, a current
• mark — Bent light (react/parts/refraction.tsx): A beam of real light traced through glass by Snell's law: it bends where it enters and leaves, and white light fans out from ember red to ice violet. Fits: a prism splitting white light, a lens bringing rays to a focus, a rainbow's drop, why a straw looks broken in water: light through glass, computed, not drawn
• mark — Pressure rings (react/parts/pulse.tsx): Thin rings that leave a point one after another and thin out as they spread, cut at the ground if there is one. Fits: something spreading at a speed: thunder, a heartbeat, a signal
• mark — Instrument ruler (react/parts/ruler.tsx): A thin vertical scale with real units beside the subject, with a level line that can cross the picture. Fits: height, depth, time, temperature: any picture whose size is the point
• open — Glowing mass (react/parts/mass.tsx): A big body of soft overlapping rounds, lit on top, that swells from its base and can light from within. Fits: a storm cloud, a nebula, a lung: the large subject whose inside the film explains
• term — Magnifying lens (react/parts/lens.tsx): A round window tied to one spot in the picture, showing the small process that explains the large one. Fits: the invisible step inside a big picture: a collision, a cell, a wingtip
• term — Pin label (react/parts/pin.tsx): A dot on the thing named, a hairline with one elbow out to clear space, the name on the rule and a note under it. Fits: naming a part on the word it is said
• title — Question heading (react/parts/heading.tsx): The scene's question in heavy white, top left and out of the picture's way, with one quiet line below it. Fits: stating what the scene answers
• transition — Scale dive (react/parts/dive.tsx): One camera over a scene: an unbroken push in or pull back, so the change of scale is itself the explanation. Fits: from a thing to what it is part of, or into what it is made of

Native moves

• The lens opens. A window ties to one spot in the big picture and shows the small event inside it. Fits content like: a collision between ice and hail; one cell dividing; a wingtip's vortex.
• Watch it separate. Two kinds of motes leave one region for two others, and pins name them as they arrive. Fits content like: charge in a cloud; ions in a battery; oil and water.
• The strike. After a slow build, one path of light runs in a blink, lights everything near it, flickers, and decays while a reading rolls up. Fits content like: lightning; a nerve firing; a star igniting.
• The ring goes out. Rings leave a source at a steady speed, and a reading says how fast. Fits content like: thunder; an earthquake's wave; a radio signal.
• Pull back to the planet. One move from the event to the world it happens on, and the event repeats all over it. Fits content like: how often lightning strikes; how many heartbeats a day; every volcano now erupting.
• Through the glass. White light meets a prism, bends in and out, and leaves as a fan from ember to ice; pins name the two ends where they land on a card. Fits content like: why a prism makes a spectrum; how a lens focuses; why a rainbow has its order.
• Mark the level. A dashed line crosses the whole picture at a value on the ruler, and what is above and below it changes meaning. Fits content like: freezing height; sea level; a safe dose.

Avoid: pitfalls

• A frame with nothing measured is a wallpaper. Fix: every scene gets a ruler, a pin, a lens or a reading.
• Everything glowing means nothing is lit. Fix: glow only the light in the sentence.
• A pin across its own words strikes them through. Fix: the name sits on the rule, the note under it.
• Two number cards compete. Fix: one reading.
• A figure with no source reads as invented. Fix: source on every reading, and "illustrative" where the picture is not to scale.
• A big zoom shows how plain a round is. Fix: push in less than 1.5, or open a lens with new detail.

Freedom in each work

Each film decides its big subject, which side is ember and which ice, what its lens shows and which number earns the reading. Far-apart structures: one event from its smallest cause to its largest effect; one body seen at three scales; a slow build to a single strike and what follows it.