pele-animate

Changelog

RSS feed · GitHub releases

All notable changes to pele-animate are recorded here.

The format follows Keep a Changelog. The project stays on 0.x: minor versions may change behavior, so pin a range such as ^0.15.0 and bump it deliberately.

Unreleased

0.15.0 - 2026-10-24

Added

  • prepare(source): pads icon-node labels narrower than h so Pele's layout box is as wide as the drawn icon. Without it, edge ends and arrowheads land under the icon. Use mount(el, prepare(src), { icons }).
  • Website: an icon browser at /icons/ (search by name and tag, category chips, stroke-width slider, click to copy an @{ icon } snippet and the import line) and /icons.json ({ version, icons: [{ name, category, tags }] }) for agents.

Changed

  • README: badges, links to the website and docs, a hero animation, generic comparison examples (client, API, auth server), and icon examples shown as source text because GitHub's Mermaid renderer cannot draw them.

0.14.0 - 2026-10-24

Types, documentation and agent skills. No breaking changes.

Added

  • TypeScript types (types/), wired through exports.
  • Documentation in docs/ (16 pages), shipped in the npm package; the README is now a short quickstart that links to it.
  • Agent skills in skills/, shipped in the npm package: pele-animate (install, mount, icons, step order, theme, verify in a browser, with a verify.js probe) and diagram-step-order.
  • pnpm test renders every Mermaid example in the docs, skills and README with Pele and checks icon names.

Changed

  • README is a short quickstart that describes the package as step order, step-by-step playback and icons (not a theme package).
  • The package description on npm says the same.

0.13.0 - 2026-10-24

Tabler icon packs, and the illustrated glyphs move to a doverunner- namespace. Two breaking renames: see Changed.

Changed

  • Breaking: every illustrated glyph is renamed doverunner-<name> (player → doverunner-player, lock → doverunner-lock, bits-a → doverunner-bits-a, and so on, 20 in all) so the plain names belong to the Tabler packs. Update @{ icon: "..." } in your sources.
  • Breaking: the seven glyphs that lived in pele-animate/glyphs moved into pele-animate/preset-doverunner; /glyphs is now only the registry (icons, registerGlyphs, registerTabler). Import the preset to get any doverunner-* glyph.

Added

  • icons() returns a neutral rounded square for unregistered names, instead of Pele's blank icon slot.
  • Tabler Icons packs: pele-animate/tabler/<category> (4,368 outline icons in 36 categories, from Tabler Icons 3.49.0, MIT). Stroke width follows the --pa-stroke CSS variable. registerTabler(pack, strokeWidth) in /glyphs; scripts/build-tabler.mjs regenerates the packs; license in THIRD-PARTY-NOTICES.md.

0.12.0 - 2026-10-24

Edge pins for step order, a step-order review skill, and tidier step controls.

Added

  • Edge pins: %% pa: 3=A>B pins the edge from A to B to step 3, so a reply between two visible nodes can play on its own step (the intro timing and step mode both follow it).
  • svg.paSteps is documented: the steps animate() builds, one array per step.
  • A diagram-step-order agent skill (.claude/skills/, with a steps.js probe) for reviewing and fixing step order against the page text. It is in the repo, not in the npm package.

Fixed

  • Step controls: the icons are SVG, so previous, play/pause, next and close line up vertically (text glyphs sat at different heights), and host-page sibling margins no longer push buttons down. Previous/next use aria-disabled instead of disabled, so hovering them at the first or last step shows their own tooltip rather than the container's.

0.11.0 - 2026-10-24

Step-by-step playback.

Added

  • Step-by-step playback: clicking a diagram (or pressing Enter) enters step mode with previous / play-pause / next controls. Each BFS level (flowcharts) or message (sequence diagrams) is one step. Keys: Space play/pause, ←/→ step, Esc leave.

Changed

  • README: Mermaid vs Pele vs pele-animate comparison with animated GIFs (examples/, regenerate with examples/capture.sh).
  • Step controls have their own tooltips; the ✕ button exits step mode instead of restarting it.
  • watch() click now enters step mode instead of replaying the intro. Pass { controls: false } as the third argument for the old click-to-replay.

0.10.0 - 2026-10-22

More glyphs for media and watermarking diagrams, and tidier sequence diagrams.

Added

  • Glyphs: cloud (generic pack); video, media, encoder, storage, plugin, variants (stacked A/B tiles) and watermark (pele-animate/preset-doverunner).
  • Sequence diagrams: participant boxes in a row share the height of the tallest one. Pele sizes each box to its own text, which left the rows ragged.

Changed

  • Group and box titles (.pele-cluster-label) are bold inside .pa-scene.

Notes

  • Sequence-diagram participants ignore @{ icon } in Pele (the box shows its id), so glyphs apply to flowcharts only. Participant boxes can still be grouped with Mermaid's box ... end.

0.9.0 - 2026-10-22

First public release. Animated, illustrated SVG scenes from plain Mermaid code, as a post-processor for Pele.

Added

  • watch(container, source?) and animate(svg, options): nodes appear in order (breadth-first from the sources), edges draw in, labels fade in. Sequence diagrams animate participants, lifelines, then messages in order.
  • Hover or keyboard focus sends a token along each edge in sequence; click or Enter replays the intro (replay(svg)). The idle state is the finished picture, and prefers-reduced-motion turns the motion off.
  • %% pa: 1=A 2=B comments pin nodes to animation steps (parseOrder(source) reads them).
  • @{ icon: "name" } nodes become illustrations from a glyph pack; form: "square", h: 88 gives a large frameless glyph. Unknown names fall back to Pele's plain node.
  • pele-animate/glyphs: icons resolver, registerGlyphs(pack, strokeWidth) and six generic glyphs (player, server, key, document, shield, phone).
  • pele-animate/preset-doverunner: package, token, lock, database, bits-a, bits-b.
  • pele-animate/style.css: tinted scene panel with light and dark themes. Override --pa-bg, --pa-solid, --pa-light or any --pele-* variable on the container; theme variables use :where() so host styles win.
  • Long diagrams cap the intro at about three seconds; smaller scene padding on phones.

Notes

  • Versions 0.1.0 to 0.8.2 were internal development milestones and were never published to npm; their work is part of 0.9.0.
  • Requires pele ^1.7.0 as a peer dependency.