glowmotion

Premium animated technical diagrams as single self-contained HTML+SVG files — a Claude skill.

glowmotion is the merge of two earlier experiments:

• dashmotion contributed the engineering core: a deterministic pure-stdlib layout engine (longest-path layering, orthogonal box-safe routing, nested boundaries), the one-self-contained-HTML output contract, and mechanized verification (check_diagram.py C1–C10 structural checks, check_fidelity.py Mermaid label fidelity).
• lanshu-animated-architecture-diagram contributed the look: glowing comet dots with fading trails, pulsing module highlights, film grain + vignette finish, icon glyphs, the title highlight capsule and signature slot — all reimplemented here as vector SVG/CSS/SMIL instead of pre-rendered GIF frames, so the premium look costs kilobytes, scales losslessly, can be paused, and respects prefers-reduced-motion.

What you get

• Two modes — flow (flowcharts, state machines) and architecture (systems, topologies, nested boundaries), plus Mermaid input (flowchart/graph, stateDiagram-v2) with verbatim-label fidelity checking.
• Light/dark toggle, built in — every file ships both a dark and a light palette and a ☀/☾ button; it opens on the viewer's OS preference and switches live (all colors are CSS variables, so one flip repaints CSS + SVG together). Dark palettes: midnight (navy/emerald), neon (black canvas, green/purple/cyan/amber), aurora (teal/violet). Light palette: daylight.
• A real animation layer — flowing dashed connectors, per-journey glow dots with trails, staggered pulsing halos on the nodes a request touches.
• Determinism + verification — the engine owns every coordinate; the bundled checkers are the delivery gate (including C10: a diagram whose animation layer went missing fails).

Install

glowmotion is a Claude skill — install it once and Claude Code picks it automatically whenever you ask for an animated diagram.

With the skills CLI (recommended):

npx skills add shangliy/glowmotion       # this project only (.claude/skills/)
npx skills add -g shangliy/glowmotion    # global, all projects (~/.claude/skills/)

Manually (clone + symlink):

git clone https://github.com/shangliy/glowmotion.git
ln -s "$(pwd)/glowmotion/skills/glowmotion" ~/.claude/skills/glowmotion

Start a new Claude Code session and ask for e.g. "an animated architecture diagram of our checkout system, neon theme" — or invoke it explicitly with /glowmotion. To upgrade later: npx skills update (CLI install) or git pull (manual install). To remove: delete the symlink/skill folder.

Usage

# author a semantic graph JSON (see skills/glowmotion/references/graph-format.md), then:
python3 skills/glowmotion/scripts/layout.py graph.json --render diagram.html
python3 skills/glowmotion/scripts/check_diagram.py diagram.html          # must print 0 violations
python3 skills/glowmotion/scripts/check_fidelity.py src.mmd diagram.html # mermaid input only

Demo outputs live in examples/ (arch-neon.html, flow-aurora.html, mermaid-midnight.html) — open them in any browser.

Requirements

python3 (stdlib only). No pip installs, no fonts to install, no network.