animated-infographic

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Animated Infographic

动画信息图

Build a designed infographic — icons, a few key numbers, short text, and simple shapes arranged with real visual hierarchy — then animate it in sequence so each element earns its moment. The craft is composition first, choreography second: a static layout that reads on its own, revealed in a staggered cascade that guides the eye exactly where you want it.

制作一个经过精心设计的信息图——将图标、少量关键数字、简短文本和简单图形按照合理的视觉层级排列——然后为其添加顺序动画，让每个元素都有专属的展示时刻。制作核心是先构图，再编排动画：先设计出可独立阅读的静态布局，再通过交错的渐显效果引导观众视线聚焦到你想要的位置。

When to use

使用场景

Mixed-layout explainers: "X in 3 steps", "how it works", "by the numbers", a stat-card grid.
Sequenced reveal of icon + stat + label + connector as a single designed scene.
Pictogram/icon animation, count-up key numbers, flow connectors between steps.

This skill owns the composed infographic. For a chart that is the content (bar chart race, animated line/area, a graph driven by a CSV), use chart-animation — and compose its chart as one block inside an infographic here rather than rebuilding it.

混合布局说明类：“三步完成X”“工作原理”“数据概览”“统计卡片网格”。
按顺序展示单个设计场景中的图标+数据+标签+连接线。
象形图/图标动画、关键数字递增动画、步骤间的流程连接线。

本Skill负责组合式信息图的制作。若内容以图表为主（如条形图竞速、动画折线图/面积图、基于CSV的图表），请使用chart-animation Skill——可将其制作的图表作为一个模块嵌入到本Skill的信息图中，无需重新构建。

The one rule: design the static frame first

核心规则：先设计静态框架

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. Animation then only controls when each already-placed element appears; it never decides layout. This prevents the most common failure: elements that fly to positions that were never designed, so the final held frame looks accidental.

Scope tightly: one central insight, 3–5 supporting data points, in 30–90s. More than five competing elements and the cascade reads as chaos.

优秀的动画信息图首先是优秀的静态信息图，只是额外添加了动效。在添加任何关键帧之前，先完成完整构图的布局与平衡——将每个图标、数字和标签放置到最终位置。动画仅控制每个已放置元素的出现时机，绝不决定布局。这能避免最常见的失败：元素移动到从未设计过的位置，导致最终静止帧看起来杂乱无章。

严格控制范围：一个核心观点，3–5个支撑数据点，时长30–90秒。超过五个元素会让渐显效果显得混乱。

Visual hierarchy → reveal order

视觉层级 → 展示顺序

Reveal order is the hierarchy. The eye follows appearance, so animate elements in importance order, not layout order. Map each element to a tier, then reveal tier by tier.

Tier	Element	Reveal	Motion
1	Section title / central insight	first, alone	fade + slight rise
2	Icon (anchors each item)	per item, leads its group	pop / scale-overshoot
3	Key number (counter)	right after its icon	count-up, ease-out
4	Label / caption	settles under the number	fade, no motion drama
5	Connector / flow line	links items as they complete	draw-on (path length)

Use size, weight, and color for static hierarchy; use timing and motion for the animated layer. One loud thing at a time — never count two numbers at once.

展示顺序即层级关系。观众的视线会跟随元素出现的顺序，因此应按照元素的重要性而非布局顺序添加动画。将每个元素划分到不同层级，然后逐层展示。

层级	元素	展示时机	动效
1	章节标题 / 核心观点	最先单独展示	淡入 + 轻微上移
2	图标（每个条目锚点）	按条目展示，引领所属组	弹出 / 缩放超调
3	关键数字（计数器）	紧随对应图标之后	递增动画，缓出效果
4	标签 / 说明文字	落在数字下方	淡入，无夸张动效
5	连接线 / 流程线	条目完成后连接对应元素	路径绘制（按长度）

使用尺寸、粗细和颜色构建静态层级；使用时序和动效构建动画层级。同一时间仅突出一个元素——绝不同时递增两个数字。

Stagger: the cascade

交错效果：渐显序列

