presentation-html/references/industry-catalog.md

# Choose an explanatory mechanism, then an industry

**0.7.0 extension:** [Presentation patterns](registry-animejs-presentation-patterns.md) adds four presentation-derived recipes: expressive robot, approval gate, delivery cycle and connected memory. Current [overall gallery](../dist/animejs-gallery-0.7.0/index.html): 33 individual examples, 15 registry galleries and one index (49 pages). The builder now also requires these four IDs; the 0.6.0 inventory below is retained as release history.

The 0.6.0 release adds 24 original conceptual examples across 12 industries to the five element/composition recipes. **Twelve industries is this release's coverage, not a permanent ceiling.** Adapt or extend the catalog when another explanatory problem needs a genuinely different model; do not repaint one generic flowchart and call it industry coverage.

## Progressive discovery

1. State the audience's question: what changes, what stays identifiable, which dependency constrains the outcome, and what exception must be explained?
2. Choose a mechanism below. Read only the matching registry, then its two descriptors and selected renderer—not every module or reference.
3. Open [the overall gallery](../dist/animejs-gallery-0.6.0/index.html), choose a registry, then open an individual page. Its Use when / Avoid / Assumptions are part of the recipe contract. The compact iframe previews retain Play, Replay and Settle, so the galleries themselves demonstrate motion. Individual pages add range seeking, named beats and adaptation guidance.
4. Seek the named phases, replay the sequence, inspect intermediate geometry and read the renderer before adapting. Values are illustrative; none of these animations proves compliance, clinical safety, throughput, load capacity or engineering correctness.

| Explanatory problem / mechanism | Read on demand |
| --- | --- |
| Reveal connection, follow route, propagate spatial activation | [Elements](registry-animejs-elements.md): drawable paths, motion paths, spatial stagger |
| Explain dependency; keep part identity during separation and reassembly | [Compositions](registry-animejs-compositions.md): timeline labels, transforms, explicit hold tweens |
| Separate a stream; isolate an upset or reroute around a leak | [Oil and gas](registry-animejs-oil-gas.md) |
| Track genealogy, quality holds and temperature excursions | [Pharma](registry-animejs-pharma.md) |
| Explain parallel review, exception loops and allocation gates | [Government](registry-animejs-government.md) |
| Reserve scarce stock; inspect and route returns | [Retail](registry-animejs-retail.md) |
| Coordinate sorting/connection recovery or berth/crane/yard resources | [Logistics](registry-animejs-logistics.md) |
| Reveal a takt bottleneck, buffer, fault isolation and rework | [Manufacturing](registry-animejs-manufacturing.md) |
| Balance supply/storage; isolate a feeder and restore service | [Energy](registry-animejs-energy.md) |
| Explain non-clinical care handoffs and laboratory sample custody | [Healthcare](registry-animejs-healthcare.md) |
| Separate authorization/settlement/reconciliation or evidence/review/payment | [Finance](registry-animejs-finance.md) |
| Explain congestion rerouting or continuity through cell handover | [Telecom](registry-animejs-telecom.md) |
| Sequence irrigation zones; grade, store and distribute harvest | [Agriculture](registry-animejs-agriculture.md) |
| Show conceptual load paths/inspection closure or dependency resequencing | [Infrastructure](registry-animejs-infrastructure.md) |

Industry registries document their specific Anime.js techniques. Prefer explicit property interpolation and finite timelines for state transitions, drawable paths for revealing connectivity, grouped transforms for moving identifiable physical objects, motion paths for travel, and stagger only when spatial/temporal ordering is meaningful. Not every example should use every technique.

## Data and renderer contract

