git:20261102.4d850f3 to git:20261106.5d75934

---

name: technical-illustration

description: "Create or repair deterministic code-only motion films, music and lyric videos, character animation, 3D worlds 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.

## Build only from code

Every picture and movement comes from code written in the project: no generators, hosted

models, 3D or animation libraries, stock or downloaded assets, rigs, motion capture or

creative tools. Music videos use no album artwork unless the user asks for it, and an image that is

used must have its character animated, not just a moving camera. Treat a

missing asset as code to write. Read the [code-only rule](references/code-only.md) before

starting a video, and only the user can lift it for a named item.

## Check the route

Send these to their owners:

- Ordinary app layout: UI design.

- Social posters: social-preview.

- Faux product UI, feature cards and cursor demos: product-illustration.

- Architecture and stack diagrams: [stack-diagram](../stack-diagram/SKILL.md). Other

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.

Its Lottie input, Three.js profile and packaged adapters fall under the

[code-only rule](references/code-only.md), so use them only when the user approves them.

## 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/check-code-only.py <source>` before rendering, then

`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, onsets and supplied lyrics, start with

`python3 scripts/audio-bake.py` as [music timing](references/music-timing.md) shows.

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 any video built from an image, read [animate an image](references/animate-an-image.md):

- 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.

- To measure a reference's motion and prove a build matches it, use

[motion-match](../motion-match/SKILL.md).

- For how a style's motion works and its timing, such as hit-pulse, word-stack or

kinetic-cut videos, read [video styles](references/video-styles.md).

- For any character, body movement, walk, face, hair or acting, read

[character animation](references/character-animation.md).

- For terrain, worlds, raymarching, cameras or a figure in 3D, read

[3D worlds](references/3d-worlds.md).

- 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 relighting, parallax or echoes added to an animated image, and only when the user

approves OpenCV, 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 and GPU are conditional prerequisites, and OpenCV is one

only when the user approves it; 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.