Reveal sibling items with a fixed delay between them (a stagger) so the group reads as a sequence, not a flash. Drive every element from the current frame as a pure function — never wall-clock time or a library's animation loop — so renders are deterministic.

jsx

import { useCurrentFrame, spring, useVideoConfig } from "remotion";

const STAGGER = 8; // frames between siblings (~0.27s @30fps)

function Item({ index, children }) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const local = frame - index * STAGGER;            // this item's own clock
  const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
  return (
    <div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
      {children}
    </div>
  );
}

A stagger of 6–10 frames feels crisp; above ~15 it drags. Keep one enter curve across all siblings so the cascade reads as confidence, not noise.

为同级条目设置固定的延迟（交错效果），让组内元素呈现序列感而非瞬间闪现。所有元素的动效均基于当前帧计算，而非使用时钟时间或库的动画循环，确保渲染结果可预测。

jsx

import { useCurrentFrame, spring, useVideoConfig } from "remotion";

const STAGGER = 8; // frames between siblings (~0.27s @30fps)

function Item({ index, children }) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const local = frame - index * STAGGER;            // this item's own clock
  const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
  return (
    <div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
      {children}
    </div>
  );
}

6–10帧的交错延迟会显得利落；超过15帧则会拖沓。所有同级元素使用统一的入场曲线，让渐显序列显得连贯而非杂乱。

Animating icons: the pop

图标动画：弹出效果

Icons anchor each item, so give them the strongest entrance — a scale-overshoot ("pop") that settles. Use a spring with low damping for the bounce; never linear scale (reads mechanical).

jsx

const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// pop overshoots past 1 then settles → lively
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>

For pictogram fills (e.g. "7 of 10 people"), reveal units on the same stagger and clip the partial unit with a mask rather than scaling it.

图标是每个条目的锚点，因此给它们设置最强的入场动效——缩放超调（“弹出”）后稳定。使用低阻尼的弹簧动画实现弹跳效果；绝不要使用线性缩放（会显得机械）。

jsx

const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// pop overshoots past 1 then settles → lively
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>

对于象形图填充（如“10人中有7人”），在相同的交错延迟下逐个展示单元，使用遮罩裁剪部分单元而非缩放。

Key numbers: counters that settle

关键数字：稳定的计数器

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. (Shared craft with chart-animation — see its counter section for currency/percent variants.)

jsx

import { interpolate, Easing } from "remotion";

const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
  easing: Easing.out(Easing.cubic),   // "settling on a number"
});
const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;

Ease-out on a headline number reads as arriving; linear reads as a robotic odometer. Hold each number ~0.5s before the next item begins.

对底层数字进行插值、缓动处理，然后在渲染时格式化。必须做到两点：格式化前先取整，并使用

tabular-nums

确保数字变化时布局不会抖动。（该技巧与chart-animation Skill通用——可查看其计数器部分了解货币/百分比变体。）

jsx

import { interpolate, Easing } from "remotion";

const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
  easing: Easing.out(Easing.cubic),   // "settling on a number"
});
const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;

标题数字使用缓出效果会显得自然；线性效果则像机械里程表。每个数字展示后停留约0.5秒再开始下一个条目。

Connectors & flow

连接线与流程

Connectors turn a grid of cards into a process. Animate a line/arrow by drawing its path on, synced to land just as the item it points to finishes — motion that says "now look here next."

jsx

const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
  strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />

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.

连接线可将卡片网格转化为流程。通过绘制路径为线条/箭头添加动画，同步到指向的条目刚好完成展示——动效提示“现在请看这里”。

jsx

const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
  strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />

在连接线连接的两个条目之间绘制动画，即源条目出现后、目标条目出现前的间隙——线条引导视线进入下一个展示环节。

Section pacing

章节节奏

Budget time per element, not per second of polish. A viewer can only track one moving thing at a time.

Beat	Budget
Title hold (let it land)	0.8–1.2s
Per item (icon pop → counter → label)	1.2–2.0s
Connector draw	0.4–0.6s, overlaps into next item
Final composed hold (screenshot-able)	2–3s

End on the complete static infographic held still for 2–3s — the takeaway is the assembled frame, so let it settle with no motion competing.

