The studio
The techniques
A starting toolbox, not a rulebook. The first half is how to draw, carried over from the ruv.sgit.ai studio, where seven versions of one story climbed from a plain SVG diagram to a 3D city. The second half is how to tell: the moves that suit an argument made of three problems and one way out.
How to draw
Rung 1 · cheapest
SVG diagram
Shapes, lines and type, crisp at any size and easy to change. The engine draws strokes in (
data-draw) and fades parts in (data-in). Use first, always: the static version of every idea.Rung 2
CSS motion
Transforms and transitions on HTML blocks: cards that arrive, bars that grow (
data-grow), numbers that count (data-count). Most slides in the deck today are this rung.Rung 3
Data-driven drawing
The picture is computed from a JSON file in
SLIDE_RENDER: a timeline placed by date, a bar sized by its number. The slide cannot disagree with its source.Rung 4
Canvas particles
Many small moving things: identities, requests, permissions. Good when the point is scale or flow (82 to 1). Costly to make readable; pair with one large label.
Rung 5
2.5D without a library
Isometric layers drawn with CSS or canvas: the stack of systems an agent moves through, the layers of what stands in the way. Depth without a dependency.
Rung 6 · richest
WebGL
Three dimensions and real camera moves, as in the ruv.sgit.ai vault city. Only when space itself is the message. Any library is copied into the lab folder: the gate refuses scripts from another host, and a talk venue's network is never to be trusted.
How to tell
| Move | What it does | Where it might serve this talk |
|---|---|---|
| The recurring motif | One picture that comes back changed in every act, so the audience always knows where they are. | The three circles: introduced in the opening, each act zooms into one, the collision brings them together (B01). |
| The record | Real events placed on one axis, so a pattern shows that no single story shows. | The eighteen months of incidents (B02); the outages. |
| The one big number | A single figure, large, with what it is and where it is from, and nothing else. | 82 to 1; under 5 per cent used; 48 per cent on spreadsheets. |
| The iceberg | What is used next to what is granted, at true scale. | The unused grant (permissions). |
| The chain | Cause and effect as links, with the break shown where it happens. | Register, appetite, funding, control, pull the plug (spreadsheets). |
| The side by side | Two worlds with the same problem, one that solved it. | Aviation's near-miss reports next to cyber's silence (unreported). |
| The ledger | Rows that fill in, typed honestly, so the gaps are visible. | Reach, mandate, the gap, and what stands in each row (abp). |
| The ladder | Levels unlocked one at a time, each by evidence from the one below. | Earning autonomy (licence). Illustrative, and labelled so. |
| The flip | The same scene shown twice, a single word changed, a different outcome. | The distance between benign and malicious is a prompt (B02). |
What the stage asks of all of them
- The room is dark and the screen is far: big type, few words, high contrast. The slide supports the speaker; it is not read.
- Motion follows the words. Something that moves while Dinis is making a different point steals the room.
- The livestream is compressed: fine lines and small particles turn to noise, so test a version at a low resolution too.
- Everything runs offline from the built site, in the player, on one laptop.