skills.rest
lsongdev
lsongdevCOMMUNITY
Explore all skills by this author →
Website𝕏@lsongdevGitHub

glowmotion

Generate animated technical diagrams as self-contained HTML files with SVG, CSS, and SMIL.

Updated Jul 20, 2026
Search Tags:#html#mermaid#flowchart#visualization#svg#architecture diagram#animated diagram
One-click install
npx skills add https://github.com/lsongdev/skills --skill glowmotion-lsongdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glowmotion
Source: https://github.com/lsongdev/skills/tree/main/glowmotion
Command: npx skills add https://github.com/lsongdev/skills --skill glowmotion-lsongdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating animated flowcharts and architecture diagrams usually requires manual layout work or produces static, generic output. This Skill lets you author a small semantic JSON graph while a deterministic Python engine computes all geometry, renders a single self-contained HTML file, and verifies the result with mechanized checkers. ## Core Features & Use Cases - Animated diagram generation: Produces flowcharts and architecture diagrams with flowing connectors, glowing comet-dot request paths, pulsing node halos, and a built-in light/dark theme toggle (midnight, neon, aurora, daylight palettes). - Mermaid conversion: Converts Mermaid flowchart/graph and stateDiagram-v2 source into animated diagrams while preserving every label verbatim, verified by a fidelity checker. - Mechanized verification: Ships geometry checks (overlaps, connectors crossing boxes, dots off paths, missing animation) and a Mermaid fidelity check that must pass before delivery. - Use Case: Ask for an animated architecture diagram of your system's request path in neon theme, and receive one ~20 KB HTML file that opens in any browser with no external assets. ## Quick Start Ask the agent to draw an animated architecture diagram of your service's request flow with a dark neon theme and a light/dark toggle.

Frequently Asked Questions about glowmotion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an animated architecture diagram as a single HTML file?▼

Author a semantic graph JSON describing nodes, edges, groups, and journeys, then run the layout script with python3 to render a self-contained HTML file. The engine computes all geometry and embeds the animation layer, themes, and toggle with no external assets.

How to convert Mermaid diagrams into animated HTML?▼

Provide Mermaid flowchart/graph or stateDiagram-v2 source and it is parsed into the graph JSON with all labels preserved verbatim. After rendering, a fidelity checker compares node labels, edge labels, group labels, and edge counts against the original source.

Does the diagram generator require npm or external dependencies?▼

No, the layout engine and checkers are pure Python standard library, requiring only python3. The output HTML has no external assets and only a small inline script for theme, pause, and reduced-motion handling.

Can the animated diagram support both light and dark mode?▼

Yes, every rendered file ships both a dark palette (midnight, neon, or aurora) and a light palette (daylight) with a toggle button. It opens following the viewer's OS prefers-color-scheme unless you pin a default mode.

Why does the diagram verification step fail before delivery?▼

The checker flags partial rect overlaps, connectors crossing boxes, dots drifting off paths, out-of-viewBox coordinates, and a missing animation layer. Fix violations by editing the graph JSON and re-rendering until it reports zero violations.

How do I export the animated diagram as a GIF or MP4?▼

Screen-record the open HTML file, or run headless capture with npx timecut at 3 seconds duration, then convert with ffmpeg to GIF. A 3-second capture loops seamlessly when all animation durations divide 3 seconds.

Related Skills

Explore More Design & Creative Skills→
ignidusignidus

knowledge-graph-visualizer

Convert knowledge-graph.json into Mermaid architecture, dependency, and data-flow diagrams.

Official
Advanced
aj47aj47
1

media-fetcher

Fetch logos, GIFs, landing pages, diagrams, and social videos for video clips.

Community
Advanced
jemcikjemcik
2

visual-verify

Automate browser-based visual verification of web interfaces via local Chrome sessions.

Community
Basic
HybridAIOneHybridAIOne
126

diagram

Generate and validate diagram-as-code artifacts in Mermaid, PlantUML, Graphviz DOT, or Excalidraw JSON.

Official
Advanced