pele-animate 0.15.0 → 0.16.1

package/README.md

@@ -16,7 +16,7 @@ Unofficial add-on; not affiliated with or endorsed by the Pele or Obsidian teams
 - **You set the order.** Nodes appear in the order of a `%% pa:` comment, or by default along the edges; edges draw in and labels fade in.
 - **Readers step through it.** Click (or Enter) starts step mode: previous / play-pause / next buttons, Space, ←/→ and Esc. Hover or focus sends tokens along the edges.
 - **Icons.** `@{ icon: "name" }` nodes use any of 4,368 [Tabler](https://github.com/tabler/tabler-icons) icons (loaded per category) or your own. Unknown names get a neutral rounded square.
-- Flowcharts and sequence diagrams. The finished picture is the resting state; `prefers-reduced-motion` turns the motion off. Light and dark themes.
+- Flowcharts, sequence diagrams, architecture diagrams, state diagrams, C4 context, block, class and ER diagrams, timelines, journeys, git graphs and Gantt charts. The finished picture is the resting state; `prefers-reduced-motion` turns the motion off. Light and dark themes.
 - The source stays valid Mermaid. One catch: GitHub's own Mermaid renderer does not know the icon names and draws "?" boxes, so the icon examples in this repository are shown as source text.
 
 ## Install

package/docs/diagram-types.md

@@ -7,16 +7,38 @@ section: Start
 
 # Diagram types
 
-pele-animate supports **flowcharts** and **sequence diagrams**. Pele renders other diagram types too, but they are outside what
-pele-animate is built for.
+pele-animate animates these Mermaid diagram types. Each one plays an intro when it scrolls into view and, on click, steps through its
+items with previous / play / next controls.
+
+| Type | Each step reveals | Pins, icons | Remarks |
+|---|---|---|---|
+| [Flowchart](#flowcharts)<br>`flowchart` | Nodes level by level, edges from their source | Pins and icons | The fullest support: groups, edge labels, large icon nodes. |
+| [Sequence diagram](#sequence-diagrams)<br>`sequenceDiagram` | Actors, then one message at a time | Neither | The order is the source order; reordering messages changes what the diagram says. |
+| [Architecture](#architecture-diagrams)<br>`architecture-beta` | Services level by level, edges from their source | Pins and icons | Icons are written `(name)` and are small and fixed in size. |
+| [State diagram](#state-diagrams)<br>`stateDiagram-v2` | States and transitions from the start marker | Pins | Markers are `root_start` and `root_end`. Composite states are untested. |
+| [C4 context](#c4-context-diagrams)<br>`C4Context` | People and systems, then relationships | Pins | Only `C4Context` is checked. Keep `Rel` labels short. |
+| [Block diagram](#block-diagrams)<br>`block-beta` | Blocks and arrows from their source | Pins | Put linked blocks in the same row or column. |
+| [Class diagram](#class-diagrams)<br>`classDiagram` | Classes and relationships, from the class written first | Pins | `A <\|-- B` reveals `A`, then `B`. |
+| [ER diagram](#er-diagrams)<br>`erDiagram` | Entities and relationships, from the entity written first | Pins | Same written-order rule as class diagrams. |
+| [Timeline](#timelines-journeys-git-graphs-and-gantt-charts)<br>`timeline` | One time period with its events | Neither | Section headers stay visible. |
+| [User journey](#timelines-journeys-git-graphs-and-gantt-charts)<br>`journey` | One task, its face and the line joining it to the last | Neither |  |
+| [Git graph](#timelines-journeys-git-graphs-and-gantt-charts)<br>`gitGraph` | One commit with its edge; a branch with its first commit | Neither | Cherry-picks and tags are untested. |
+| [Gantt chart](#timelines-journeys-git-graphs-and-gantt-charts)<br>`gantt` | One task, top to bottom | Neither | `todayMarker` and parallel tasks are untested. |
+
+Pins are `%% pa:` comments; see [step order](./step-order.md). Types without pins use their source order. Icons are set up in
+[icons](./icons.md). Pele renders the other Mermaid types too (pie, quadrant, radar and the rest), but pele-animate is not built
+for them; see [Everything else](#everything-else).
 
 ## Flowcharts
 
 Nodes appear in step order, edges draw from their source node, and edge labels fade in. Groups (`subgraph`) and their titles
 are kept. Icon nodes (`@{ icon }`) work here; see [icons](./icons.md).
 
+The pins below put "Serve" (the cache hit) before "Fetch", then draw the `Fetch` to `Serve` edge as its own last step. Without them, `Serve` and `Fetch` would appear together.
+
 ```mermaid live
 flowchart LR
+  %% pa: 1=A 2=B 3=C 4=D 5=D>C
   A[Client] --> B{Cached?}
   B -->|yes| C[Serve]
   B -->|no| D[Fetch] --> C
@@ -24,11 +46,13 @@ flowchart LR
 
 ## Sequence diagrams
 
-Actors appear first, then the messages in order. Participant boxes in a row get the same height, and group titles are bold.
+Actors appear first, then one step per message in source order, so a cache miss reads as five short steps. Participant boxes in a row get the same height, and group titles are bold.
 
 ```mermaid live
 sequenceDiagram
   Client->>API: request
+  API->>Cache: lookup
+  Cache-->>API: miss
   API->>Database: query
   Database-->>API: rows
   API-->>Client: response
@@ -36,8 +60,208 @@ sequenceDiagram
 
 **Limit:** Pele ignores `@{ icon }` on sequence participants (the box shows its id), so icons apply to flowcharts only.
 
+## Architecture diagrams
+
+`architecture-beta`: services in groups, joined by edges. Services appear in step order like flowchart nodes, groups stay visible,
+and `%% pa:` pins work the same way. The icon in parentheses is looked up in your icon packs, so Tabler names and `doverunner-*`
+names work (import the packs as for [icons](./icons.md)). The pins here follow a request: the user, the CDN, the API, the cache and database together, then the queue and worker.
+
+```mermaid-icons live
+architecture-beta
+  %% pa: 1=user 2=cdn 3=api 4=cache,db 5=queue 6=worker
+  group edge(cloud)[Edge]
+  group core(cloud)[Core]
+  service user(device-desktop)[User]
+  service cdn(cloud-computing)[CDN] in edge
+  service api(server)[API] in core
+  service cache(bolt)[Cache] in core
+  service db(database)[Database] in core
+  service queue(mail)[Queue] in core
+  service worker(settings)[Worker] in core
+  user:R --> L:cdn
+  cdn:R --> L:api
+  api:T --> B:cache
+  api:B --> T:db
+  api:R --> L:queue
+  queue:R --> L:worker
+```
+
+Icons here are small and fixed in size; `form` and `h` apply to flowcharts only. Edges are read from their written direction
+(`user:R --> L:cdn` is user to cdn). A node id containing `-` can be mistaken for two ids on an edge, so use plain ids.
+
+## State diagrams
+
+`stateDiagram-v2`: states appear in step order, transitions draw from their source state, and transition labels fade in. The
+start and end markers are nodes too, with the ids `root_start` and `root_end`, so pins can name them.
+
+```mermaid live
+stateDiagram-v2
+  %% pa: 1=root_start 2=Idle 3=Loading 4=Playing 5=Paused 6=Error 7=root_end
+  [*] --> Idle
+  Idle --> Loading: play
+  Loading --> Playing: ready
+  Playing --> Paused: pause
+  Paused --> Playing: resume
+  Loading --> Error: fail
+  Error --> Idle: retry
+  Playing --> [*]: stop
+```
+
+The pins give each state its own step, in the order a viewer meets them. Without pins the order is breadth-first from the start marker, which shows states at the same distance together (here `Playing` and `Error`). Pele gives
+state edges no readable ids, so pele-animate finds each transition's ends from where its path starts and stops. Composite
+states and forks are untested. State diagrams take no icons.
+
+## C4 context diagrams
+
+`C4Context`: people and systems appear in step order and each `Rel` draws from its source, with its label. Pins use the ids you
+give `Person(...)` and `System(...)`; an edge pin is `3=app>drm`. The example adds the DRM service, CDN and analytics one at a time, then the operator who reads the analytics.
+
+```mermaid live
+C4Context
+  %% pa: 1=viewer 2=app 3=drm 4=cdn 5=analytics 6=admin
+  Person(viewer, "Viewer", "Watches video")
+  System(app, "Player app", "Plays protected video")
+  System_Ext(drm, "DRM service", "Issues licenses")
+  System_Ext(cdn, "CDN", "Delivers segments")
+  System(analytics, "Analytics", "Tracks playback")
+  Person(admin, "Operator", "Reviews usage")
+  Rel(viewer, app, "watches")
+  Rel(app, drm, "license")
+  Rel(app, cdn, "segments")
+  Rel(app, analytics, "events")
+  Rel(admin, analytics, "reviews")
+  UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+```
+
+Pele lays C4 diagrams out in rows, so a long label between two boxes in the same row can leave no room for the arrowhead:
+keep `Rel` labels short. Only `C4Context` has been checked; the other C4 types and boundaries are untested. C4 shapes take no icons.
+
+## Block diagrams
+
+`block-beta`: blocks appear in step order and each arrow draws from its source block. Pins use the block ids.
+
+```mermaid live
+block-beta
+  columns 4
+  %% pa: 1=src 2=enc 3=pkg 4=cdn 5=store
+  src["Source"] enc["Encode"] pkg["Package"] cdn["CDN"]
+  space space store[("Storage")] space
+  src --> enc
+  enc --> pkg
+  pkg --> cdn
+  pkg --> store
+```
+
+Pele routes arrows between blocks in straight lines or short bends, so place linked blocks in the same row or column; a diagonal
+neighbour can give a bent arrow that runs along another one. Block diagrams take no icons.
+
+## Class diagrams
+
+`classDiagram`: classes appear in step order, relationships draw from the class written first. `Media <|-- Video` reveals `Media`
+and then `Video`, whichever way the arrowhead points. Pins use the class names; the example shows the base class, its subtypes, then the classes that use them.
+
+```mermaid live
+classDiagram
+  %% pa: 1=Media 2=Video,Audio 3=Player 4=License 5=Session
+  Media <|-- Video
+  Media <|-- Audio
+  Player --> Media : plays
+  Player --> License : needs
+  License --> Session : opens
+  Media : +id
+  Media : +title
+  Player : +play()
+  License : +expiry
+```
+
+## ER diagrams
+
+`erDiagram`: entities appear in step order, relationships draw from the entity written first (`CUSTOMER ||--o{ ORDER` reveals
+`CUSTOMER`, then `ORDER`). The example reads from the customer down to the supplier.
+
+```mermaid live
+erDiagram
+  %% pa: 1=CUSTOMER 2=ORDER 3=LINE 4=PRODUCT 5=SUPPLIER
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE : contains
+  LINE }o--|| PRODUCT : lists
+  PRODUCT }o--|| SUPPLIER : "supplied by"
+```
+
+Neither takes icons.
+
+## Timelines, journeys, git graphs and Gantt charts
+
+These have no edges to follow, so each steps through its items in reading order and `%% pa:` pins do nothing (as for sequence
+diagrams). Section headers, axes, grids and legends stay visible.
+
+- **`timeline`:** one step per time period, with its events. List periods in time order.
+
+```mermaid live
+timeline
+  title Product history
+  section Build
+    2019 : Prototype
+    2020 : Private beta : First customers
+  section Grow
+    2021 : Public launch
+    2023 : Mobile apps : Offline mode
+    2025 : Global rollout
+```
+
+- **`journey`:** one step per task: the task, its face, and the line segment that joins it to the task before.
+
+```mermaid live
+journey
+  title Watching a protected video
+  section Find
+    Open the app: 5: Viewer
+    Pick a title: 4: Viewer
+  section Play
+    Wait for the license: 2: Viewer, App
+    Playback starts: 5: Viewer
+  section Finish
+    Resume later: 4: Viewer
+    Rate the title: 3: Viewer
+```
+
+- **`gitGraph`:** one step per commit in the order written, with the edge that ends on it. A branch's label and lane appear with
+  its first commit.
+
+```mermaid live
+gitGraph
+  commit id: "init"
+  branch feature
+  commit id: "api"
+  commit id: "ui"
+  checkout main
+  commit id: "fix"
+  merge feature id: "m"
+  branch release
+  commit id: "v1"
+```
+
+- **`gantt`:** one step per task, top to bottom: write tasks in the order you want them to appear.
+
+```mermaid live
+gantt
+  dateFormat YYYY-MM-DD
+  section Plan
+    Scope :a1, 2024-01-01, 3d
+    Design :after a1, 4d
+  section Build
+    Code :b1, 2024-01-08, 8d
+    Review :after b1, 2d
+  section Ship
+    Test :2024-01-18, 4d
+    Release :2024-01-22, 1d
+```
+
+None of these take icons. Only these small examples have been checked in a browser; long diagrams, `todayMarker`, tags, cherry-picks and
+parallel tasks are untested.
+
 ## Everything else
 
-Other Mermaid types (class, state, ER, gantt, pie and the rest) render through Pele as usual. pele-animate is not designed for
+Other Mermaid types (pie, quadrant, radar and the rest) render through Pele as usual. pele-animate is not designed for
 them and its behavior on them is untested, so use plain Pele for those. Step mode has been checked in a browser on
-flowcharts only; sequence diagrams have not been checked the same way yet.
+the types above only; sequence diagrams have not been checked the same way yet.

package/docs/faq.md

@@ -22,7 +22,7 @@ you want to explain in order.
 **How big is it?** The core (`pele-animate.js` plus CSS) is about 20 KB unminified. Icon packs are separate modules, so you only
 ship the categories you import (the largest, `system`, is about 199 KB unminified).
 
-**Which diagrams does it support?** Flowcharts and sequence diagrams ([diagram types](./diagram-types.md)).
+**Which diagrams does it support?** Flowcharts, sequence diagrams, architecture diagrams, state diagrams, C4 context, block, class and ER diagrams, timelines, journeys, git graphs and Gantt charts ([diagram types](./diagram-types.md)).
 
 **Can I use my own icons?** Yes ([custom icons](./custom-icons.md)).
 

package/docs/step-order.md

@@ -14,6 +14,12 @@ them. By default, the order follows the edges. A `%% pa:` comment lets you set i
 
 - **Flowchart:** nodes appear by level, counting from the nodes nothing points to. Each edge draws from its source once the source
   is on screen, and its target appears as the edge lands. Branches of a decision appear together.
+- **Architecture diagram:** like a flowchart: services appear by level, edges follow their written direction, pins work the same way.
+- **Timeline, journey, git graph, Gantt chart:** one step per item in reading order (period, task, commit, task); pins do nothing.
+- **Class and ER diagrams:** like a flowchart, but a relationship runs from the class or entity written first.
+- **Block diagram:** like a flowchart, from the blocks nothing points to.
+- **C4 context diagram:** like a flowchart, from the people and systems nothing points to.
+- **State diagram:** like a flowchart, starting from the start marker (`root_start`); the end marker is `root_end`.
 - **Sequence diagram:** actors first, then the messages in order.
 
 ## Pins

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pele-animate",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "description": "Step-by-step animated Mermaid diagrams with icons: an unofficial add-on for the Pele renderer.",
   "type": "module",
   "license": "MIT",

package/pele-animate.css

@@ -2,14 +2,16 @@
 .pa-ready:not(.pa-in):not(.pa-step) .pele-node,
 .pa-ready:not(.pa-in):not(.pa-step) .pele-edge-label,
 .pa-ready:not(.pa-in):not(.pa-step) .pele-lifeline,
-.pa-ready:not(.pa-in):not(.pa-step) .pele-marker { opacity: 0; }
+.pa-ready:not(.pa-in):not(.pa-step) .pele-marker,
+.pa-ready:not(.pa-in):not(.pa-step) .pa-item { opacity: 0; }
 .pa-ready:not(.pa-in):not(.pa-step) .pele-edge > path:not(.pele-marker) { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
 
 /* Keyframes carry the dash, so edges that are dashed in the diagram go back to their own dash pattern afterwards. */
 .pa-ready.pa-in:not(.pa-step) .pele-node,
 .pa-ready.pa-in:not(.pa-step) .pele-edge-label,
 .pa-ready.pa-in:not(.pa-step) .pele-lifeline,
-.pa-ready.pa-in:not(.pa-step) .pele-marker { animation: pa-fade .4s ease-out backwards; animation-delay: var(--d, 0s); }
+.pa-ready.pa-in:not(.pa-step) .pele-marker,
+.pa-ready.pa-in:not(.pa-step) .pa-item { animation: pa-fade .4s ease-out backwards; animation-delay: var(--d, 0s); }
 .pa-ready.pa-in:not(.pa-step) .pele-edge > path:not(.pele-marker) { animation: pa-draw .4s ease-out backwards; animation-delay: var(--d, 0s); }
 .pa-ready.pa-done:not(.pa-step) * { animation: none !important; }
 @keyframes pa-fade { from { opacity: 0; } }
@@ -19,7 +21,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .pa-ready * { animation: none !important; }
-  .pa-ready:not(.pa-step) .pele-node, .pa-ready:not(.pa-step) .pele-edge-label, .pa-ready:not(.pa-step) .pele-lifeline, .pa-ready:not(.pa-step) .pele-marker { opacity: 1 !important; }
+  .pa-ready:not(.pa-step) .pele-node, .pa-ready:not(.pa-step) .pele-edge-label, .pa-ready:not(.pa-step) .pele-lifeline, .pa-ready:not(.pa-step) .pele-marker, .pa-ready:not(.pa-step) .pa-item { opacity: 1 !important; }
   .pa-ready .pele-edge > path { stroke-dasharray: none; stroke-dashoffset: 0 !important; }
 }
 
@@ -51,6 +53,9 @@
 /* Edge labels sit on the line; give them the panel color so the line doesn't strike through the text. */
 .pa-scene .pele-edge-label rect { fill: var(--pa-bg); }
 
+/* Pele colours text on solid fills (timeline periods, gantt bars, git branch tags) with --_bg, which the scene makes transparent: use the panel surface instead. */
+.pa-scene text[fill="var(--_bg)"] { fill: var(--pele-surface); }
+
 /* Group and box titles read as headings. */
 :where(.pa-scene) .pele-cluster-label { font-weight: 700; }
 

package/pele-animate.js

@@ -16,11 +16,33 @@ export function parseOrder(source = '') {
   return levels;
 }
 
+// Edge ids by diagram type: flowchart `L_A_B_0`, architecture and C4 `A-B` (repeat edges get `-N`), block `1-A-B`, class `id_A_B_1`,
+// ER `id_entity-A-0_entity-B-1_0`. Ends follow the written order (`A <|-- B` is A, then B).
+const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 function endpoints(edgeId, ids) {
-  for (const s of ids) for (const d of ids) if (new RegExp(`^L_${s}_${d}_\\d+$`).test(edgeId)) return [s, d];
+  for (const s of ids)
+    for (const d of ids)
+      if (new RegExp(`^(?:L_${esc(s)}_${esc(d)}_\\d+|(?:\\d+-)?${esc(s)}-${esc(d)}(?:-\\d+)?|id_${esc(s)}_${esc(d)}_\\d+|id_entity-${esc(s)}-\\d+_entity-${esc(d)}-\\d+_\\d+)$`).test(edgeId)) return [s, d];
   return null;
 }
 
+// State diagrams name edges `edge0`, `edge1`, ... with no ends in the id, so read the ends off the geometry:
+// the node nearest to where the path starts (source) and ends (target).
+function geoEndpoints(edge, boxes) {
+  const path = edge.querySelector('path:not(.pele-marker)');
+  if (!path) return null;
+  const near = (pt) => {
+    let best = null, bd = 12; // an end more than 12 px from every node is not an end
+    for (const [id, b] of boxes) {
+      const d = Math.hypot(Math.max(b.x - pt.x, 0, pt.x - b.x - b.width), Math.max(b.y - pt.y, 0, pt.y - b.y - b.height));
+      if (d < bd) { bd = d; best = id; }
+    }
+    return best;
+  };
+  const s = near(path.getPointAtLength(0)), d = near(path.getPointAtLength(path.getTotalLength()));
+  return s && d ? [s, d] : null;
+}
+
 function bfs(ids, pairs, pinned) {
   const level = new Map(pinned);
   const hasIn = new Set(pairs.map(([, d]) => d));
@@ -97,11 +119,80 @@ export function prepare(source = '') {
 }
 
 
+// Diagrams with no edges to follow (timeline, journey, gitGraph, gantt) step through their items in reading order.
+// Returns [[element, ...], ...], one array per step, or null for any other diagram.
+const pts = (path) => path.getAttribute('d').match(/-?[\d.]+/g)?.map(Number) ?? [];
+function sequentialSteps(svg) {
+  const all = (sel) => [...svg.querySelectorAll(sel)];
+  if (svg.classList.contains('pele-timeline')) return all('.pele-period').map((p) => [p]);
+  if (svg.classList.contains('pele-gantt')) return all('.pele-task').map((t) => [t]);
+  if (svg.classList.contains('pele-journey')) {
+    // Wide: tasks, faces and one polyline are separate. Narrow (vertical list): each step holds its face, edges join the steps.
+    const tasks = all('.pele-task, .pele-journey-step');
+    const faces = all('.pele-face').filter((f) => !f.closest('.pele-node'));
+    // The satisfaction line is one polyline `M x,yL x,y...`: split it so each segment arrives with its task.
+    const segs = [];
+    for (const line of all('path.pele-edge')) {
+      const d = line.getAttribute('d');
+      if (!/^M[-\d.,]+(L[-\d.,]+)+$/.test(d)) { segs.push(line); continue; }
+      const p = d.slice(1).split('L');
+      for (let i = 1; i < p.length; i++) {
+        const seg = line.cloneNode();
+        seg.setAttribute('d', `M${p[i - 1]}L${p[i]}`);
+        line.before(seg);
+        segs.push(seg);
+      }
+      line.remove();
+    }
+    return tasks.map((t, i) => [t, faces[i], segs[i - 1]].filter(Boolean));
+  }
+  if (svg.classList.contains('pele-gitGraph')) {
+    const commits = all('.pele-commit');
+    const at = (c) => { const e = c.querySelector('circle'); return [+e.getAttribute('cx'), +e.getAttribute('cy')]; };
+    const steps = commits.map((c) => [c]);
+    // an edge arrives with the commit it ends on
+    for (const e of all('.pele-edge')) {
+      const path = e.matches('path') ? e : e.querySelector('path');
+      const end = path.getPointAtLength(path.getTotalLength());
+      let best = steps.length - 1, bd = Infinity;
+      commits.forEach((c, i) => { const [x, y] = at(c), d = Math.hypot(x - end.x, y - end.y); if (d < bd) { bd = d; best = i; } });
+      steps[best]?.push(e);
+    }
+    // a branch (label and lane) appears with its first commit: the commit whose y is on the lane
+    for (const b of all('.pele-branch')) {
+      const y = pts(b.querySelector('.pele-lane'))[1];
+      const first = commits.findIndex((c) => Math.abs(at(c)[1] - y) < 1);
+      steps[first < 0 ? 0 : first].push(b);
+    }
+    return steps;
+  }
+  return null;
+}
+
+// Intro for sequentialSteps: each step fades in after the one before; the same steps drive step mode.
+function introSteps(svg, steps) {
+  const u = Math.min(UNIT, MAX_INTRO / Math.max(1, steps.length));
+  steps.forEach((els, i) => els.forEach((el) => { el.classList.add('pa-item'); el.style.setProperty('--d', `${i * u}s`); }));
+  svg.paSteps = steps.map((els) => els.map((el) => [el, [el]]));
+  reveal(svg);
+}
+
+function reveal(svg) {
+  if (!('IntersectionObserver' in window)) return svg.classList.add('pa-in');
+  svg.classList.remove('pa-in');
+  const io = new IntersectionObserver(([en]) => {
+    if (en.isIntersecting) { svg.classList.add('pa-in'); io.disconnect(); }
+  }, { threshold: 0.3 });
+  io.observe(svg);
+}
+
 export function animate(svg, { hover = svg, source = '' } = {}) {
   fitGlyphs(svg);
   equalizeActors(svg);
   svg.querySelectorAll('.pa-dot').forEach((d) => d.remove());
   svg.classList.add('pa-ready');
+  const seq = sequentialSteps(svg);
+  if (seq) return introSteps(svg, seq);
   const nodes = [...svg.querySelectorAll('.pele-node')];
   const edges = [...svg.querySelectorAll('.pele-edge')];
   const ids = [...new Set(nodes.map((n) => n.dataset.id))];
@@ -116,7 +207,17 @@ export function animate(svg, { hover = svg, source = '' } = {}) {
     edges.forEach((e, i) => { times.set(e, 0.5 + i * u); step.set(e, i + 1); });
     nodes.forEach((n) => step.set(n, 0));
   } else {
-    const pairs = edges.map((e) => endpoints(e.dataset.id, ids));
+    const boxes = new Map();
+    const pairs = edges.map((e) => {
+      const found = endpoints(e.dataset.id, ids);
+      if (found) return found;
+      if (!boxes.size)
+        for (const n of nodes) {
+          const b = n.getBBox(), t = n.transform.baseVal.consolidate()?.matrix;
+          boxes.set(n.dataset.id, { x: b.x + (t?.e ?? 0), y: b.y + (t?.f ?? 0), width: b.width, height: b.height });
+        }
+      return geoEndpoints(e, boxes);
+    });
     const level = bfs(ids, pairs.filter(Boolean), parseOrder(source));
     const u = Math.min(UNIT, MAX_INTRO / (Math.max(0, ...level.values()) + 1));
     const k = u / UNIT;
@@ -184,12 +285,7 @@ export function animate(svg, { hover = svg, source = '' } = {}) {
   hover.addEventListener('focusin', play);
   hover.addEventListener('focusout', stop);
 
-  if (!('IntersectionObserver' in window)) return svg.classList.add('pa-in');
-  svg.classList.remove('pa-in');
-  const io = new IntersectionObserver(([en]) => {
-    if (en.isIntersecting) { svg.classList.add('pa-in'); io.disconnect(); }
-  }, { threshold: 0.3 });
-  io.observe(svg);
+  reveal(svg);
 }
 
 const STEP_MS = 1200; // autoplay pace in step mode