diagram-animate

One animation definition, three outputs. animate.py adds CSS keyframes to the static SVG (plays in any browser and in a README <img>), then capture.mjs loads that same file in the system Chrome, sets every animation to an exact time per frame, and screenshots — so the GIF and MP4 are deterministic and can never drift from the SVG. Timing comes from the design system's motion tokens, so a theme change restyles the motion too.

Order, from the data-step / data-kind attributes the renderers in illustration-draw emit (other SVGs — Mermaid, Graphviz — reveal child by child in document order): title types in → groups fade up → cards land → connectors draw, arrowheads arrive when the line does → step badges pop → notes → the accent fills in last → hold.

When NOT to use