explainer-visuals

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Explainer Visuals

解释性动画视觉效果

Create animated, interactive visuals that make complex ideas intuitive.

创建交互式动画视觉效果，让复杂概念变得直观易懂。

Philosophy

设计理念

Great explainer visuals don't just illustrate—they reveal. They show the structure hidden in complexity, the motion implicit in static descriptions, the relationships that words struggle to convey.

Core principles:

Earned complexity: Start simple, add layers through interaction or animation
Semantic motion: Movement carries meaning, not just attention
Readable at rest: The static state communicates the core idea
Progressive disclosure: Let viewers control depth of exploration

优秀的解释性视觉效果不只是展示——更是揭示。它们展现复杂事物背后的结构，静态描述中隐含的动态变化，以及文字难以传达的关联关系。

核心原则：

渐进式复杂度：从简单开始，通过交互或动画逐步添加层级
语义化动效：动效传递信息，而非仅吸引注意力
静态可读：静止状态即可传达核心信息
渐进式展示：让观看者控制探索的深度

Discovery Process

需求探索流程

Before creating any visual, conduct a brief discovery interview using AskUserQuestion. Understand not just WHAT to visualize, but WHY this idea needs visual treatment.

在创建任何视觉效果之前，使用AskUserQuestion进行简短的需求探索访谈。不仅要了解需要可视化的内容，还要明白为什么这个概念需要视觉化呈现。

Discovery Questions

探索问题

Ask 1-2 focused questions from these categories:

Understanding the idea:

"What's the single most important insight viewers should take away?"
"What makes this concept hard to explain in words alone?"
"Is there a common misconception this visual should correct?"

Understanding the context:

"Where will this appear in your essay? (Opening hook, supporting evidence, climactic reveal, summary)"
"What's the surrounding content's tone? (Academic, conversational, provocative, instructive)"

Understanding the audience:

"What does your reader already know about this topic?"
"Should this feel like a quick insight or an explorable deep-dive?"

Skip discovery only if the user has already provided rich context about their goals.

从以下类别中选择1-2个针对性问题：

理解核心概念：

“观看者需要获取的最重要的核心洞见是什么？”
“为什么这个概念仅用文字难以解释清楚？”
“这个视觉效果需要纠正哪些常见的误解？”

理解使用语境：

“它会出现在文章的哪个位置？（开篇引入、支撑论据、核心结论、总结部分）”
“周边内容的风格是什么？（学术严谨、口语化、颠覆性、指导性）”

理解目标受众：

“读者对这个主题已经有哪些了解？”
“这应该是快速获取洞见的内容，还是可供深入探索的内容？”

如果用户已经提供了关于目标的丰富背景信息，可以跳过需求探索环节。

Visual Format Selection

视觉格式选择

Choose format based on the nature of the idea:

Concept Type	Optimal Format	Why
Transformation/Change	Morphing animation	Shows before→after as continuous process
Hierarchy/Structure	Zoomable treemap or nested diagram	Reveals layers through interaction
Process/Flow	Stepped animation with scrubber	User controls pace of revelation
Comparison	Side-by-side with synchronized animation	Parallel structure highlights differences
Accumulation/Growth	Building animation	Each element adds to previous
Relationship/Network	Force-directed graph	Reveals emergent structure
Distribution/Proportion	Animated unit chart or waffle	Makes quantities tangible
Cycle/Feedback	Looping animation with entry points	Shows perpetual motion of systems
Timeline/Sequence	Horizontal scroll with annotations	Natural reading direction
Spatial/Geographic	Annotated map with zoom	Grounds abstract in physical
Mental Model	Metaphor-based diagram	Connects abstract to familiar
Trade-off/Tension	Slider-controlled balance	Shows interdependence

根据概念的性质选择合适的格式：