按元素分配时间，而非按秒打磨。观众同一时间只能追踪一个动态元素。

环节	时长预算
标题停留（让观众理解）	0.8–1.2秒
每个条目（图标弹出 → 计数器 → 标签）	1.2–2.0秒
连接线绘制	0.4–0.6秒，与下一个条目重叠
最终完整静态图停留（可截图）	2–3秒

以完整的静态信息图静止展示2–3秒结束——核心信息是组装后的画面，因此让其稳定展示，无动效干扰。

Output checklist

输出检查清单

Static layout designed and balanced before any keyframes; held final frame looks intentional.
One central insight, 3–5 data points, 30–90s.
Reveal order follows hierarchy (title → icon → number → label → connector), not layout order.
Siblings cascade on a consistent 6–10 frame stagger with one enter curve.
Icons pop with a spring overshoot; numbers count up eased +
```
tabular-nums
```
; only one number animates at a time.
Connectors draw on to lead the eye into the next reveal.
Every value is a pure function of
```
useCurrentFrame()
```
; no library timers.
Final composed frame holds ≥2s.

添加关键帧前已完成静态布局的设计与平衡；最终静止帧看起来规整。
一个核心观点，3–5个数据点，时长30–90秒。
展示顺序遵循层级（标题 → 图标 → 数字 → 标签 → 连接线），而非布局顺序。
同级元素使用6–10帧的统一交错延迟和单一入场曲线。
图标使用弹簧超调弹出；数字使用缓动递增+
```
tabular-nums
```
；同一时间仅一个数字动画。
连接线通过绘制动画引导视线进入下一个展示环节。
所有值均为
```
useCurrentFrame()
```
的纯函数；无库定时器。
最终完整画面停留≥2秒。

Deliver & verify (rendered stills → MP4)

交付与验证（渲染静态帧 → MP4）

Packaged helper (
scripts/
): tile your stills with
scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png
, then assert the encode with
scripts/probe-mp4.sh out.mp4 [WxH] [fps]
. See
scripts/README.md
.

Remotion is frame-deterministic — every icon pop, counter value, and connector draw is a pure function of

useCurrentFrame()

, so you can render any exact frame headlessly with no seek harness. The infographic carries key numbers, so still-inspection catches a wrong stat or a stagger that lands off-canvas before you waste an encode.

Output contract:

A Remotion project with the scene registered (
```
<Composition>
```
+ zod
```
schema
```
+
```
defaultProps
```
), all motion frame-driven (no timers /
```
Date.now()
```
/
```
Math.random()
```
).
Deliverable = the rendered
```
out/*.mp4
```
(plus the project, so the user can re-render with new stats/icons).
Duration data-dependent (N items × per-item budget)? compute it in
```
calculateMetadata
```
, not by hand.

Verify loop — render stills → inspect → encode. Render single frames first (cheap, no video encode), then encode only once the layout and numbers are right.

bash

undefined

打包工具（
scripts/
）：使用
scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png
拼接静态帧，然后使用
scripts/probe-mp4.sh out.mp4 [WxH] [fps]
验证编码。详见
scripts/README.md
。

Remotion是帧确定性的——每个图标弹出、计数器数值和连接线绘制均为

useCurrentFrame()

的纯函数，因此无需搜索工具即可无头渲染任意精确帧。信息图包含关键数字，因此在浪费编码时间前，通过静态帧检查即可发现错误数据或错位的交错效果。

输出规范：

一个已注册场景的Remotion项目（包含
```
<Composition>
```
+ zod
```
schema
```
+
```
defaultProps
```
），所有动效均基于帧驱动（无定时器 /
```
Date.now()
```
/
```
Math.random()
```
）。
交付物 = 渲染后的
```
out/*.mp4
```
（附带项目文件，方便用户使用新数据/图标重新渲染）。
时长取决于数据（条目数 × 单条目预算）？在
```
calculateMetadata
```
中计算，而非手动设置。

验证流程——渲染静态帧 → 检查 → 编码。 先渲染单帧（成本低，无需视频编码），确认布局和数据正确后再编码。

bash

undefined

