Agent skill · design visual · SylphAI-Inc
glowmotion
Create premium animated technical diagrams as single self-contained HTML+SVG files — flowcharts whose connectors visibly flow and architecture diagrams where requests travel as glowing comet dots with fading trails, pulsing module highlights, and a built-in light/dark theme toggle (dark themes midnight/neon/aurora + light theme daylight). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — especially when they mention "animated", "glowing", "premium", "flowing", "dynamic", "alive", "GIF-like", "light mode", "dark mode", or want a diagram for a landing page, README, docs, or product demo. Also converts Mermaid source (flowchart/graph and stateDiagram-v2) into an animated diagram. Prefer this over static output whenever the diagram represents anything that moves: requests, events, data, jobs, messages, or control flow.
Why this skill is useful
Provides a unique method for creating animated technical diagrams that the AI wouldn't reliably generate on its own.
What it needs
Requires python3 installed locally. About 4k tokens when loaded. Last updated 2026-08-06. 101 stars on the source repository.
What this skill does
Glowmotion Create premium animated technical diagrams as single self-contained HTML files. Glowmotion combines a deterministic layout engine (dashmotion lineage: the script computes every coordinate and route, mechanized checkers verify the result) with a lanshu-style premium finish (glow-trail dots, pulsing module halos, grain + vignette, icon glyphs, title capsule) — implemented entirely as vector SVG/CSS/SMIL, so the output stays a few KB, scales losslessly, respects reduced motion, and opens in any browser straight from the filesystem. Requires python3 (pure stdlib — no pip installs). There is no hand-layout fallback: the engine owns all geometry. Step 1 — Pick the mode and theme User wants Mode --- --- Steps, sequence, branching, state transitions ("what happens, in what order") flow Components, services, containment, topology ("what the system is made of") architecture Mixed request → architecture; the animated journey is the flow. Themes are light/dark switchable by default. Every generated file ships both a dark and a light palette and a ☀/☾ toggle button (top-right, next to pause); it opens following the viewer's OS prefers-color-scheme. You choose which two palettes pair up: darkTheme (default midnight) — dark options: midnight (deep navy, emerald flow), neon (pure-black canvas, green/purple/cyan/amber), aurora (teal/violet on deep slate). lightTheme (default daylight) — light options: daylight (soft blue-grey paper, saturated strokes, print-friendly). (only light theme today) defaultMode: "auto" (default, follow OS) "dark" "light" — which side the file opens on. Set "light" when the user asks for a light diagram. themeToggle: false — bake a single fixed theme (from theme/darkTheme), no button. Only when the user explicitly wants one locked look. Legacy theme (single key) still works: a light value fills the light slot, a dark value the dark slot, the other slot takes its default — still switchable. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills SylphAI-Inc/glowmotion