Tech-ey explainer diagrams

Full-frame diagrams on white that explain the technical parts of a talk: workflows, pipelines, tool chains, before and after, a chart of one moment. Each one is a small, flat, engineering-style drawing, like a figure in a well-made product doc: uppercase mono labels, thin black outlines, a few isometric cubes, and wires in a handful of bright colours. It builds up piece by piece as the speaker names each piece, then cuts back to them.

gallery/ has twelve examples, each a .webp poster of the finished diagram and a short .mp4 of it building. Look at the ones closest to what the user wants before you build anything.

The look

Canvas. Plain white, full frame, with no texture and no gradient. A small centred mark of five dashes, -----, sits at the top (about 4 % down) on every graphic, so a set reads as one series.

Type. Roboto Mono only, in capitals, letter-spaced wide (about 0.15 em), in near-black #111111.

• The title, centred over the diagram or over the group it names, is medium weight at about 3 % of the frame height (AGENTIC EDITING, ROUGH CUT).
• Labels sit centred under their shape at about 2.2 % of the frame height. Headers over a group (PDF, PIPELINE, TIMELINE) are the same size.
• A note under a label is smaller (about 1.5 %) and coloured: red for a correction or a time (AT EXACT TIMESTAMPS, PLACED 1:46), purple for metadata (TYPE: SOUND EFFECT), amber for a result (SAVED ONCE), grey for something secondary or optional (ASKED 1:50, + MORE TOOLS).
• Words only: no sentences. Text inside a shape is a short tag at most (MP4, MEME, SILENCE).

Lines. Every shape has a thin near-black outline (about 1.5 px at 1080p). Arrows are hairlines with a small solid head. A group of steps sits in a dashed rectangle (short dashes, same weight) with its title above. A loose, optional or "feeds into" link is a dotted line. A flow of different kinds of things is several parallel wires in different colours.