Content & Media Creation · iart-ai/explainer-video-skills
diagram-animation
This skill should be used when the user asks to "animate this diagram", "build a flowchart that reveals step by step", "animate an architecture/sequence diagram", "make a chart animate in", "grow the bars / draw the line / count up the number", "show data flowing along a connector", or "turn a static diagram into a guided reveal". Covers SVG, Framer Motion, D3, and Remotion.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The core execution principle throughout is "progressive reveal": advance only one information beat at a time, strictly following the reveal order of nodes → edges → labels, paired with "focus + context" (active elements at full opacity, remaining elements dimmed to ~0.35) to prevent the viewer from getting lost.
skills/diagram-animation/SKILL.md
Never show everything at once. Reveal in this order: **nodes → edges → labels**.
This is an authoritative rule rather than a suggestion: every subsequent code snippet (node scale-in, edge dashoffset, label fade) is merely an implementation of it.
Line-drawing animations uniformly adopt the stroke-dashoffset mechanism, using pathLength="1" to normalize geometric length into a 0→1 progress value so the same dash parameter set drives edges of any length.
skills/diagram-animation/SKILL.md
`pathLength="1"` lets one dash value drive any edge length.
Normalization is the reason it can drive three types of drawing—edges, polylines, and paths—using the exact same code.
Provides three minimal runnable implementations for chart animations: bars growing from the baseline via scaleY, polylines drawn on via getTotalLength + transition, and numbers interpolated/accumulated via rAF + easeOutCubic formatted with Intl.NumberFormat thousands separators.
skills/diagram-animation/SKILL.md
| Count-up | interpolate value with eased `t` | `easeOutCubic` |
A single Quick reference table pins each motion type to specific properties and easings, which is key to compiling aesthetic judgment into auditable parameters.
Deliveries are tracked by tiers: self-contained charts = single-file HTML (inline SVG + CDN libraries + a single inline script for the master timeline), and the page must support ?t=N freezing so headless screenshots capture deterministic frames.
skills/diagram-animation/SKILL.md
if (t !== null) { tl.pause(); tl.seek(parseFloat(t)); }
Freezing capability is written into the output contract rather than treated as an optional debugging tool—it is the prerequisite for the verification loop to function.
Verification loop = take headless screenshots at start, mid, and end timestamps, with visual inspection covering two aspects: fidelity (reveal order, connector endpoints, whether count-up lands on exact values) and artifacts (truncated labels, off-screen nodes, font FOUC, seam stuttering).
skills/diagram-animation/SKILL.md
count-ups land on the EXACT values
Listing "whether numbers match source values exactly" as an acceptance item directly targets the most common distortion in chart animations.
reduced-motion provides a final-state branch rather than a degraded animation: looping animations immediately use animation:none to display the fully composited final frame.
skills/diagram-animation/SKILL.md
`prefers-reduced-motion` path shows the final composed diagram without looping motion.
While similar documentation often vaguely advises to "reduce motion", this explicitly defines the final state as "all nodes visible, edges fully drawn, and counters at final values".
2Core Capabilities
01Progressive node / edge / label reveal (GSAP master timeline + stagger + edge dashoffset draw-on)
02Flowing connector lines: marching dash loop + offset-path moving dot (pure CSS, no JS)
03Animated chart trio: bar grow / line draw-on / number count-up
04Multi-stack implementation options: inline SVG+GSAP/CSS, Framer Motion (React), D3 transition, Mermaid/Excalidraw export then animate, Remotion video export
05D3 data-binding animations (transition / tween for growth and counting)
06Remotion frame-driven deterministic rendering (same diagram yields the exact same PNG sequence / MP4 every render)
07?t=N freeze harness: distinct freezing strategies across GSAP, SMIL, and CSS paths
08Sequence / architecture diagram recipes: lay out background areas first, then nodes, edges, labels; reveal messages sequentially with holds for reading comprehension
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx / Playwright（无头截图） |
| cli | ffmpeg（contact-sheet.sh 拼图） |
| cli | npx -y playwright（仓库根 seek-shot.sh 内部） |
| network | jsDelivr CDN：gsap ESM（交付物在浏览器端加载） |
| package | 第三方动画/图表库：GSAP、Framer Motion、D3、anime、Remotion（自 CDN 或 npm 引入） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Execute local scripts or commands: npx playwright screenshot --wait-for-timeout=500 … (SKILL.md Verify loop inline command)
- 网络端点: Declare external network access: the skill itself makes no business API calls; network footprint comes from toolchains—npx fetches playwright packages from registry.npmjs.org and downloads Chromium binaries
- 本地工作目录: File I/O and artifact output: frame-mid.png (SKILL.md inline screenshot example output), frame-<t>.png (seek-shot.sh output)
Audit Notes: The audit target is the skill directory itself (skills/diagram-animation/: SKILL.md + references/ + 0-byte README.md; no scripts, no credentials, no disk writes inside the directory). What triggers the Orange tier is its specified verification loop and delivery form: ① The Verify loop in SKILL.md directly inlines `npx playwright screenshot …`, and the referenced repo root helper `scripts/seek-shot.sh` runs `npx -y playwright screenshot`—npx fetches packages from the npm registry and downloads Chromium binaries on first run, matching the classification paradigm "relies on third-party plugins, mirrors, or remote packages" (precedent: logo-animation by the same author was rated Orange for the same reason); ② Deliverables fetch ESM modules such as GSAP from cdn.jsdelivr.net on the browser side (artifact-time reference; per batch 4 rules this is noted rather than counted as runtime outbound traffic). The skill itself does not read credentials/env, call business APIs, harvest data, or bypass protections, so it is not Red, nor does it constitute a "credential-reading" Orange tier. Trigger condition: remote fetches occur only when actually executing the verification loop (screenshots/montages); simply writing HTML or inspecting manually in a browser does not trigger it.
5Second-Pass Verification
- [ok] 外部依赖调用点复核（npx playwright / ffmpeg / CDN） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/diagram.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 同为 npx playwright 截图、scripts/contact-sheet.sh 为 ffmpeg hstack；SKILL.md 顶部代码块确有 cdn.jsdelivr.net 的 gsap ESM import。三条均落地，非推测。
- [ok] 无凭证 / 无 env / 无业务 API 反查 — skill 两个文档与三个仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无 fetch 到业务端点；唯一远程动作是包管理器与 CDN 静态资源。判 orange 的依据只是「远程包/镜像」，不含凭据读取。
- [ok] 目录资产面清点 — skills/diagram-animation/ 下仅 SKILL.md（163 行）、references/ 一份 218 行 cookbook、0 字节 README.md；无 scripts/、无模板、无数据文件——「纯指令 + 内联代码片段」结论成立。
- [discrepancy] 跨引用可解析性 — SKILL.md 有两处引用落在本 skill 目录外：`scripts/seek-shot.sh`/`scripts/contact-sheet.sh` 位于仓库根（单装本 skill 目录会悬空，需装整个 repo）；`see remotion-video` 指向的 remotion-video 不在本 repo 的 5 个 skill 中（属同作者 motion-design-skills pack），同样悬空。同 repo 内的 whiteboard → explainer-video 引用可解析。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 SVG / Framer Motion / D3 / Remotion 四栈，正文 Build-tool choice 逐栈给出适用判据，reference 给出对应可运行实现（Framer Motion pathLength、D3 数据绑定、Remotion spring/interpolate）；无夸大，也未声称能自动出图或代跑渲染。
- [ok] 「确定性」主张的成立条件 — 成立范围有明确边界：GSAP/JS 主时间轴的 ?t 冻结与 Remotion 帧驱动路径可逐帧确定；而 CSS keyframes/transition 分支本身不可 seek，SKILL.md 明确要求「drive reveal order with `animationDelay`; freeze by pausing/seeking the equivalent JS timeline」并给出 prefers-reduced-motion 终态——主张非无条件承诺。
6Verdict & Scenarios
Best for: Ideal for converting existing static structures (architecture diagrams, flowcharts, sequence diagrams, data charts) into step-by-step revealed web animations or video clips; especially suitable for teams using "auditable deterministic frames" (?t freeze + three-frame screenshots) as a delivery gate, and can be combined with explainer-video (full narrative layer) or whiteboard-animation (hand-drawn layer) from the same repository.
Not for: Not suitable for long videos requiring complete storytelling and voiceover (use explainer-video or video packs instead); not suitable for purely decorative, non-informative flashy animations (all rules serve readability); also not suitable for tasks requiring only a single static chart without a temporal dimension.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload diagram-animation.tar.gz
sha256:
Option B · Copy Guide for Agente196243bfb566372…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3e2d411b72.