- `assets/animejs/examples.js` keeps the five legacy configurations as a JSON-compatible array. Do not change its parameter meaning when extending the industry library.
- `assets/animejs/catalogs/<group>.json` is a nonempty array of descriptors (two per industry in this release): `{id, group, groupTitle, title, description, useWhen, avoid, assumptions, config, beats}`. IDs are globally unique `<group>-<scenario>` slugs. Each beat is `{at, label}`, in milliseconds, within the actual default timeline duration. The descriptor is the single source for page titles, group titles, guidance and navigation.
- `assets/animejs/industries/<group>.js` is a plain IIFE. It registers `window.industryRenderers[id] = function(svg, config, kit) { ...; return timeline; }`. `kit` contains `{anime, el}`; `el(tag, attrs={}, text='', parent=svg)` creates editable SVG via `textContent` and returns the appended node.
- Industry SVG uses `0 0 960 540`; legacy recipes retain `0 0 400 220`. Use explicit local geometry, meaningful labels, legend/limitations, and 4–6 narrative phases, normally around six illustrative seconds. Keep text at least 16 viewBox units and important explanations visible in the final state.
- Return `anime.createTimeline({autoplay:false, defaults:{ease:'linear'}})` with finite positive duration. Use explicit from/to values and constant tweens for holds. No callback-driven visual mutations, infinite loops, randomness, renderer-owned listeners, fetch, imports or remote assets.
- The host owns Play / Replay / Settle / range seek / named beats, live reduced-motion settlement, print/page departure, listener teardown and remount. Read the [shared lifecycle contract](registry-animejs-elements.md#lifecycle-and-accessibility-contract). Slides must still wire their own departure and teardown to the controller.
- Parameter changes require retesting beat targets, duration, deterministic seeks, label/geometry bounds and real playback. This is authored trusted data, not a general untrusted-configuration sandbox.

## Generated hierarchy and extension

Run `python3 scripts/build-gallery.py`. The self-contained Python-stdlib builder validates vendor hashes, reads descriptors, generates `catalog-data.js`, all source wrappers, and the offline `dist/animejs-gallery-0.6.0/` hierarchy. Do not hand-edit generated metadata or HTML. It inlines the selected sector module only in each individual document; gallery pages instantiate no renderer. Both overall and group galleries embed and link to exactly the same `examples/<id>.html` document. There is no runtime fetch or ESM dependency; open from `file://`.

For 0.6.0 the release gate expects the 12 named industry groups, plus elements and compositions: 29 individual documents, 14 group galleries and one overall index, totaling 44 HTML pages. New catalog filenames beyond these sectors are discovered automatically; add a matching module and registry, update the discovery table, and keep the dynamically derived verification inventory aligned. The current required IDs form a minimum release baseline, not a maximum size. Existing registries may grow beyond two recipes; new groups may contain any nonempty descriptor list. Tests derive counts from metadata and require the baseline IDs without imposing an upper cap.

Missing required sectors fail the default build and test. While collaborating, `python3 scripts/build-gallery.py --allow-partial` followed by `node scripts/test-gallery.mjs --allow-partial` explicitly permits partial development evidence, with missing groups and `completeCatalog:false` in the report. **Partial mode is not release acceptance.** Rebuild without that flag before publication. Previous dist packages remain untouched.

## CSS integration pitfall

Global `svg text { font-size: ...; fill: ... }` rules (including `font` shorthand) override SVG presentation attributes and can silently destroy authored label hierarchy, fitting and domain colors. Put default typography/color on the SVG root and inherit it; allow per-label and per-group SVG attributes to remain effective. Verify computed styles for explicitly sized/colored labels and inspect actual final/intermediate screenshots—not just node bounds.

## Verification and evidence

`CHROMIUM_EXECUTABLE=/actual/existing/chrome node scripts/test-gallery.mjs` uses the installed Playwright dependency; do not silently download a browser. It checks authored/generated metadata identity, registry IDs/links, every source/built gallery, exact iframe/link identity, guidance, viewBox, named beats, normal/reduced motion, multiple deterministic backward/forward seeks including phase midpoints and holds, visible bounds at sampled states, keyboard controls, cleanup/remount, and errors/network attempts.

Every normal-motion recipe gets 120 ms of actual speed-1 playback before natural completion at **engine speed 12**; this accelerated completion is explicitly labeled in the report, not claimed as full real-time playback. The first legacy and first industry example additionally complete at speed 1 in the built variant. Representative screenshots (overview, assembly and first industry, final/intermediate) keep repository evidence compact. The JSON report binds verification to every built HTML hash and reports partial/failing status honestly. Visually review representative screenshots and sector-author intermediate/final evidence; automated bounds do not prove semantic accuracy, absence of overlaps, readability on every device, screen-reader acceptance or cross-browser compatibility.