# The studio's techniques > The visual techniques from ruv.sgit.ai and the storytelling moves that suit The ultimate insider, with when to use each and what it costs on a projector. *Source: · site v0.1.34 · generated from the same content as the page, so the two cannot drift.* --- 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. --- *[Site index for agents](../llms.txt) · [HTML version](https://the-ultimate-insider.presentation.sgit.ai/studio/techniques.html)*