1仕組みと動作原理
唯一絶対の鉄則：まず静的な構図を設計し（全要素を最終位置に配置）、アニメーションは「いつ出現するか」のみを決定し、レイアウトには一切関与させない。
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.
「要素が設計されていない位置へ勝手に飛んでいく」という最も頻発する失敗に直接対処します。
表示順序＝視覚的階層（タイトル → アイコン → 数値 → ラベル → コネクタ）であり、レイアウトの配置順ではない。
skills/animated-infographic/SKILL.md
Reveal order *is* the hierarchy. The eye follows appearance, so animate elements in importance order, not layout order.
リファレンスでは階層構造を ICON、COUNT、LABEL、CONNECTOR の4つのオフセット定数に変換しています。
数値精度における2つの必須要件：フォーマット前に必ず四捨五入すること、および固定幅を確保するために tabular-nums を適用すること。
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.
補間はベースとなる数値に対してのみ行い、画面描画直前に必ず丸め処理とフォーマットを実行します。
同一瞬間に動く数値は1つのみ：視聴者が同時に追従できる移動オブジェクトは1つに限られる。
skills/animated-infographic/SKILL.md
One loud thing at a time — never count two numbers at once.
リファレンスでは counter の30フレームに対し、STEP_STRIDE=48 フレームを用いて排他的なウィンドウを形成しています。
カスケードのスタッガーは6〜10フレームとし、同一グループの兄弟要素は同じ enter イージング曲線を共有する。
skills/animated-infographic/SKILL.md
A stagger of 6–10 frames feels crisp; above ~15 it drags.
リファレンスでは STAGGER=8（30fpsで約0.27秒）を採用しています。
コネクタは「接続元要素は出現済み、接続先要素は未出現」という合間のタイミングで描画し、視線を次の表示へと誘導する。
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.
SVG path の strokeDashoffset 描画アニメーションによって実装されます。
データ駆動設計＋レンダリング前検証：steps は3〜5項目必須、value は有限数必須、icon は定義済みのキーであること。
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.
chart-animation と同様に、「サイレント NaN（未検知の NaN）」の発生防止を目的としています。
数値に特化した検証ループ：スチル画像チェックにより、エンコード前に誤った統計値やキャンバス外へはみ出したスタッガーを検出する。
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.
さらに「データ依存の尺度は calculateMetadata 内で算出すること」を規定しています。
アイコンはスプリングのオーバーシュートによるポップ、数値は ease-out での着地、ラベルはフェードのみ——階層に応じて動きの強度を配分する。
skills/animated-infographic/SKILL.md
const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
「動きの強度＝重要度」の対応関係を反映しています。
2コア機能
01階層型表示オーケストレーション（title → icon → number → label → connector の5段階ティア表）
02アイコンのスプリング・オーバーシュート・ポップ（低ダンピングのバウンス着地）
03キー数値のカウントアップ（ease-out cubic + round + Intl + tabular-nums）
04コネクタのドローオン（パス長に応じた strokeDashoffset 描画）
05構図のペーシング予算配分（タイトル 0.8〜1.2秒 / 各項目 1.2〜2.0秒 / コネクタ 0.4〜0.6秒 / 最終フレーム 2〜3秒）
06階層構造のコード定数化（icon 0 / counter 約6f / label 約12f のオフセットによる階層表現）
07実行可能な完全な Remotion シーン＋マスタータイムライン（0〜264フレームのイベント別管理）
08テンプレート×データのバッチ処理（同一構図での任意データセット描画）
3外部依存関係
| 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 参数；仅读者点击才请求） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: スキルディレクトリ内に独自スクリプトは含まず。SKILL.md/reference がエージェントに対し `npm i`（Remotion プロジェクト依存関係のインストール）および `np
- 网络端点: 外部ネットワークアクセスの宣言: 実行時に外部エンドポイント呼び出しやデータスクレイピングは行わない。統計数値はユーザーから JSON 形式で提供される。
- 本地工作目录: ファイル読み書きと成果物出力: ユーザープロジェクト配下に `out/f-title.png`、`out/f-mid.png`、`out/f-end.png`、`out/infographic.` を出力。
監査ノート： 格付け基準における「サードパーティ製プラグイン、ミラー、リモートパッケージへの依存」に該当：スキルディレクトリ自体は純粋な Markdown（スクリプト、認証情報読み取り、環境変数読み取りは一切なし）ですが、提供手順として npm/npx 経由で取得する remotion（+ @remotion/cli、react）および zod コントラクトのリモートパッケージのインストールと実行を要求します。同一リポジトリの `remotion-video` と同様の基準により橙色判定としています。**明確に非該当の項目**：認証情報や環境変数の読み取りなし、外部生成サービスへの素材アップロードなし（アイコン、数値、配色はすべてローカルコードとデータ内に完結）、TLS ダウングレードなし、`--no-verify` なし、サンドボックス無効化なし、対自動化回避なし。発動条件：プロジェクトの実際のインストールおよび動画レンダリング時のみ発生。
5二重目の独立検証
- [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），无跨仓库未知依赖。
6結論
最適な用途： 「3ステップでわかるX／数字で見るX」といった複合インフォグラフィック動画を必要とする解説・マーケティング・アナリスト職：1つの核となるインサイト＋3〜5個のデータポイント、尺度は30〜90秒、静止画キャプチャとして成立するフレーム構成。
不向きな用途： チャート自体が主コンテンツとなるシーン（バーチャートレース、CSV駆動の折れ線／エリアグラフ → chart-animation を使用）；競合要素が5個を超える場合や、長尺ナレーションを伴う映像。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload animated-infographic.tar.gz
sha256:
Option B · Copy Guide for Agent534988a1cae145c0…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 8ce2709c39.