[verified] feat: add reusable presentation-derived animation patterns
This commit is contained in:
jarvis-at-skic committed
1 parent
ecbbcf8ba0
commit
5b07a9a3e5
127 files changed
+72164
-157
No files matched your search
@@ -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/<id>.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/<id>.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.
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Agriculture — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="agriculture"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Agriculture</span></nav><h1>Agriculture</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="agriculture"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Agriculture</span></nav><h1>Agriculture</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1068,5 +1068,168 @@ window.animeExamples = [
|
||||
}
|
||||
],
|
||||
"kind": "industry"
|
||||
},
|
||||
{
|
||||
"id": "presentation-patterns-expressive-robot",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Expressive robot: blink, think, smile",
|
||||
"description": "A silver visor robot raises an articulated hand to scratch its head, then holds a smile.",
|
||||
"useWhen": "Give a conceptual agent a bounded acknowledgment or thinking gesture.",
|
||||
"avoid": "Do not imply sentience, measured cognition or an always-on assistant.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000,
|
||||
"scale": 3.7,
|
||||
"smileDepth": 12
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Blink"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Raise hand"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Scratch"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Lower hand"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Smile"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
],
|
||||
"kind": "industry"
|
||||
},
|
||||
{
|
||||
"id": "presentation-patterns-approval-gate",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Approval gate: wait, open, cross, return",
|
||||
"description": "An envelope waits before a closed split barrier; approval precedes opening, crossing and returning evidence.",
|
||||
"useWhen": "Explain the distinction between a proposal, human permission, execution and evidence.",
|
||||
"avoid": "Not a real authorization control. Never use animation state as permission to execute.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000,
|
||||
"travelPx": 420
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Wait"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Approval"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Open barrier"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Cross"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Evidence return"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
],
|
||||
"kind": "industry"
|
||||
},
|
||||
{
|
||||
"id": "presentation-patterns-delivery-cycle",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Delivery cycle: parallel design and feedback",
|
||||
"description": "Two design streams join delivery, then acceptance and release return learning into the next cycle.",
|
||||
"useWhen": "Explain parallel design with a shared delivery join and an acceptance-before-release sequence.",
|
||||
"avoid": "Not a scheduler, compliance process or proof that work has completed.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Scope"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Parallel design"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Join delivery"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Accept / release"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Feedback"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
],
|
||||
"kind": "industry"
|
||||
},
|
||||
{
|
||||
"id": "presentation-patterns-connected-memory",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Connected memory: retain, review and reuse",
|
||||
"description": "Learning yields retained knowledge and reviewed instructions; independent external sources connect to the agent.",
|
||||
"useWhen": "Distinguish learning activity, retained knowledge, reusable instructions and external access.",
|
||||
"avoid": "Not autonomous self-modification, source synchronization or an integration implementation.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Learn"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Retain"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Review"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Reuse"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Source access"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
],
|
||||
"kind": "industry"
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,161 @@
|
||||
[
|
||||
{
|
||||
"id": "presentation-patterns-expressive-robot",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Expressive robot: blink, think, smile",
|
||||
"description": "A silver visor robot raises an articulated hand to scratch its head, then holds a smile.",
|
||||
"useWhen": "Give a conceptual agent a bounded acknowledgment or thinking gesture.",
|
||||
"avoid": "Do not imply sentience, measured cognition or an always-on assistant.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000,
|
||||
"scale": 3.7,
|
||||
"smileDepth": 12
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Blink"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Raise hand"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Scratch"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Lower hand"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Smile"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "presentation-patterns-approval-gate",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Approval gate: wait, open, cross, return",
|
||||
"description": "An envelope waits before a closed split barrier; approval precedes opening, crossing and returning evidence.",
|
||||
"useWhen": "Explain the distinction between a proposal, human permission, execution and evidence.",
|
||||
"avoid": "Not a real authorization control. Never use animation state as permission to execute.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000,
|
||||
"travelPx": 420
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Wait"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Approval"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Open barrier"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Cross"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Evidence return"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "presentation-patterns-delivery-cycle",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Delivery cycle: parallel design and feedback",
|
||||
"description": "Two design streams join delivery, then acceptance and release return learning into the next cycle.",
|
||||
"useWhen": "Explain parallel design with a shared delivery join and an acceptance-before-release sequence.",
|
||||
"avoid": "Not a scheduler, compliance process or proof that work has completed.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Scope"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Parallel design"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Join delivery"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Accept / release"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Feedback"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "presentation-patterns-connected-memory",
|
||||
"group": "presentation-patterns",
|
||||
"groupTitle": "Presentation patterns",
|
||||
"title": "Connected memory: retain, review and reuse",
|
||||
"description": "Learning yields retained knowledge and reviewed instructions; independent external sources connect to the agent.",
|
||||
"useWhen": "Distinguish learning activity, retained knowledge, reusable instructions and external access.",
|
||||
"avoid": "Not autonomous self-modification, source synchronization or an integration implementation.",
|
||||
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
|
||||
"config": {
|
||||
"duration": 6000
|
||||
},
|
||||
"beats": [
|
||||
{
|
||||
"at": 0,
|
||||
"label": "Learn"
|
||||
},
|
||||
{
|
||||
"at": 1000,
|
||||
"label": "Retain"
|
||||
},
|
||||
{
|
||||
"at": 2000,
|
||||
"label": "Review"
|
||||
},
|
||||
{
|
||||
"at": 3000,
|
||||
"label": "Reuse"
|
||||
},
|
||||
{
|
||||
"at": 4000,
|
||||
"label": "Source access"
|
||||
},
|
||||
{
|
||||
"at": 6000,
|
||||
"label": "Complete"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Compositions — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="compositions"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Compositions</span></nav><h1>Compositions</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="compositions"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Compositions</span></nav><h1>Compositions</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Elements — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="elements"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Elements</span></nav><h1>Elements</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="elements"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Elements</span></nav><h1>Elements</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Energy — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="energy"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Energy</span></nav><h1>Energy</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="energy"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Energy</span></nav><h1>Energy</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Harvest: grade, store and distribute — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="agriculture-harvest-grading"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../agriculture/index.html">Agriculture</a> / <span aria-current="page">Harvest: grade, store and distribute</span></nav><h1>Harvest: grade, store and distribute</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="agriculture-harvest-grading"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../agriculture/index.html">Agriculture</a> / <span aria-current="page">Harvest: grade, store and distribute</span></nav><h1>Harvest: grade, store and distribute</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Irrigation: measure, open, soak, close — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="agriculture-irrigation-zones"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../agriculture/index.html">Agriculture</a> / <span aria-current="page">Irrigation: measure, open, soak, close</span></nav><h1>Irrigation: measure, open, soak, close</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="agriculture-irrigation-zones"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../agriculture/index.html">Agriculture</a> / <span aria-current="page">Irrigation: measure, open, soak, close</span></nav><h1>Irrigation: measure, open, soak, close</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Separate, inspect, reassemble — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="assemble-explode"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../compositions/index.html">Compositions</a> / <span aria-current="page">Separate, inspect, reassemble</span></nav><h1>Separate, inspect, reassemble</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="assemble-explode"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../compositions/index.html">Compositions</a> / <span aria-current="page">Separate, inspect, reassemble</span></nav><h1>Separate, inspect, reassemble</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Explain a dependency — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="dependency-flow"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../compositions/index.html">Compositions</a> / <span aria-current="page">Explain a dependency</span></nav><h1>Explain a dependency</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="dependency-flow"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../compositions/index.html">Compositions</a> / <span aria-current="page">Explain a dependency</span></nav><h1>Explain a dependency</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Feeder fault: isolate and restore service — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="energy-feeder-restoration"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../energy/index.html">Energy</a> / <span aria-current="page">Feeder fault: isolate and restore service</span></nav><h1>Feeder fault: isolate and restore service</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="energy-feeder-restoration"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../energy/index.html">Energy</a> / <span aria-current="page">Feeder fault: isolate and restore service</span></nav><h1>Feeder fault: isolate and restore service</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Microgrid: balance generation with storage — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="energy-microgrid-storage"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../energy/index.html">Energy</a> / <span aria-current="page">Microgrid: balance generation with storage</span></nav><h1>Microgrid: balance generation with storage</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="energy-microgrid-storage"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../energy/index.html">Energy</a> / <span aria-current="page">Microgrid: balance generation with storage</span></nav><h1>Microgrid: balance generation with storage</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Insurance: evidence before settlement — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="finance-insurance-evidence"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../finance/index.html">Finance</a> / <span aria-current="page">Insurance: evidence before settlement</span></nav><h1>Insurance: evidence before settlement</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="finance-insurance-evidence"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../finance/index.html">Finance</a> / <span aria-current="page">Insurance: evidence before settlement</span></nav><h1>Insurance: evidence before settlement</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Payment: authorization is not settlement — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="finance-payment-reconciliation"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../finance/index.html">Finance</a> / <span aria-current="page">Payment: authorization is not settlement</span></nav><h1>Payment: authorization is not settlement</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="finance-payment-reconciliation"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../finance/index.html">Finance</a> / <span aria-current="page">Payment: authorization is not settlement</span></nav><h1>Payment: authorization is not settlement</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Budget allocation: authority before spend — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="government-budget-execution"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../government/index.html">Government</a> / <span aria-current="page">Budget allocation: authority before spend</span></nav><h1>Budget allocation: authority before spend</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="government-budget-execution"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../government/index.html">Government</a> / <span aria-current="page">Budget allocation: authority before spend</span></nav><h1>Budget allocation: authority before spend</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Permit review: parallel checks & correction — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="government-permit-review-loop"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../government/index.html">Government</a> / <span aria-current="page">Permit review: parallel checks & correction</span></nav><h1>Permit review: parallel checks & correction</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="government-permit-review-loop"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../government/index.html">Government</a> / <span aria-current="page">Permit review: parallel checks & correction</span></nav><h1>Permit review: parallel checks & correction</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Care coordination: triage and handoffs — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="healthcare-care-handoffs"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../healthcare/index.html">Healthcare</a> / <span aria-current="page">Care coordination: triage and handoffs</span></nav><h1>Care coordination: triage and handoffs</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="healthcare-care-handoffs"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../healthcare/index.html">Healthcare</a> / <span aria-current="page">Care coordination: triage and handoffs</span></nav><h1>Care coordination: triage and handoffs</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Diagnostic sample chain: reject and recollect — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="healthcare-sample-rejection"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../healthcare/index.html">Healthcare</a> / <span aria-current="page">Diagnostic sample chain: reject and recollect</span></nav><h1>Diagnostic sample chain: reject and recollect</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="healthcare-sample-rejection"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../healthcare/index.html">Healthcare</a> / <span aria-current="page">Diagnostic sample chain: reject and recollect</span></nav><h1>Diagnostic sample chain: reject and recollect</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bridge: load paths and inspection closure — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="infrastructure-bridge-inspection"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../infrastructure/index.html">Infrastructure</a> / <span aria-current="page">Bridge: load paths and inspection closure</span></nav><h1>Bridge: load paths and inspection closure</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="infrastructure-bridge-inspection"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../infrastructure/index.html">Infrastructure</a> / <span aria-current="page">Bridge: load paths and inspection closure</span></nav><h1>Bridge: load paths and inspection closure</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Construction: dependency and resequencing — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="infrastructure-construction-resequence"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../infrastructure/index.html">Infrastructure</a> / <span aria-current="page">Construction: dependency and resequencing</span></nav><h1>Construction: dependency and resequencing</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="infrastructure-construction-resequence"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../infrastructure/index.html">Infrastructure</a> / <span aria-current="page">Construction: dependency and resequencing</span></nav><h1>Construction: dependency and resequencing</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hub sorting: recover a missed connection — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="logistics-hub-connection-recovery"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../logistics/index.html">Logistics</a> / <span aria-current="page">Hub sorting: recover a missed connection</span></nav><h1>Hub sorting: recover a missed connection</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="logistics-hub-connection-recovery"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../logistics/index.html">Logistics</a> / <span aria-current="page">Hub sorting: recover a missed connection</span></nav><h1>Hub sorting: recover a missed connection</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Port coordination: berth, crane and yard — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="logistics-port-crane-yard"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../logistics/index.html">Logistics</a> / <span aria-current="page">Port coordination: berth, crane and yard</span></nav><h1>Port coordination: berth, crane and yard</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="logistics-port-crane-yard"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../logistics/index.html">Logistics</a> / <span aria-current="page">Port coordination: berth, crane and yard</span></nav><h1>Port coordination: berth, crane and yard</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Machine fault: isolate, inspect and rework — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="manufacturing-fault-rework"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../manufacturing/index.html">Manufacturing</a> / <span aria-current="page">Machine fault: isolate, inspect and rework</span></nav><h1>Machine fault: isolate, inspect and rework</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="manufacturing-fault-rework"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../manufacturing/index.html">Manufacturing</a> / <span aria-current="page">Machine fault: isolate, inspect and rework</span></nav><h1>Machine fault: isolate, inspect and rework</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Assembly flow: bottleneck and buffer — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="manufacturing-takt-buffer"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../manufacturing/index.html">Manufacturing</a> / <span aria-current="page">Assembly flow: bottleneck and buffer</span></nav><h1>Assembly flow: bottleneck and buffer</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="manufacturing-takt-buffer"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../manufacturing/index.html">Manufacturing</a> / <span aria-current="page">Assembly flow: bottleneck and buffer</span></nav><h1>Assembly flow: bottleneck and buffer</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Follow a route — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="motion-path"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../elements/index.html">Elements</a> / <span aria-current="page">Follow a route</span></nav><h1>Follow a route</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="motion-path"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../elements/index.html">Elements</a> / <span aria-current="page">Follow a route</span></nav><h1>Follow a route</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Pipeline leak: isolate and bypass — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="oil-gas-pipeline-reroute"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../oil-gas/index.html">Oil & gas</a> / <span aria-current="page">Pipeline leak: isolate and bypass</span></nav><h1>Pipeline leak: isolate and bypass</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="oil-gas-pipeline-reroute"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../oil-gas/index.html">Oil & gas</a> / <span aria-current="page">Pipeline leak: isolate and bypass</span></nav><h1>Pipeline leak: isolate and bypass</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Separator train: contain an upset — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="oil-gas-separator-upset"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../oil-gas/index.html">Oil & gas</a> / <span aria-current="page">Separator train: contain an upset</span></nav><h1>Separator train: contain an upset</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="oil-gas-separator-upset"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../oil-gas/index.html">Oil & gas</a> / <span aria-current="page">Separator train: contain an upset</span></nav><h1>Separator train: contain an upset</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Batch genealogy: hold, then release — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="pharma-batch-genealogy"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../pharma/index.html">Pharma</a> / <span aria-current="page">Batch genealogy: hold, then release</span></nav><h1>Batch genealogy: hold, then release</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="pharma-batch-genealogy"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../pharma/index.html">Pharma</a> / <span aria-current="page">Batch genealogy: hold, then release</span></nav><h1>Batch genealogy: hold, then release</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Cold chain: excursion to quarantine — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="pharma-cold-chain-quarantine"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../pharma/index.html">Pharma</a> / <span aria-current="page">Cold chain: excursion to quarantine</span></nav><h1>Cold chain: excursion to quarantine</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="pharma-cold-chain-quarantine"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../pharma/index.html">Pharma</a> / <span aria-current="page">Cold chain: excursion to quarantine</span></nav><h1>Cold chain: excursion to quarantine</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Approval gate: wait, open, cross, return — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="presentation-patterns-approval-gate"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../presentation-patterns/index.html">Presentation patterns</a> / <span aria-current="page">Approval gate: wait, open, cross, return</span></nav><h1>Approval gate: wait, open, cross, return</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
</pre></details></footer>
|
||||
<script src="../../vendor/anime.umd.min.js"></script><script src="../catalog-data.js"></script><script src="../industries/presentation-patterns.js"></script><script src="../gallery.js"></script></body></html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Connected memory: retain, review and reuse — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="presentation-patterns-connected-memory"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../presentation-patterns/index.html">Presentation patterns</a> / <span aria-current="page">Connected memory: retain, review and reuse</span></nav><h1>Connected memory: retain, review and reuse</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
</pre></details></footer>
|
||||
<script src="../../vendor/anime.umd.min.js"></script><script src="../catalog-data.js"></script><script src="../industries/presentation-patterns.js"></script><script src="../gallery.js"></script></body></html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Delivery cycle: parallel design and feedback — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="presentation-patterns-delivery-cycle"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../presentation-patterns/index.html">Presentation patterns</a> / <span aria-current="page">Delivery cycle: parallel design and feedback</span></nav><h1>Delivery cycle: parallel design and feedback</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
</pre></details></footer>
|
||||
<script src="../../vendor/anime.umd.min.js"></script><script src="../catalog-data.js"></script><script src="../industries/presentation-patterns.js"></script><script src="../gallery.js"></script></body></html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Expressive robot: blink, think, smile — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="presentation-patterns-expressive-robot"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../presentation-patterns/index.html">Presentation patterns</a> / <span aria-current="page">Expressive robot: blink, think, smile</span></nav><h1>Expressive robot: blink, think, smile</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
</pre></details></footer>
|
||||
<script src="../../vendor/anime.umd.min.js"></script><script src="../catalog-data.js"></script><script src="../industries/presentation-patterns.js"></script><script src="../gallery.js"></script></body></html>
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Omnichannel: reserve before promising — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="retail-inventory-reservation"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../retail/index.html">Retail</a> / <span aria-current="page">Omnichannel: reserve before promising</span></nav><h1>Omnichannel: reserve before promising</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="retail-inventory-reservation"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../retail/index.html">Retail</a> / <span aria-current="page">Omnichannel: reserve before promising</span></nav><h1>Omnichannel: reserve before promising</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Returns: inspect before restocking — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="retail-return-disposition"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../retail/index.html">Retail</a> / <span aria-current="page">Returns: inspect before restocking</span></nav><h1>Returns: inspect before restocking</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="retail-return-disposition"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../retail/index.html">Retail</a> / <span aria-current="page">Returns: inspect before restocking</span></nav><h1>Returns: inspect before restocking</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Propagate from the center — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="spatial-stagger"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../elements/index.html">Elements</a> / <span aria-current="page">Propagate from the center</span></nav><h1>Propagate from the center</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="spatial-stagger"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../elements/index.html">Elements</a> / <span aria-current="page">Propagate from the center</span></nav><h1>Propagate from the center</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Draw a connection — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="svg-draw"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../elements/index.html">Elements</a> / <span aria-current="page">Draw a connection</span></nav><h1>Draw a connection</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="svg-draw"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../elements/index.html">Elements</a> / <span aria-current="page">Draw a connection</span></nav><h1>Draw a connection</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Cell handover: preserving a session — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="telecom-cell-handover"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../telecom/index.html">Telecommunications</a> / <span aria-current="page">Cell handover: preserving a session</span></nav><h1>Cell handover: preserving a session</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="telecom-cell-handover"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../telecom/index.html">Telecommunications</a> / <span aria-current="page">Cell handover: preserving a session</span></nav><h1>Cell handover: preserving a session</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Packet network: congestion and rerouting — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-example="telecom-congestion-reroute"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../telecom/index.html">Telecommunications</a> / <span aria-current="page">Packet network: congestion and rerouting</span></nav><h1>Packet network: congestion and rerouting</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-example="telecom-congestion-reroute"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../telecom/index.html">Telecommunications</a> / <span aria-current="page">Packet network: congestion and rerouting</span></nav><h1>Packet network: congestion and rerouting</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Finance — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="finance"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Finance</span></nav><h1>Finance</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="finance"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Finance</span></nav><h1>Finance</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -55,8 +55,8 @@
|
||||
if(!tl||!Number.isFinite(tl.duration)||tl.duration<=0)throw new Error('Invalid finite timeline: '+c.id);
|
||||
const beats=document.createElement('div');beats.className='beats';beats.setAttribute('aria-label','Timeline beats');
|
||||
// Legacy positions are computed on every mount, including edited runtime configs.
|
||||
// Industry descriptors retain their explicit authored beat contract unchanged.
|
||||
for(const beat of (industry?c.beats:recipeBeats)||[]){
|
||||
// Renderers may supply duration-derived beats; older industry descriptors stay unchanged.
|
||||
for(const beat of (industry?(tl.recipeBeats||c.beats):recipeBeats)||[]){
|
||||
if(!Number.isFinite(beat.at)||beat.at<0||beat.at>tl.duration)throw new Error('Beat outside timeline: '+c.id+' / '+beat.label);
|
||||
const button=document.createElement('button');button.type='button';button.textContent=beat.label;button.dataset.beat=beat.at;
|
||||
button.addEventListener('click',()=>seek(beat.at),{signal});beats.append(button);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Government — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="government"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Government</span></nav><h1>Government</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="government"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Government</span></nav><h1>Government</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Healthcare — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="healthcare"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Healthcare</span></nav><h1>Healthcare</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="healthcare"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Healthcare</span></nav><h1>Healthcare</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Motion that explains — Motion that explains</title><link rel="stylesheet" href="gallery.css"></head>
|
||||
<body data-gallery="all"><header><nav aria-label="Breadcrumb"><span aria-current="page">All examples</span></nav><h1>Motion that explains</h1><p>29 editable examples across 14 registries. Choose a question or industry; inspect meaningful timeline beats. All scenes use illustrative models.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="all"><header><nav aria-label="Breadcrumb"><span aria-current="page">All examples</span></nav><h1>Motion that explains</h1><p>33 editable examples across 15 registries. Choose a question or industry; inspect meaningful timeline beats. All scenes use illustrative models.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
/* Presentation-derived vector techniques; generic conceptual teaching scenes.
|
||||
* One finite Anime.js 4.5 clock, no runtime permissions or external data. */
|
||||
(() => {
|
||||
'use strict';
|
||||
window.industryRenderers ??= {};
|
||||
const C={bg:'#e5f6ff',ink:'#142f46',blue:'#235a89',pale:'#d0e2ff',copper:'#95653e',green:'#006b5e',muted:'#46647a',white:'#ffffff'};
|
||||
const clamp=(v,a,b,f)=>Number.isFinite(Number(v))?Math.max(a,Math.min(b,Number(v))):f;
|
||||
function scene(svg,c,kit,title,phases){
|
||||
const duration=clamp(c.duration,3000,18000,6000),u=duration/6;
|
||||
const tl=kit.anime.createTimeline({autoplay:false,defaults:{ease:'linear'}});
|
||||
const E=(tag,a={},t='',p=svg)=>kit.el(tag,a,t,p);
|
||||
const R=(x,y,w,h,fill=C.pale,p=svg,a={})=>E('rect',{x,y,width:w,height:h,rx:6,fill,...a},'',p);
|
||||
const T=(x,y,t,size=18,p=svg,a={})=>E('text',{x,y,fill:C.ink,style:`font:${size}px system-ui,sans-serif;fill:${C.ink}`,...a},t,p);
|
||||
const P=(d,color=C.blue,p=svg,a={})=>E('path',{d,fill:'none',stroke:color,'stroke-width':2,'stroke-linecap':'round','stroke-linejoin':'round',...a},'',p);
|
||||
const G=(a={},p=svg)=>E('g',a,'',p);
|
||||
// Explicit holds prevent direction-dependent restoration in gaps between
|
||||
// repeated SVG-attribute tweens (notably elbow and hand coordinates).
|
||||
const tracks=new WeakMap();
|
||||
const A=(e,props,at,len)=>{
|
||||
const previous=tracks.get(e)||{};
|
||||
for(const [key,value] of Object.entries(props)){
|
||||
const p=previous[key];
|
||||
if(p&&at>p.end+1e-8)tl.add(e,{[key]:[p.value,p.value],duration:(at-p.end)*u},p.end*u);
|
||||
previous[key]={end:at+len,value:Array.isArray(value)?value[1]:value};
|
||||
}
|
||||
tracks.set(e,previous);
|
||||
return tl.add(e,{...props,duration:len*u},at*u);
|
||||
};
|
||||
const draw=(d,at,len=1,color=C.copper,a={})=>{const e=P(d,color,svg,{'pathLength':1,'stroke-dasharray':1,'stroke-dashoffset':1,...a});A(e,{'stroke-dashoffset':[1,0]},at,len);return e;};
|
||||
R(0,0,960,540,C.bg,svg,{rx:0});T(30,40,title,25);P('M30 60 H930',C.blue);
|
||||
phases.forEach((s,i)=>{const x=30+i*900/phases.length,w=900/phases.length-8;R(x,468,w,40);T(x+8,494,s,15);const bar=R(x,465,w,3,C.copper);A(bar,{opacity:[.18,1]},i*5/phases.length,.4);});
|
||||
T(30,526,'Conceptual illustration · human review remains separate from animation',15);
|
||||
A(G({'data-clock':'finite'}),{opacity:[1,1]},0,6);
|
||||
tl.recipeBeats=phases.map((label,i)=>({label,at:i*u})).concat({label:'Complete',at:duration});
|
||||
return {E,R,T,P,G,A,draw,tl,u};
|
||||
}
|
||||
// Source silhouette: antenna, rounded silver head, recessed dark visor,
|
||||
// copper ears, small torso and two jointed arms. Structural scale is isolated.
|
||||
function robot(s,x,y,scale=1,expressive=false,c={}){
|
||||
const {E,R,P,G,A}=s,g=G({transform:`translate(${x} ${y}) scale(${scale})`,'data-robot':'body'});
|
||||
P('M0 -25 V-34','#dcecf5',g,{'stroke-width':2.5});E('circle',{cx:0,cy:-36,r:3,fill:C.copper},'',g);
|
||||
R(-25,-24,50,36,'#b9cfdf',g,{rx:7,stroke:'#eff8ff','stroke-width':1.5});R(-20,-18,40,18,'#14232f',g,{rx:4});
|
||||
for(const x of [-10,10]){const eye=E('ellipse',{cx:x,cy:-9,rx:3.6,ry:3.6,fill:'#9adfff','data-eye':x},'',g);if(expressive)for(const at of [.65,4.65]){A(eye,{ry:[3.6,.65]},at,.08);A(eye,{ry:[.65,3.6]},at+.12,.08);}}
|
||||
const mouth=P('M-7 4 Q0 5 7 4','#304859',g,{'stroke-width':2.5,'data-smile':''});
|
||||
if(expressive)A(mouth,{d:['M-7 4 Q0 5 7 4',`M-7 4 Q0 ${clamp(c.smileDepth,8,14,12)} 7 4`]},3.8,.7);
|
||||
else mouth.setAttribute('d','M-7 4 Q0 12 7 4');
|
||||
for(const x of [-30,26])R(x,-14,4,13,C.copper,g,{rx:1});P('M0 14 V17','#dcecf5',g,{'stroke-width':3});
|
||||
P('M-16 29 L-16 24 Q-16 18 -10 18 L10 18 Q16 18 16 24 L16 29 Z','#c9e3f4',g,{fill:'#809eb3','stroke-width':1.2});E('circle',{cx:0,cy:23,r:2,fill:C.copper},'',g);
|
||||
for(const side of [-1,1]){
|
||||
const rest=`M${side*14} 22 L${side*23} 25 L${side*26} 14`,arm=P(rest,'#476c89',g,{'stroke-width':3.2,'data-arm':side});
|
||||
const elbow=E('circle',{cx:side*23,cy:25,r:2.5,fill:'#b9cfdf',stroke:'#476c89','data-elbow':side},'',g);
|
||||
const hand=E('circle',{cx:side*26,cy:14,r:3.4,fill:'#cce6f6',stroke:'#476c89','stroke-width':1.2,'data-hand':side},'',g);
|
||||
if(expressive&&side===1){
|
||||
const pose=h=>`M14 22 L35 5 L${h} -17`;
|
||||
A(arm,{d:[rest,pose(23)]},1,.55);A(elbow,{cx:[23,35],cy:[25,5]},1,.55);A(hand,{cx:[26,23],cy:[14,-17]},1,.55);
|
||||
let h=23;for(let i=0;i<6;i++){const next=i%2?23:25;A(arm,{d:[pose(h),pose(next)]},1.55+i*.2,.2);A(hand,{cx:[h,next]},1.55+i*.2,.2);h=next;}
|
||||
A(arm,{d:[pose(h),rest]},2.75,.55);A(elbow,{cx:[35,23],cy:[5,25]},2.75,.55);A(hand,{cx:[h,26],cy:[-17,14]},2.75,.55);
|
||||
}
|
||||
}
|
||||
return g;
|
||||
}
|
||||
const register=(id,fn)=>window.industryRenderers['presentation-patterns-'+id]=fn;
|
||||
register('expressive-robot',(svg,c,kit)=>{
|
||||
const s=scene(svg,c,kit,'EXPRESSIVE ROBOT / A FINITE PERFORMANCE',['Blink','Raise hand','Scratch','Lower hand','Smile']);
|
||||
robot(s,480,270,clamp(c.scale,2.5,4,3.7),true,c);
|
||||
s.T(48,140,'Acknowledge',21);s.T(48,171,'Brief visor blinks',17);
|
||||
s.T(678,210,'Think',21);s.T(678,241,'Shoulder → elbow → hand',17);
|
||||
s.T(678,345,'Respond',21);s.T(678,376,'A held, readable smile',17);
|
||||
s.P('M270 165 H330 L385 230');s.P('M665 250 H630 L610 280');
|
||||
s.T(48,427,'Replay starts one bounded gesture sequence. No perpetual idle loop.',18);
|
||||
return s.tl;
|
||||
});
|
||||
register('approval-gate',(svg,c,kit)=>{
|
||||
const s=scene(svg,c,kit,'APPROVAL GATE / WAIT BEFORE CROSSING',['Wait','Approval','Open barrier','Cross','Evidence return']);
|
||||
const {E,R,T,P,G,A,draw}=s;
|
||||
T(100,110,'PROPOSE',20);T(399,110,'HUMAN DECISION',20);T(760,110,'EXECUTE',20);
|
||||
E('circle',{cx:480,cy:140,r:10,fill:C.blue});P('M459 172 Q459 151 480 151 Q501 151 501 172 Z',C.blue,svg,{fill:C.blue});
|
||||
const wait=T(550,190,'Waiting for human decision',17),approved=T(550,190,'Approved · opening permitted',17);approved.setAttribute('opacity','0');
|
||||
A(wait,{opacity:[1,0]},1,.01);A(approved,{opacity:[0,1]},1,.01);
|
||||
R(70,250,820,80);P('M80 290 H880',C.blue,svg,{'stroke-opacity':.3});
|
||||
R(467,218,26,20,'#a6c8ff');R(467,342,26,20,'#a6c8ff');
|
||||
const top=R(467,238,26,52,'#a56eff',svg,{'data-leaf':'top',stroke:C.blue}),bottom=R(467,290,26,52,'#a56eff',svg,{'data-leaf':'bottom',stroke:C.blue});
|
||||
// Leaves clear the entire lane before any item movement through the barrier.
|
||||
A(top,{y:[238,184],fill:['#a56eff','#9fd8cb']},2,.7);A(bottom,{y:[290,344],fill:['#a56eff','#9fd8cb']},2,.7);
|
||||
const item=G({'data-work-item':'proposal'});R(330,271,60,38,C.white,item,{stroke:C.copper,'stroke-width':2});P('M333 275 L360 292 L387 275',C.copper,item);
|
||||
A(item,{translateX:[0,clamp(c.travelPx,380,450,420)]},3,.8);
|
||||
T(100,377,'Wait here until fully open',17);T(718,377,'Authorized work',17);
|
||||
const proof=draw('M805 405 H480 V422 H180',4,1,C.blue,{'data-evidence-route':''});
|
||||
P('M190 415 L180 422 L190 429');T(320,447,'Evidence returns to the decision owner',17);
|
||||
const packet=E('circle',{cx:805,cy:405,r:5,fill:C.copper,'data-evidence-packet':'',opacity:0});A(packet,{opacity:[0,1]},4,.01);A(packet,{cx:[805,480]},4,.45);A(packet,{cy:[405,422]},4.45,.1);A(packet,{cx:[480,180]},4.55,.45);
|
||||
return s.tl;
|
||||
});
|
||||
register('delivery-cycle',(svg,c,kit)=>{
|
||||
const s=scene(svg,c,kit,'DELIVERY CYCLE / SPLIT, JOIN, ACCEPT, LEARN',['Scope','Parallel design','Join delivery','Accept / release','Feedback']);
|
||||
const {E,R,T,P,A,draw}=s;
|
||||
const pts=[[90,250],[245,250],[430,150],[430,350],[625,250],[815,250],[815,410],[245,410]];
|
||||
const labels=['Intent','Scope','Architecture','Experience','Delivery','Acceptance','Release','Learning'];
|
||||
const edges=[[0,1],[1,2],[1,3],[2,4],[3,4],[4,5],[5,6],[6,7],[7,0]];
|
||||
const times=[0,1,1,2,2,3,3.45,4,4.5];
|
||||
edges.forEach(([a,b],i)=>{
|
||||
const [x,y]=pts[a],[xx,yy]=pts[b],dx=xx-x,dy=yy-y,len=Math.hypot(dx,dy),r=23;
|
||||
const d=`M${x+dx*r/len} ${y+dy*r/len} L${xx-dx*r/len} ${yy-dy*r/len}`;
|
||||
P(d,C.blue,svg,{'stroke-opacity':.2});draw(d,times[i],i<5?.65:.45,i>6?C.blue:C.copper,{'data-edge':`${a}-${b}`});
|
||||
const ex=xx-dx*r/len,ey=yy-dy*r/len;P(`M${ex-dx*8/len-dy*4/len} ${ey-dy*8/len+dx*4/len} L${ex} ${ey} L${ex-dx*8/len+dy*4/len} ${ey-dy*8/len-dx*4/len}`,C.blue);
|
||||
});
|
||||
pts.forEach(([x,y],i)=>{E('circle',{cx:x,cy:y,r:23,fill:C.bg,stroke:i===6?C.copper:C.blue,'stroke-width':3});T(x,y+(i===6||i===7?34:-36),labels[i],18,svg,{'text-anchor':'middle'});});
|
||||
T(324,94,'Two design streams, one delivery join',18);
|
||||
T(510,392,'Feedback informs the next cycle',17);
|
||||
return s.tl;
|
||||
});
|
||||
register('connected-memory',(svg,c,kit)=>{
|
||||
const s=scene(svg,c,kit,'CONNECTED MEMORY / LEARN, RETAIN, REVIEW, REUSE',['Learn','Retain','Review','Reuse','Source access']);
|
||||
const {E,R,T,P,G,A,draw}=s;
|
||||
T(160,98,'LEARNING',18,svg,{'text-anchor':'middle'});T(475,98,'RETAINED KNOWLEDGE',18,svg,{'text-anchor':'middle'});T(790,98,'REVIEWED INSTRUCTIONS',18,svg,{'text-anchor':'middle'});
|
||||
robot(s,160,177,1.7);
|
||||
// Open book and layered instruction sheets stay distinct, as in the source.
|
||||
P('M415 140 L475 151 L535 140 V202 L475 213 L415 202 Z',C.blue,svg,{fill:C.white});P('M475 151 V213',C.copper);
|
||||
for(let j=0;j<4;j++)P(`M424 ${156+j*11} L465 ${164+j*11} M485 ${164+j*11} L526 ${156+j*11}`);
|
||||
for(let j=2;j>=0;j--)R(754+j*8,135-j*7,70,73,j?C.pale:C.white,svg,{stroke:C.blue,rx:1});T(765,166,'GUIDE',15);P('M764 179 H810 M764 190 H800',C.copper);
|
||||
draw('M212 165 Q310 125 415 165',0,1,C.blue);T(265,126,'Capture lessons',16);
|
||||
draw('M535 165 Q640 125 754 165',1,1);T(585,126,'Human review',16);
|
||||
const review=R(750,218,100,23,'#b7dfcf');T(759,235,'Reviewed',14);A(review,{opacity:[.2,1]},2,.7);
|
||||
draw('M840 173 H906 V274 H245 V205 H211',3,.9);P('M221 199 L211 205 L221 211',C.copper);T(340,263,'Reuse approved instructions on a later task',17);
|
||||
T(80,324,'INDEPENDENT EXTERNAL SOURCES',18);T(80,350,'Project sources available to the agent',16);
|
||||
const xs=[110,290,470,650,830],names=['Documents','Repositories','Services','Records','Research'];
|
||||
P('M48 377 H830 M48 377 V177 H109',C.blue,svg,{'data-access-trunk':''});
|
||||
xs.forEach((x,i)=>{
|
||||
P(`M${x} 395 V377`,C.blue,svg,{'data-source-branch':i});
|
||||
R(x-66,395,132,44,C.white,svg,{stroke:C.blue,'data-source':i});T(x,422,names[i],16,svg,{'text-anchor':'middle'});
|
||||
const route=`M${x} 395 L${x} 377 L48 377 L48 177 L109 177`;
|
||||
const track=P(route,C.blue,svg,{opacity:0,'data-source-route':i,'data-from':`source-${i}`,'data-to':'agent'});
|
||||
const packet=E('rect',{x:-4,y:-3,width:8,height:6,fill:C.white,stroke:C.blue,'data-source-packet':i},'');
|
||||
// Actual arc-length motion: each independent source reaches the same agent port.
|
||||
s.tl.add(packet,{...kit.anime.svg.createMotionPath(track),duration:s.u*1.5,ease:'linear'},s.u*(4+i*.1));
|
||||
});
|
||||
return s.tl;
|
||||
});
|
||||
})();
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Infrastructure — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="infrastructure"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Infrastructure</span></nav><h1>Infrastructure</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="infrastructure"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Infrastructure</span></nav><h1>Infrastructure</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Logistics — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="logistics"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Logistics</span></nav><h1>Logistics</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="logistics"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Logistics</span></nav><h1>Logistics</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Manufacturing — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="manufacturing"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Manufacturing</span></nav><h1>Manufacturing</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="manufacturing"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Manufacturing</span></nav><h1>Manufacturing</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Oil & gas — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="oil-gas"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Oil & gas</span></nav><h1>Oil & gas</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="oil-gas"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Oil & gas</span></nav><h1>Oil & gas</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Pharma — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="pharma"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Pharma</span></nav><h1>Pharma</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="pharma"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Pharma</span></nav><h1>Pharma</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Presentation patterns — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="presentation-patterns"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Presentation patterns</span></nav><h1>Presentation patterns</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
</pre></details></footer>
|
||||
<script src="../catalog-data.js"></script><script src="../gallery.js"></script></body></html>
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Retail — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="retail"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Retail</span></nav><h1>Retail</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="retail"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Retail</span></nav><h1>Retail</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Telecommunications — Motion that explains</title><link rel="stylesheet" href="../gallery.css"></head>
|
||||
<body data-gallery="telecom"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Telecommunications</span></nav><h1>Telecommunications</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.6.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
<body data-gallery="telecom"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <span aria-current="page">Telecommunications</span></nav><h1>Telecommunications</h1><p>Open an example for use/avoid guidance, assumptions and named timeline beats.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
|
||||
|
||||
Copyright (c) 2025 Julian Garnier
|
||||
|
||||
|
||||
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+1459
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+1376
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+1514
File diff suppressed because it is too large.
Load diff
+1514
File diff suppressed because it is too large.
Load diff
+1514
File diff suppressed because it is too large.
Load diff
+1514
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+1376
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
+1369
File diff suppressed because it is too large.
Load diff
Loaded 100 of 127 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user