From 5b07a9a3e554a88bceff4803f3070c34885e54a4 Mon Sep 17 00:00:00 2001 From: jarvis-at-skic Date: Wed, 28 Oct 2026 20:39:48 +0000 Subject: [PATCH] [verified] feat: add reusable presentation-derived animation patterns --- README.md | 12 +- SKILL.md | 7 +- assets/animejs/agriculture/index.html | 2 +- assets/animejs/catalog-data.js | 163 ++ .../catalogs/presentation-patterns.json | 161 ++ assets/animejs/compositions/index.html | 2 +- assets/animejs/elements/index.html | 2 +- assets/animejs/energy/index.html | 2 +- .../examples/agriculture-harvest-grading.html | 2 +- .../agriculture-irrigation-zones.html | 2 +- assets/animejs/examples/assemble-explode.html | 2 +- assets/animejs/examples/dependency-flow.html | 2 +- .../examples/energy-feeder-restoration.html | 2 +- .../examples/energy-microgrid-storage.html | 2 +- .../examples/finance-insurance-evidence.html | 2 +- .../finance-payment-reconciliation.html | 2 +- .../examples/government-budget-execution.html | 2 +- .../government-permit-review-loop.html | 2 +- .../examples/healthcare-care-handoffs.html | 2 +- .../examples/healthcare-sample-rejection.html | 2 +- .../infrastructure-bridge-inspection.html | 2 +- ...nfrastructure-construction-resequence.html | 2 +- .../logistics-hub-connection-recovery.html | 2 +- .../examples/logistics-port-crane-yard.html | 2 +- .../examples/manufacturing-fault-rework.html | 2 +- .../examples/manufacturing-takt-buffer.html | 2 +- assets/animejs/examples/motion-path.html | 2 +- .../examples/oil-gas-pipeline-reroute.html | 2 +- .../examples/oil-gas-separator-upset.html | 2 +- .../examples/pharma-batch-genealogy.html | 2 +- .../pharma-cold-chain-quarantine.html | 2 +- .../presentation-patterns-approval-gate.html | 14 + ...resentation-patterns-connected-memory.html | 14 + .../presentation-patterns-delivery-cycle.html | 14 + ...resentation-patterns-expressive-robot.html | 14 + .../retail-inventory-reservation.html | 2 +- .../examples/retail-return-disposition.html | 2 +- assets/animejs/examples/spatial-stagger.html | 2 +- assets/animejs/examples/svg-draw.html | 2 +- .../examples/telecom-cell-handover.html | 2 +- .../examples/telecom-congestion-reroute.html | 2 +- assets/animejs/finance/index.html | 2 +- assets/animejs/gallery.js | 4 +- assets/animejs/government/index.html | 2 +- assets/animejs/healthcare/index.html | 2 +- assets/animejs/index.html | 2 +- .../industries/presentation-patterns.js | 138 ++ assets/animejs/infrastructure/index.html | 2 +- assets/animejs/logistics/index.html | 2 +- assets/animejs/manufacturing/index.html | 2 +- assets/animejs/oil-gas/index.html | 2 +- assets/animejs/pharma/index.html | 2 +- .../animejs/presentation-patterns/index.html | 14 + assets/animejs/retail/index.html | 2 +- assets/animejs/telecom/index.html | 2 +- .../agriculture/index.html | 1369 +++++++++++++++ .../compositions/index.html | 1369 +++++++++++++++ .../animejs-gallery-0.7.0/elements/index.html | 1369 +++++++++++++++ dist/animejs-gallery-0.7.0/energy/index.html | 1369 +++++++++++++++ .../examples/agriculture-harvest-grading.html | 1460 ++++++++++++++++ .../agriculture-irrigation-zones.html | 1460 ++++++++++++++++ .../examples/assemble-explode.html | 1376 +++++++++++++++ .../examples/dependency-flow.html | 1376 +++++++++++++++ .../examples/energy-feeder-restoration.html | 1461 ++++++++++++++++ .../examples/energy-microgrid-storage.html | 1461 ++++++++++++++++ .../examples/finance-insurance-evidence.html | 1476 ++++++++++++++++ .../finance-payment-reconciliation.html | 1476 ++++++++++++++++ .../examples/government-budget-execution.html | 1442 ++++++++++++++++ .../government-permit-review-loop.html | 1442 ++++++++++++++++ .../examples/healthcare-care-handoffs.html | 1456 ++++++++++++++++ .../examples/healthcare-sample-rejection.html | 1456 ++++++++++++++++ .../infrastructure-bridge-inspection.html | 1459 ++++++++++++++++ ...nfrastructure-construction-resequence.html | 1459 ++++++++++++++++ .../logistics-hub-connection-recovery.html | 1473 ++++++++++++++++ .../examples/logistics-port-crane-yard.html | 1473 ++++++++++++++++ .../examples/manufacturing-fault-rework.html | 1463 ++++++++++++++++ .../examples/manufacturing-takt-buffer.html | 1463 ++++++++++++++++ .../examples/motion-path.html | 1376 +++++++++++++++ .../examples/oil-gas-pipeline-reroute.html | 1469 ++++++++++++++++ .../examples/oil-gas-separator-upset.html | 1469 ++++++++++++++++ .../examples/pharma-batch-genealogy.html | 1457 ++++++++++++++++ .../pharma-cold-chain-quarantine.html | 1457 ++++++++++++++++ .../presentation-patterns-approval-gate.html | 1514 +++++++++++++++++ ...resentation-patterns-connected-memory.html | 1514 +++++++++++++++++ .../presentation-patterns-delivery-cycle.html | 1514 +++++++++++++++++ ...resentation-patterns-expressive-robot.html | 1514 +++++++++++++++++ .../retail-inventory-reservation.html | 1448 ++++++++++++++++ .../examples/retail-return-disposition.html | 1448 ++++++++++++++++ .../examples/spatial-stagger.html | 1376 +++++++++++++++ .../examples/svg-draw.html | 1376 +++++++++++++++ .../examples/telecom-cell-handover.html | 1457 ++++++++++++++++ .../examples/telecom-congestion-reroute.html | 1457 ++++++++++++++++ dist/animejs-gallery-0.7.0/finance/index.html | 1369 +++++++++++++++ .../government/index.html | 1369 +++++++++++++++ .../healthcare/index.html | 1369 +++++++++++++++ dist/animejs-gallery-0.7.0/index.html | 1369 +++++++++++++++ .../infrastructure/index.html | 1369 +++++++++++++++ .../logistics/index.html | 1369 +++++++++++++++ .../manufacturing/index.html | 1369 +++++++++++++++ dist/animejs-gallery-0.7.0/oil-gas/index.html | 1369 +++++++++++++++ dist/animejs-gallery-0.7.0/pharma/index.html | 1369 +++++++++++++++ .../presentation-patterns/index.html | 1369 +++++++++++++++ dist/animejs-gallery-0.7.0/retail/index.html | 1369 +++++++++++++++ dist/animejs-gallery-0.7.0/telecom/index.html | 1369 +++++++++++++++ dist/animejs-gallery-manifest.json | 216 +-- ...s-gallery-0.7.0-assemble-explode-final.png | Bin 0 -> 65005 bytes ...ejs-gallery-0.7.0-assemble-explode-mid.png | Bin 0 -> 65489 bytes ...ry-0.7.0-oil-gas-separator-upset-final.png | Bin 0 -> 145541 bytes ...lery-0.7.0-oil-gas-separator-upset-mid.png | Bin 0 -> 145417 bytes .../animejs-gallery-0.7.0-test-report.json | 1309 ++++++++++++++ ...sentation-patterns-approval-gate-final.png | Bin 0 -> 108398 bytes ...resentation-patterns-approval-gate-mid.png | Bin 0 -> 108141 bytes ...tation-patterns-connected-memory-final.png | Bin 0 -> 135613 bytes ...entation-patterns-connected-memory-mid.png | Bin 0 -> 136222 bytes ...entation-patterns-delivery-cycle-final.png | Bin 0 -> 133405 bytes ...esentation-patterns-delivery-cycle-mid.png | Bin 0 -> 132945 bytes ...tation-patterns-expressive-robot-final.png | Bin 0 -> 116793 bytes ...entation-patterns-expressive-robot-mid.png | Bin 0 -> 118003 bytes evidence/presentation-patterns-report.json | 121 ++ .../presentation-patterns-visual-review.md | 16 + package-lock.json | 4 +- package.json | 4 +- references/industry-catalog.md | 2 + .../registry-animejs-presentation-patterns.md | 45 + scripts/build-gallery.py | 3 +- scripts/test-gallery.mjs | 4 +- scripts/test-presentation-patterns.mjs | 72 + 127 files changed, 72164 insertions(+), 157 deletions(-) create mode 100644 assets/animejs/catalogs/presentation-patterns.json create mode 100644 assets/animejs/examples/presentation-patterns-approval-gate.html create mode 100644 assets/animejs/examples/presentation-patterns-connected-memory.html create mode 100644 assets/animejs/examples/presentation-patterns-delivery-cycle.html create mode 100644 assets/animejs/examples/presentation-patterns-expressive-robot.html create mode 100644 assets/animejs/industries/presentation-patterns.js create mode 100644 assets/animejs/presentation-patterns/index.html create mode 100644 dist/animejs-gallery-0.7.0/agriculture/index.html create mode 100644 dist/animejs-gallery-0.7.0/compositions/index.html create mode 100644 dist/animejs-gallery-0.7.0/elements/index.html create mode 100644 dist/animejs-gallery-0.7.0/energy/index.html create mode 100644 dist/animejs-gallery-0.7.0/examples/agriculture-harvest-grading.html create mode 100644 dist/animejs-gallery-0.7.0/examples/agriculture-irrigation-zones.html create mode 100644 dist/animejs-gallery-0.7.0/examples/assemble-explode.html create mode 100644 dist/animejs-gallery-0.7.0/examples/dependency-flow.html create mode 100644 dist/animejs-gallery-0.7.0/examples/energy-feeder-restoration.html create mode 100644 dist/animejs-gallery-0.7.0/examples/energy-microgrid-storage.html create mode 100644 dist/animejs-gallery-0.7.0/examples/finance-insurance-evidence.html create mode 100644 dist/animejs-gallery-0.7.0/examples/finance-payment-reconciliation.html create mode 100644 dist/animejs-gallery-0.7.0/examples/government-budget-execution.html create mode 100644 dist/animejs-gallery-0.7.0/examples/government-permit-review-loop.html create mode 100644 dist/animejs-gallery-0.7.0/examples/healthcare-care-handoffs.html create mode 100644 dist/animejs-gallery-0.7.0/examples/healthcare-sample-rejection.html create mode 100644 dist/animejs-gallery-0.7.0/examples/infrastructure-bridge-inspection.html create mode 100644 dist/animejs-gallery-0.7.0/examples/infrastructure-construction-resequence.html create mode 100644 dist/animejs-gallery-0.7.0/examples/logistics-hub-connection-recovery.html create mode 100644 dist/animejs-gallery-0.7.0/examples/logistics-port-crane-yard.html create mode 100644 dist/animejs-gallery-0.7.0/examples/manufacturing-fault-rework.html create mode 100644 dist/animejs-gallery-0.7.0/examples/manufacturing-takt-buffer.html create mode 100644 dist/animejs-gallery-0.7.0/examples/motion-path.html create mode 100644 dist/animejs-gallery-0.7.0/examples/oil-gas-pipeline-reroute.html create mode 100644 dist/animejs-gallery-0.7.0/examples/oil-gas-separator-upset.html create mode 100644 dist/animejs-gallery-0.7.0/examples/pharma-batch-genealogy.html create mode 100644 dist/animejs-gallery-0.7.0/examples/pharma-cold-chain-quarantine.html create mode 100644 dist/animejs-gallery-0.7.0/examples/presentation-patterns-approval-gate.html create mode 100644 dist/animejs-gallery-0.7.0/examples/presentation-patterns-connected-memory.html create mode 100644 dist/animejs-gallery-0.7.0/examples/presentation-patterns-delivery-cycle.html create mode 100644 dist/animejs-gallery-0.7.0/examples/presentation-patterns-expressive-robot.html create mode 100644 dist/animejs-gallery-0.7.0/examples/retail-inventory-reservation.html create mode 100644 dist/animejs-gallery-0.7.0/examples/retail-return-disposition.html create mode 100644 dist/animejs-gallery-0.7.0/examples/spatial-stagger.html create mode 100644 dist/animejs-gallery-0.7.0/examples/svg-draw.html create mode 100644 dist/animejs-gallery-0.7.0/examples/telecom-cell-handover.html create mode 100644 dist/animejs-gallery-0.7.0/examples/telecom-congestion-reroute.html create mode 100644 dist/animejs-gallery-0.7.0/finance/index.html create mode 100644 dist/animejs-gallery-0.7.0/government/index.html create mode 100644 dist/animejs-gallery-0.7.0/healthcare/index.html create mode 100644 dist/animejs-gallery-0.7.0/index.html create mode 100644 dist/animejs-gallery-0.7.0/infrastructure/index.html create mode 100644 dist/animejs-gallery-0.7.0/logistics/index.html create mode 100644 dist/animejs-gallery-0.7.0/manufacturing/index.html create mode 100644 dist/animejs-gallery-0.7.0/oil-gas/index.html create mode 100644 dist/animejs-gallery-0.7.0/pharma/index.html create mode 100644 dist/animejs-gallery-0.7.0/presentation-patterns/index.html create mode 100644 dist/animejs-gallery-0.7.0/retail/index.html create mode 100644 dist/animejs-gallery-0.7.0/telecom/index.html create mode 100644 evidence/animejs-gallery-0.7.0-assemble-explode-final.png create mode 100644 evidence/animejs-gallery-0.7.0-assemble-explode-mid.png create mode 100644 evidence/animejs-gallery-0.7.0-oil-gas-separator-upset-final.png create mode 100644 evidence/animejs-gallery-0.7.0-oil-gas-separator-upset-mid.png create mode 100644 evidence/animejs-gallery-0.7.0-test-report.json create mode 100644 evidence/presentation-patterns-approval-gate-final.png create mode 100644 evidence/presentation-patterns-approval-gate-mid.png create mode 100644 evidence/presentation-patterns-connected-memory-final.png create mode 100644 evidence/presentation-patterns-connected-memory-mid.png create mode 100644 evidence/presentation-patterns-delivery-cycle-final.png create mode 100644 evidence/presentation-patterns-delivery-cycle-mid.png create mode 100644 evidence/presentation-patterns-expressive-robot-final.png create mode 100644 evidence/presentation-patterns-expressive-robot-mid.png create mode 100644 evidence/presentation-patterns-report.json create mode 100644 evidence/presentation-patterns-visual-review.md create mode 100644 references/registry-animejs-presentation-patterns.md create mode 100644 scripts/test-presentation-patterns.mjs diff --git a/README.md b/README.md index 7da32f5..f70834d 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ Start with the [discovery guide](references/industry-catalog.md). Choose by expl - [Composition registry](references/registry-animejs-compositions.md): dependency flow and assemble/explode/reassemble. - `assets/animejs/examples.js`: editable configurations; `gallery.js`: shared renderer and lifecycle; `index.html`: local source preview. -Build with `python3 scripts/build-gallery.py` and open `dist/animejs-gallery-0.6.0/index.html`. This portable offline gallery includes Play, Replay, Settle and Seek for all 29 examples. `npm test` runs the deck, motion, mechanism and gallery suites. Registry coverage and source links are validated so new examples cannot silently go unlisted. Existing deck and mechanism artifact versions remain available. +Build with `python3 scripts/build-gallery.py` and open `dist/animejs-gallery-0.7.0/index.html`. This portable offline gallery includes Play, Replay, Settle and Seek for all 33 examples. `npm test` runs the deck, motion, mechanism and gallery suites. Registry coverage and source links are validated so new examples cannot silently go unlisted. Existing deck and mechanism artifact versions remain available. ## Licenses and scope @@ -52,10 +52,14 @@ Original code/documentation: MIT, RootAtSkic and Hermes Agent. Reveal.js and Ani Local Chromium verification is included; no hosted CI or cross-browser certification is claimed. No automation credentials belong in this repository. -### Gallery hierarchy (0.6.0) +### Presentation-derived patterns (0.7.0) -Open `dist/animejs-gallery-0.6.0/index.html` for all 29 previews, or `elements/index.html` and `compositions/index.html` inside that package. Each gallery embeds `examples/.html` through relative iframe `src` and links to that same file. Each individual page is self-contained (CSS, configuration, renderer, pinned Anime.js and full license embedded), so it also plays offline by itself. Breadcrumb links require keeping the package hierarchy together. Extract the complete package before opening its index; no server is needed. Previous version artifacts are retained. +Four reusable generic examples preserve the authorized reference’s expressive silver robot, split approval barrier, parallel-design delivery cycle and connected-memory relationships. Read the [presentation-patterns registry](references/registry-animejs-presentation-patterns.md) for provenance, use/avoid guidance, bounded parameters and actual lifecycle integration. The full library now has 33 examples, 15 registries and 49 HTML pages. Vendored runtime pins and prior versioned dist packages are unchanged. + +### Gallery hierarchy (0.7.0) + +Open `dist/animejs-gallery-0.7.0/index.html` for all 33 previews, or `elements/index.html` and `compositions/index.html` inside that package. Each gallery embeds `examples/.html` through relative iframe `src` and links to that same file. Each individual page is self-contained (CSS, configuration, renderer, pinned Anime.js and full license embedded), so it also plays offline by itself. Breadcrumb links require keeping the package hierarchy together. Extract the complete package before opening its index; no server is needed. Previous version artifacts are retained. The editable hierarchy mirrors this under `assets/animejs/`, sharing generated `catalog-data.js`, `gallery.js`, `gallery.css` and `assets/vendor/`. Industry descriptors in `catalogs/*.json` and renderer registrations in `industries/*.js` are the editable sources; the builder generates all wrappers without duplicated labels. Legacy configs remain in `examples.js`. Edit the configuration/renderer once, not the generated dist pages. Individual source documents select exactly one configuration using `body[data-example]`; unknown IDs fail explicitly, with no query-string fallback. Galleries never mount a renderer themselves. Every embedded document owns its lifecycle. -`python3 scripts/build-gallery.py` inlines local dependencies and records every page hash plus source hashes in `dist/animejs-gallery-manifest.json`. `scripts/test-gallery.mjs` tests both editable and built hierarchies, iframe identity, navigation, all 29 examples in normal/reduced motion and deterministic hold/cleanup behavior. A compact representative screenshot set and exact page hashes are recorded under `evidence/`. Every normal-motion example gets actual early playback, then accelerated natural completion at engine speed 12; representative legacy/industry examples also complete at speed 1. The report explicitly distinguishes these. Default build/tests fail on missing release sectors; `--allow-partial` is development-only and reports missing coverage. The complete release has 29 individual pages, 14 registry galleries, and the overall index: 44 HTML pages. +`python3 scripts/build-gallery.py` inlines local dependencies and records every page hash plus source hashes in `dist/animejs-gallery-manifest.json`. `scripts/test-gallery.mjs` tests both editable and built hierarchies, iframe identity, navigation, all 33 examples in normal/reduced motion and deterministic hold/cleanup behavior. A compact representative screenshot set and exact page hashes are recorded under `evidence/`. Every normal-motion example gets actual early playback, then accelerated natural completion at engine speed 12; representative legacy/industry examples also complete at speed 1. The report explicitly distinguishes these. Default build/tests fail on missing release sectors; `--allow-partial` is development-only and reports missing coverage. The complete release has 33 individual pages, 15 registry galleries, and the overall index: 49 HTML pages. diff --git a/SKILL.md b/SKILL.md index 716b055..f9a519e 100644 --- a/SKILL.md +++ b/SKILL.md @@ -1,7 +1,7 @@ --- name: presentation-html description: Build offline HTML decks with deliberate motion. -version: 0.6.0 +version: 0.7.0 author: RootAtSkic, Hermes Agent license: MIT platforms: [linux, macos, windows] @@ -32,16 +32,17 @@ Build editable, offline-first browser presentations using Reveal.js for navigati ## Read on demand: runnable Anime.js registries -Start with the [industry catalog discovery guide](references/industry-catalog.md): choose the audience’s explanatory problem, then the mechanism and only the relevant registry. The 0.6.0 library has 24 industry recipes across 12 sectors plus five foundational recipes; these sectors are release coverage, not a permanent ceiling. Do not load the whole library blindly. +Start with the [industry catalog discovery guide](references/industry-catalog.md): choose the audience’s explanatory problem, then the mechanism and only the relevant registry. The 0.7.0 library has 24 industry recipes across 12 sectors plus five foundational recipes and four presentation-derived patterns (33 examples across 15 registries); these sectors are release coverage, not a permanent ceiling. Do not load the whole library blindly. Select examples by the relationship they explain, not just their visual effect: - [Element registry](references/registry-animejs-elements.md): SVG connection drawing, motion-path travel and spatial stagger. Read when choosing a single technique. +- [Presentation patterns](references/registry-animejs-presentation-patterns.md): expressive robot, approval barrier, delivery cycle and connected memory. Four generalized presentation-derived recipes with finite playback and integration hooks. - [Composition registry](references/registry-animejs-compositions.md): dependency flow and assemble/explode/reassemble. Read when explaining a multi-part mechanism. Industry registries: [oil and gas](references/registry-animejs-oil-gas.md), [pharma](references/registry-animejs-pharma.md), [government](references/registry-animejs-government.md), [retail](references/registry-animejs-retail.md), [logistics](references/registry-animejs-logistics.md), [manufacturing](references/registry-animejs-manufacturing.md), [energy](references/registry-animejs-energy.md), [healthcare](references/registry-animejs-healthcare.md), [finance](references/registry-animejs-finance.md), [telecom](references/registry-animejs-telecom.md), [agriculture](references/registry-animejs-agriculture.md), [infrastructure](references/registry-animejs-infrastructure.md). Each describes useful audiences/questions, phases, editable parameters, techniques and limits. All are conceptual illustrations with illustrative numbers, not operational or professional certifications. -Editable configurations, renderer and preview live in `assets/animejs/`. Catalog JSON generates group/individual wrappers and `catalog-data.js`; never duplicate labels or hand-edit generated HTML. Individual pages expose use/avoid/assumptions and meaningful named beat controls. Compact iframe previews reuse the exact same document. Build the reusable offline gallery package with `python3 scripts/build-gallery.py` through `terminal`, then open `dist/animejs-gallery-0.6.0/index.html`. `npm test` exercises every registered example. Keep the registry ID, source, parameter constraints and verification coverage aligned when adding an example; do not load all examples into context unnecessarily. Gallery controls are for inspecting recipes, not mandatory controls for client slides. Wire slide departure/teardown explicitly when reusing a recipe. +Editable configurations, renderer and preview live in `assets/animejs/`. Catalog JSON generates group/individual wrappers and `catalog-data.js`; never duplicate labels or hand-edit generated HTML. Individual pages expose use/avoid/assumptions and meaningful named beat controls. Compact iframe previews reuse the exact same document. Build the reusable offline gallery package with `python3 scripts/build-gallery.py` through `terminal`, then open `dist/animejs-gallery-0.7.0/index.html`. `npm test` exercises every registered example. Keep the registry ID, source, parameter constraints and verification coverage aligned when adding an example; do not load all examples into context unnecessarily. Gallery controls are for inspecting recipes, not mandatory controls for client slides. Wire slide departure/teardown explicitly when reusing a recipe. ## Read on demand: choreography and deterministic motion diff --git a/assets/animejs/agriculture/index.html b/assets/animejs/agriculture/index.html index 97e4ffc..9faef64 100644 --- a/assets/animejs/agriculture/index.html +++ b/assets/animejs/agriculture/index.html @@ -1,7 +1,7 @@ Agriculture — Motion that explains -

Agriculture

Open an example for use/avoid guidance, assumptions and named timeline beats.