Content & Media Creation · iart-ai/data-animation-skills
animated-infographic
This skill should be used when the user asks to "make an animated infographic", "create an infographic video", "build an infographic animation", "animate an explainer infographic", "do a sequenced reveal of icons and stats", "animate icons with key numbers and connectors", or "lay out a designed infographic that animates in sequence". Covers infographic layout & visual hierarchy, staggered element reveals, animating icons/pictograms, key-number counters, connectors/flow, and section pacing. For heavy charting (bar chart race, charts from a CSV) use the chart-animation skill instead.
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 one absolute rule: design the static composition first (every element in its final resting place); animation only determines "when it appears," never the layout.
skills/animated-infographic/SKILL.md
A great animated infographic is a great *static* infographic that happens to move. Lay out and balance the full composition — every icon, number, and label in its final position — before adding a single keyframe.
Directly targets the most common failure mode: elements flying into positions that were never intentionally designed.
Reveal sequence = visual hierarchy (title → icon → number → label → connector), not layout flow order.
skills/animated-infographic/SKILL.md
Reveal order *is* the hierarchy. The eye follows appearance, so animate elements in importance order, not layout order.
The reference translates hierarchy into four offset constants: ICON, COUNT, LABEL, and CONNECTOR.
Two strict requirements for number precision: round before formatting, and enforce tabular-nums for fixed glyph widths.
skills/animated-infographic/SKILL.md
Interpolate the underlying number, ease it, then format on render. Two musts: **round before formatting**, and use `tabular-nums` so the layout doesn't jitter as digits change.
Interpolation happens strictly on underlying numerical values, always rounded and formatted before rendering on screen.
Only one number may animate at any given moment: an audience can only track a single moving object at a time.
skills/animated-infographic/SKILL.md
One loud thing at a time — never count two numbers at once.
The reference uses STEP_STRIDE=48 frames against a 30-frame counter duration to create mutually exclusive animation windows.
Use 6–10 frames for cascading staggers; siblings within the same group must share the same enter curve.
skills/animated-infographic/SKILL.md
A stagger of 6–10 frames feels crisp; above ~15 it drags.
The reference adopts STAGGER=8 (approx. 0.27s at 30fps).
Connectors are drawn in the gap where the source element has appeared but the target has not yet, guiding visual focus to the next reveal.
skills/animated-infographic/SKILL.md
Draw the connector *between* the two items it joins, in the gap after the source appears and before the target — the line leads the eye into the next reveal.
Implemented via SVG path strokeDashoffset draw-in.
Data-driven + pre-render validation: steps must be 3–5 items, values must be finite, and icons must match known keys.
skills/animated-infographic/references/sequenced-infographic.md
Validate before rendering: confirm `steps.length` is 3–5, every `value` is a finite number, and `icon` is one of the known keys — bad data should fail loudly, not render a broken frame.
Shares the same concern regarding "silent NaNs" as chart-animation.
Verification loop specifically targeted at numbers: still-frame checks catch erroneous stat values or staggers overflowing the canvas before encoding.
skills/animated-infographic/SKILL.md
The infographic carries **key numbers**, so still-inspection catches a wrong stat or a stagger that lands off-canvas before you waste an encode.
Also prescribes that "data-dependent duration should be computed in calculateMetadata".
Icons use spring overshoot pops, numbers settle with ease-out, and labels only fade—allocating motion intensity according to hierarchy.
skills/animated-infographic/SKILL.md
const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
A direct mapping of "motion intensity = visual importance".
2Core Capabilities
01Tiered reveal choreography (5-tier table: title → icon → number → label → connector)
02Icon spring overshoot pop (low damping bounce-and-settle)
03Key number count-up (ease-out cubic + round + Intl + tabular-nums)
04Connector draw-on (strokeDashoffset animation based on path length)
05Composition pacing budget (title 0.8–1.2s / item 1.2–2.0s / connector 0.4–0.6s / final hold 2–3s)
06Hierarchy mapped to code constants (offsets for icon 0 / counter ~6f / label ~12f express visual hierarchy)
07Complete, runnable Remotion scene + master timeline (frame-by-frame events across frames 0–264)
08Template × data batching (rendering any dataset using the identical composition)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| package | remotion（frame/spring/interpolate/Easing/Sequence） |
| cli | npm / npx（安装并运行 Remotion 工程） |
| package | zod（输出契约：Composition + schema + defaultProps） |
| cli | ffmpeg / ffprobe（仓库共享 contact-sheet.sh、probe-mp4.sh） |
| network | iart.ai（reference 尾部推广链接，具 utm 参数；仅读者点击才请求） |
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/: Local script or command execution: No bundled scripts inside the skill directory; SKILL.md/reference directs the agent to run `npm i` (to install Remotion project dependencies) and `np
- 网络端点: External network access declaration: No runtime business endpoint requests or data scraping; statistical values are supplied directly by the user as JSON.
- 本地工作目录: File I/O and artifact output: Writes `out/f-title.png`, `out/f-mid.png`, `out/f-end.png`, and `out/infographic.` inside the user project directory.
Audit Notes: Triggered under the classification rule "reliance on third-party plugins, mirrors, or remote packages": while the skill directory itself is pure Markdown (no scripts, no credential access, no env reads), the delivery pipeline mandates installing and executing the remote package remotion (+ @remotion/cli, react) and zod contracts fetched via npm/npx; this matches the orange rating assigned to `remotion-video` in the same repo. **Explicitly non-applicable criteria**: no credential or environment variable harvesting; no asset uploading to external generative services (icons, numbers, and palettes are entirely contained in local code and data); no TLS downgrades, no `--no-verify`, no sandbox disabling, and no anti-automation circumvention. Trigger condition: occurs only upon actual project installation and video rendering.
5Second-Pass Verification
- [discrepancy] 「pictogram 遮罩填充」这一声明是否有实现支撑 — SKILL.md 要求「用遮罩裁部分单位，而不是缩放它」，但 sequenced-infographic.md 只实现了 icon pop / counter / connector 三类，没有任何 pictogram 遮罩代码——该能力目前是要求而非可用实现。
- [ok] 「一次只动一个数字」是否有实现约束 — reference 的 STEP_STRIDE=48 帧（1.6s）> counter 的 30 帧（1.0s），计数器窗口天然不重叠；时间表明确写 Only one counter runs at a time。
- [ok] 时序常量与主时间表是否自洽 — TITLE_HOLD=30 / STEP_STRIDE=48 / CONNECTOR_OFFSET=30 与时间表（30 帧第 1 步、60 帧连线 1、78 帧第 2 步）逐项对得上；终帧 hold 90 帧＝3s，落在 SKILL.md 的 2–3s 区间内。
- [ok] 数据校验口径是否与 SKILL.md 一致 — reference 的「steps.length 3–5、value 有限、icon 白名单」与 SKILL.md 的 3–5 supporting data points 及其「超过五个元素级联就读成混乱」同口径。
- [ok] 数字格式化口径是否与 chart-animation 一致 — 两处都用 Intl.NumberFormat(en-US) + Math.round() + font-variant-numeric: tabular-nums；SKILL.md 明确说明与 chart-animation 共享该 craft。
- [ok] 跨 skill 分工声明是否可解析 — SKILL.md 指名 chart-animation；该 skill 与本文同仓（iart-ai/data-animation-skills）且存在（skills/chart-animation/SKILL.md），无跨仓库未知依赖。
6Verdict & Scenarios
Best for: Explainer, marketing, or analytical roles requiring "X in 3 steps / by the numbers" style composite infographic animations: 1 central insight + 3–5 data points, 30–90s duration, capable of freezing into a screenshot-ready frame.
Not for: Scenarios where charts themselves constitute the primary content (bar chart race, CSV-driven line/area charts → use chart-animation); animations with more than 5 competing elements or requiring long voiceover narratives.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload animated-infographic.tar.gz
sha256:
Option B · Copy Guide for Agent534988a1cae145c0…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 8ce2709c39.