technical-illustration git:20261101.1a94892A

Immutable. This exact content never changes and is served at /api/v1/blob/112f69cd897c37de.

---
name: technical-illustration
description: "Create or repair deterministic code-driven motion scenes, motion films, music-led artwork or lyric videos and model-driven technical illustrations, with accessible interaction and inspected SVG, React, print or conditional WebGL/beta3D outputs."
---

# Model-driven technical illustrations

Use for an explanatory interactive figure, code-driven timed prototype, motion
film or music-led artwork/lyric video whose model controls what is drawn, moved,
read and exported. This owner constructs motion from an explicit sampled model.
Choose a physical metaphor only when it clarifies the idea; disclose where the
analogy stops.

## Check the route

Send these to their owners:

- Ordinary app layout: UI design.
- Social posters: social-preview.
- Simple flow diagrams: existing explanation methods.
- Data-driven scientific plots: the project's plotting library.
- Ordinary editing of existing video footage: the project media tools. This owner
  does not act as a general video editor.

Apply these contracts when the request matches:

- Requested illustrated statecharts: follow architect's
  [art contract](../architect/references/illustrated-statecharts.md). Draw from the
  actual chart or trace records; architect retains state, guard, projection and
  verification ownership. Keep exact numbered paths and the plain/text fallback.
- Arbitrary code-authored layered compositions, sampled tracks, rational clocks,
  vector/audio/media adapters or conditional 3D/simulation/effects: use the
  [code-driven motion contract](../orbyn-ui-design/examples/spatial-review/motion/README.md).
  Use the existing UI owner for live takeover and the existing review writer for
  source-bound settings and decisions; no new authoring app or provider is required.

## Set the boundary

Resolve the target, its instructions, artifact/output owner and allowed effects.
Shared methods stay in the outer library. Authorized drawing modules may be
packaged into the actual artifact; never install shared instructions into targets.
No browser bypass, publisher, auth edit, history capture or model call is implied.

## Build one coherent artifact

1. State the explanation, audience, inputs, meaningful states and smallest useful
   output. Use [craft and model](references/craft-and-model.md) to define a pure
   model and labelled limits. Do not invent measured product behavior.
2. Make geometry, phase, caption, numeric readout and accessible description consume
   the same sampled state. Establish projection, actual drawn shape records,
   clipping, depth and attachments using [geometry and lines](references/geometry-and-lines.md).
3. Define takeover, reversal, readiness, timing and cleanup using
   [motion and input](references/motion-and-input.md). Keep usable controls and
   meaningful updates with reduced motion and without advanced rendering. For
   timed UI, explainers/data, 3D choreography or kinetic films, use
   [motion sequences](references/motion-sequences.md) for deterministic scenes,
   interruption, text/media and actual delivery qualification.
4. Select only the required delivery path: standalone SVG/HTML core;
   [React/accessibility](references/react-and-accessibility.md);
   [print](references/print.md); [WebGL](references/webgl.md); or documented
   [beta 3D](references/3d.md). Advanced paths are conditional, not defaults.
5. Run independent bad and legitimate controls; drive actual interaction and inspect
   the resulting images using [capture and drive](references/capture-and-drive.md).
   Fix the model/source before recapturing. A saved image or green banner is not
   proof of geometry, accessibility, complete input coverage or a real GPU path.
6. For MP4 delivery, use the original [motion-film exporter](../orbyn-ui-design/examples/spatial-review/motion-films.md).
   Author a validated scene/beat specification and run the existing-tool pipeline;
   inspect actual probe/decode/playback receipts and unsupported parity cells.
   Run `python3 scripts/flash-check.py film.mp4` on the finished file; exit 1 means
   more than three flashes in a second, so fix the source and render again. When it
   carries words or a logo, also run `scripts/legibility-check.py` on a plate.
   For audio-reactive frames, beat-grid or section checks and supplied lyrics, use
   [music timing](references/music-timing.md).
7. Package the selected modules, artifact model/style/assets and reproducible checks
   using [dependencies and update](references/dependencies-and-update.md). Preserve
   notices and original/adapted hashes. Deliver artifact, evidence and actual limits.

## Read when needed

- For a full-length song, or any film over 120 seconds or 3,600 frames, read
  [long-form streaming](../orbyn-ui-design/examples/spatial-review/motion-films.md#stream-a-full-length-film).
- For a film or figure that uses WebGL framebuffers or `readPixels`, read
  [full-screen pass orientation](references/fullscreen-pass-orientation.md).
- For what a flash result covers and how to act on it, read
  [motion sequences](references/motion-sequences.md#check-flashing-on-the-rendered-file).

- For a music video, lyric video, anime-style or ambient background, full animation,
  motion graphics or a visualizer, read [video scenarios](references/video-scenarios.md)
  first; it sets what each kind needs and how it fails.
- For individually timed lyric typography with artwork performance, read
  [lyric performance](references/lyric-performance.md) for the representative preview,
  local puppeting limits, blink integrity and rendered type checks.
- For any logo, brand mark, intro, outro or end card, read
  [logo and branding](references/logo-and-branding.md).
- For one supplied image that must drive relighting, parallax, figure echoes or
  effects behind a subject, read [still to layers](references/still-to-layers.md).

## Bundled support and evidence limits

- The MIT support under `references/upstream/anatomy/` is a pinned maintained
  adaptation, not an upstream installation or active skill. The source record and
  snapshot describe exact scope. Read actual APIs before authoring a new model.
- Browser, React peers, PDF tools, OpenCV and GPU are conditional prerequisites; unavailable
  surfaces remain blocked. Core SVG does not qualify React, print, WebGL or beta 3D.
- The source's full configured audits are finite sampled checks, not continuous
  physical proof. Keep supported runtime/platform evidence separate from written
  methods and model behavior.
- Existing TDD, UI, performance and publication policies remain the owners of their
  general contracts.