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 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. 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. 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. 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, 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 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.
3. Define takeover, reversal, readiness, timing and cleanup using motion and input. 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 for deterministic scenes, interruption, text/media and actual delivery qualification.
4. Select only the required delivery path: standalone SVG/HTML core; React/accessibility; print; WebGL; or documented beta 3D. 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. 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. 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 shows.
7. Package the selected modules, artifact model/style/assets and reproducible checks using dependencies and update. 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.
• For a film or figure that uses WebGL framebuffers or readPixels, read full-screen pass orientation.
• For what a flash result covers and how to act on it, read motion sequences.
• For any video built from an image, read animate an image: the character in it must move, and camera motion alone never counts. It also covers holding a fixed crop, slow drawn blinks and keeping the beat in the light.
• For a music video, lyric video, anime-style or ambient background, full animation, motion graphics or a visualizer, read video scenarios 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.
• For how a style's motion works and its timing, such as hit-pulse, word-stack or kinetic-cut videos, read video styles.
• For any character, body movement, walk, face, hair or acting, read character animation.
• For terrain, worlds, raymarching, cameras or a figure in 3D, read 3D worlds.
• For individually timed lyric typography with artwork performance, read lyric performance 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.
• For relighting, parallax or echoes added to an animated image, and only when the user approves OpenCV, read still to layers.

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.