概念类型	推荐格式	原因
转化/变化	变形动画	将前后变化展示为连续过程
层级/结构	可缩放树形图或嵌套图表	通过交互展示层级关系
流程/流转	带进度控制的分步动画	用户可控制信息揭示的节奏
对比/比较	同步动画的并排展示	平行结构突出差异
积累/增长	构建式动画	每个元素在之前的基础上添加
关联/网络	力导向图	展示涌现式结构
分布/占比	动画化单位图或华夫图	让数量更具象
循环/反馈	带入口点的循环动画	展示系统的持续运转
时间线/序列	带注释的横向滚动条	符合自然阅读方向
空间/地理	可缩放标注地图	将抽象内容落地到物理空间
思维模型	基于隐喻的图表	将抽象概念与熟悉事物关联
权衡/张力	滑块控制的平衡图	展示相互依赖关系

Design System

设计系统

Typography

排版

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

--text-hero: 2rem;      /* Single key number or word */
--text-title: 1.25rem;  /* Visual title */
--text-label: 0.875rem; /* Axis labels, annotations */
--text-micro: 0.75rem;  /* Secondary details */

css

font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;

--text-hero: 2rem;      /* 单个关键数字或词汇 */
--text-title: 1.25rem;  /* 视觉标题 */
--text-label: 0.875rem; /* 坐标轴标签、注释 */
--text-micro: 0.75rem;  /* 次要细节内容 */

Color Palettes

配色方案

Minimal (default):

css

--ink: #1a1a2e;        /* Primary elements */
--ink-light: #4a4a68;  /* Secondary elements */
--accent: #e94560;     /* Single highlight */
--ground: #fafafa;     /* Background */
--ground-alt: #f0f0f5; /* Alternate regions */

Data-rich (when showing categories):

css

--cat-1: #4e79a7; --cat-2: #f28e2c; --cat-3: #e15759;
--cat-4: #76b7b2; --cat-5: #59a14f; --cat-6: #af7aa1;

Adapt to essay context:

Technical/analytical → cooler palette, more contrast
Personal/reflective → warmer palette, softer edges
Provocative/challenging → bolder accent, higher saturation

极简风格（默认）：

css

--ink: #1a1a2e;        /* 主要元素 */
--ink-light: #4a4a68;  /* 次要元素 */
--accent: #e94560;     /* 单个高亮元素 */
--ground: #fafafa;     /* 背景色 */
--ground-alt: #f0f0f5; /* 交替区域背景色 */

数据密集型（展示分类时使用）：

css

--cat-1: #4e79a7; --cat-2: #f28e2c; --cat-3: #e15759;
--cat-4: #76b7b2; --cat-5: #59a14f; --cat-6: #af7aa1;

适配文章语境：

技术/分析类 → 冷色调，高对比度
个人/反思类 → 暖色调，柔和边缘
颠覆性/挑战性 → 更醒目的强调色，高饱和度

Motion Principles

动效原则

javascript

const EASE = {
  standard: 'cubic-bezier(0.4, 0, 0.2, 1)',  // Smooth, natural
  enter: 'cubic-bezier(0, 0, 0.2, 1)',       // Start fast, settle
  exit: 'cubic-bezier(0.4, 0, 1, 1)',        // Start slow, accelerate
  bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)' // Slight overshoot
};

const DURATION = {
  micro: 100,    // Color, opacity
  fast: 200,     // Small movements
  medium: 350,   // Standard transitions
  slow: 500,     // Large movements
  dramatic: 800  // Major reveals
};

Motion semantics:

Fade = existence (appear/disappear)
Scale = importance (emphasize/de-emphasize)
Translate = relationship (group/separate)
Morph = identity (transform)
Rotate = state (toggle, cycle)

javascript

const EASE = {
  standard: 'cubic-bezier(0.4, 0, 0.2, 1)',  /* 流畅自然的动效 */
  enter: 'cubic-bezier(0, 0, 0.2, 1)',       /* 快速进入，平稳落地 */
  exit: 'cubic-bezier(0.4, 0, 1, 1)',        /* 缓慢启动，加速退出 */
  bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)' /* 轻微过冲的弹性效果 */
};