1. Frame-exact stills — with the SHIPPED props. Pick frames that catch each tier:

1. 精确帧静态图——使用最终交付的props。选择能覆盖每个层级的帧：

npx remotion still Infographic out/f-title.png --frame=20 --props='{"items":[...]}' # title + first pop npx remotion still Infographic out/f-mid.png --frame=90 --props='{"items":[...]}' # mid cascade npx remotion still Infographic out/f-end.png --frame=149 --props='{"items":[...]}' # final composed hold (= durationInFrames - 1)

npx remotion still Infographic out/f-title.png --frame=20 --props='{"items":[...]}' # 标题 + 第一个弹出效果 npx remotion still Infographic out/f-mid.png --frame=90 --props='{"items":[...]}' # 渐显中期 npx remotion still Infographic out/f-end.png --frame=149 --props='{"items":[...]}' # 最终完整画面（= durationInFrames - 1）

2. Inspect each PNG — FIDELITY (every key number exact, labels/captions correct, icons the right glyph)

2. 检查每个PNG——准确性（每个关键数字精确，标签/说明文字正确，图标样式正确）

AND artifacts (text overflow, icon off-canvas, clipped safe-area, missing font, connector pointing

以及是否存在瑕疵（文本溢出，图标超出画布，安全区域被裁剪，字体缺失，连接线指向错误条目，层级未完成时元素半展示）。

at the wrong item, half-revealed element where a tier should be settled).

3. 静态帧检查通过后再编码：

3. Only after the stills check out, encode:

—

npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'


- Use `npx remotion compositions` to read `durationInFrames`/`fps`; the **final composed hold** is the money frame — verify it looks intentional, not mid-cascade.
- **Data-driven / batch**: verify ONE representative props set (stats + labels) via stills *before* batch-rendering all variants — catch a counter or layout bug once, not N times.
- **README demo GIF for free**: `npx remotion render Infographic out/demo.gif --codec=gif`.

**Before you finish:**
1. `npx remotion still` renders cleanly at title, mid-cascade, and final hold — no errors, no missing fonts/icons.
2. Every key number is **exact** (rounded, `tabular-nums`) and every element is inside the safe area at each frame.
3. Frame-driven only — no `Date.now()` / `Math.random()` / library timers (determinism holds in CI).
4. The **shipped** props render correctly (not just `defaultProps`) — right stats, right icons, right labels.
5. Full MP4 encoded and plays; (optional) GIF rendered for the README.

npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'


- 使用`npx remotion compositions`查看`durationInFrames`/`fps`；**最终完整画面**是核心帧——确认其看起来规整，而非处于渐显过程中。
- **数据驱动/批量渲染**：在批量渲染所有变体前，先通过静态帧验证一组代表性的props（数据+标签）——一次性发现计数器或布局错误，而非重复N次。
- **免费生成README演示GIF**：`npx remotion render Infographic out/demo.gif --codec=gif`。

**完成前检查：**
1. `npx remotion still`可成功渲染标题帧、渐显中期帧和最终停留帧——无错误，无缺失字体/图标。
2. 每个关键数字**精确**（已取整，使用`tabular-nums`），且每个元素在每帧都处于安全区域内。
3. 仅基于帧驱动——无`Date.now()` / `Math.random()` / 库定时器（CI环境下可保持确定性）。
4. **最终交付**的props可正确渲染（不仅是`defaultProps`）——数据正确，图标正确，标签正确。
5. 完整MP4已编码且可播放；（可选）已为README渲染GIF。

Reference files

参考文件

```
references/sequenced-infographic.md
```
— a complete runnable Remotion scene: a 3-step "how it works" infographic with staggered icon pops, eased count-up stats, draw-on connectors, a master timing map, and the make-it-data-driven (template × data) prop pattern. Includes a dependency-free inline-SVG variant for non-Remotion use.

```
references/sequenced-infographic.md
```
——一个可运行的完整Remotion场景：包含三步“工作原理”信息图，带有交错图标弹出、缓动递增数据、绘制连接线、主时序映射，以及数据驱动（模板×数据）的props模式。包含一个无需依赖的内嵌SVG变体，适用于非Remotion场景。