const DURATION = {
  micro: 100,    /* 颜色、透明度变化 */
  fast: 200,     /* 小幅度移动 */
  medium: 350,   /* 标准过渡效果 */
  slow: 500,     /* 大幅度移动 */
  dramatic: 800  /* 核心内容揭示 */
};

动效语义：

淡入淡出 = 存在状态（出现/消失）
缩放 = 重要性变化（强调/弱化）
平移 = 关联关系（分组/分离）
变形 = 身份转化（形态改变）
旋转 = 状态变化（切换、循环）

Technology Selection

技术选型

Choose the simplest tool that achieves the effect:

Complexity	Tool	Use When
Simple	Pure CSS	State transitions, hovers, basic transforms
Standard	Vanilla JS + CSS	Sequenced animations, scroll triggers, simple interactions
Complex	GSAP	Timeline sequences, physics, SVG morphing
Data-driven	D3.js	Force layouts, maps, data-bound transitions

For most explainer visuals, vanilla JS + CSS is sufficient.

选择能实现效果的最简工具：

复杂度	工具	适用场景
简单	纯CSS	状态切换、悬停效果、基础变换
标准	Vanilla JS + CSS	序列动画、滚动触发、简单交互
复杂	GSAP	时间线序列、物理动效、SVG变形
数据驱动	D3.js	力导向布局、地图、数据绑定过渡

对于大多数解释性视觉效果，Vanilla JS + CSS就足够了。

Code Structure

代码结构

Every visual is a self-contained HTML file:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visual: [Concept Name]</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { /* Design tokens */ }
    /* Component styles */
  </style>
</head>
<body>
  <figure class="explainer-visual" role="img" aria-label="[Description]">
    <!-- Visual content -->
    <figcaption class="visually-hidden">[Accessible description]</figcaption>
  </figure>
  <script>
    // Animation and interaction logic
  </script>
</body>
</html>

每个视觉效果都是一个独立的HTML文件：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visual: [Concept Name]</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { /* 设计变量 */ }
    /* 组件样式 */
  </style>
</head>
<body>
  <figure class="explainer-visual" role="img" aria-label="[Description]">
    <!-- 视觉内容 -->
    <figcaption class="visually-hidden">[无障碍描述]</figcaption>
  </figure>
  <script>
    // 动画与交互逻辑
  </script>
</body>
</html>

Accessibility Requirements

无障碍要求

css

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Every visual must include:

```
role="img" aria-label="..."
```
on container
Full text alternative in
```
.visually-hidden
```
caption
Respect
```
prefers-reduced-motion
```
Keyboard-accessible interactions
Visible focus states

css

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

每个视觉效果必须包含：

容器上添加
```
role="img" aria-label="..."
```
属性
在
```
.visually-hidden
```
标题中添加完整的文本替代内容
遵循
```
prefers-reduced-motion
```
动效偏好设置
支持键盘操作的交互
可见的焦点状态

Patterns Reference

模式参考

See references/patterns.md for implementation patterns:

Morphing shape transitions
Scroll-driven storytelling
Interactive slider diagrams
Annotated step-through animations
Force-directed relationship graphs
Unit/waffle chart animations

查看[references/patterns.md]获取实现模式：

变形形状过渡
滚动驱动的叙事动画
交互式滑块图表
带注释的分步动画
力导向关联图
单位/华夫图动画

Delivery

交付规范

Output as single HTML file that:

Is completely self-contained (inline all CSS/JS)
Works when opened directly in browser
Can be embedded via iframe
Includes comments explaining key decisions

For library-dependent visuals (D3, GSAP), include CDN links with integrity hashes.

输出为单个HTML文件，需满足：

完全独立（内联所有CSS/JS代码）
直接在浏览器中打开即可运行
可通过iframe嵌入
包含注释说明关键设计决策

对于依赖第三方库的视觉效果（如D3、GSAP），需添加带完整性哈希的CDN链接。