五大 JavaScript 动画与创意开发库深度横评

发布时间：2026-03-11 00:17:04  浏览量：2

AI写代码的时代，你不需要逐行写代码了，但是你最好知道有哪些工具可以使用。最近在做一些产品和项目的演示，研究了一下如何利用一些纯前端来实现一些复杂概念的演示。给大家分享一下。

anime.js

、

Motion

、

p5.js

、

Motion Canvas

和

Remotion

分别代表了 JavaScript 动画生态的五个不同方向——从轻量 DOM 动画、声明式 UI 动效、创意编程、命令式 Motion Graphics 到 React 视频渲染。

对于正在为产品演示、创意编程或 UI 动效选型的开发者而言，理解它们各自的定位与边界至关重要。本文从功能定位、开源生态、优缺点、AI 集成能力和演示幻灯片适用性五个维度，对这几个库进行全面技术分析。

anime.js 由法国开发者 Julian Garnier 创建并维护，定位为"快速、灵活、轻量的 JavaScript 动画引擎"。当前最新版本为

v4.3.6

（2026 年 3 月），v4 是一次里程碑式的大版本升级，从 v3 的单函数 API 演进为完整的模块化架构。

v4 的核心能力包括：

直觉式动画 API

（逐属性参数、灵活关键帧、内置缓动函数）、增强的 CSS Transform 控制、Scroll Observer（滚动同步/触发）、高级交错动画（Stagger）、SVG 工具集（形状变形 morphTo、路径动画 createMotionPath、线条绘制 createDrawable）、可拖拽 API（弹簧物理引擎）、Timeline 时间轴编排以及 Web Animations API 集成。性能方面，v4 能在

3000 个 DOM 元素

的 CSS Transform 动画中保持稳定 60fps。

目标用户涵盖前端开发者、动效设计师和初学者。典型场景包括 UI 微交互、落地页动画、SVG 动效、滚动触发动画和拖拽交互等。

anime.js 拥有所有五个库中

最高的 GitHub Star 数

（66.7K），但 npm 周下载量（~70 万）远低于 Motion（~810 万）。值得注意的是，这是一个

单人维护项目

，虽然开发活跃、版本迭代频繁，但对企业级采用存在"巴士因子"风险。v4 采用 ES Modules 设计，支持 tree-shaking，开发者可按需引入——Timer 仅 5.6 KB，Animation 模块仅增加 5.2 KB。

优势方面

，anime.js 的学习曲线极为平缓，animate('.el', { x: 100 }) 语法简洁直观；MIT 协议无任何使用限制（这一点相比 GSAP 的商业授权是重要优势）；

框架无关

，可与 React、Vue、Svelte 或原生 JS 搭配；模块化架构使 tree-shaking 后包体积极小。

劣势方面

，插件生态不及 GSAP（后者拥有 ScrollTrigger、MorphSVG、Flip 等丰富插件, 本次分析未涵盖）；没有官方的 React/Vue 组件封装，需要手动管理生命周期；v3 到 v4 存在 API 断裂变更，社区教程和第三方插件仍大量引用 v3 语法。在极端负载场景下，GSAP 的性能优化更为成熟。

anime.js 在 AI 集成方面有亮点：

官方发布了 MCP Server

（anime-js-mcp-server，npm v1.0.0，2025 年 9 月），提供 get_anime_component、list_anime_components、get_anime_example、search_anime_examples、get_anime_docs 等工具，兼容 Claude Desktop、VS Code Copilot 和 Gemini CLI。这意味着 AI 编码助手能获取最新的 anime.js 文档和示例代码，避免生成过时的 v3 语法。由于 API 设计简洁且文档完善，LLM 生成 anime.js 代码的质量较高，但需注意提示模型使用 v4 语法。

anime.js

不是演示工具

，但其 Timeline API 天然适合编排序列化动画。实际使用中需要与 reveal.js 或 Slidev 等框架搭配——将 anime.js 作为动画引擎嵌入 HTML 演示文稿。

无内置视频导出

功能，需通过录屏工具或 Puppeteer 等方式间接实现。总体而言，anime.js 适合为已有的 Web 演示增添精致动效，但不适合独立承担整个演示文稿的制作。

Motion 由 Matt Perry 创建，原名 Framer Motion，是 Framer 平台的默认动画库。2024 年底，在积累了

450 万+周下载量

后，项目从 Framer 独立为 Motion（motion.dev），Framer 成为其首个官方赞助商。当前最新版本

v12.35.2

（2026 年 3 月），迭代极为活跃，几乎每周都有新版本发布。

独立后最重要的变化是

框架扩展

：从 React 专属库扩展为支持

React、原生 JavaScript 和 Vue

（通过 motion-v 包）。核心特性包括：声明式 API、弹簧物理动画、

Layout 布局动画

（业界领先，仅 React 支持）、AnimatePresence（元素进出场）、手势检测（hover/tap/drag）、滚动联动动画、SVG 动画、Variants 变体系统，以及新增的 animateSequence（基于 WAAPI 的序列动画）。

Motion 采用

混合动画引擎

——结合 JavaScript 动画与原生浏览器 Web Animations API，在 transform、opacity 等合成器线程属性上实现硬件加速。官方基准测试显示，

从未知值开始动画时比 GSAP 快 2.5 倍，单位转换快 6 倍

。

Motion 的 npm 下载量在五个库中

遥遥领先

，月下载量超过

1800 万

，自称"全球增长最快的动画库"。MIT 协议确保完全开放使用，无任何商业限制。赞助商阵容豪华：Framer、Figma、Sanity、Tailwind CSS、LottieFiles。

Motion+

（$299 一次性付费）提供 330+ 示例、100+ 教程、高级组件（Carousel、Cursor、Ticker、Typewriter、ScrambleText、splitText）、AI Kit、私有 Discord 和早期特性访问。这是一个典型的"核心开源 + 增值付费"商业模式。

Motion 的最大优势是声明式 API 和 React 生态的深度整合。

对 React 开发者而言，动画逻辑通过 props 声明，与组件模型天然融合；Layout 动画和 AnimatePresence 是其独有的杀手级功能，GSAP 没有同等替代。tree-shaking 后包体积极为紧凑——useAnimate mini 模式仅

2.3 KB

，比 GSAP 等价功能小 90%。文档质量优秀，motion.dev 组织清晰，配有 80+ 免费示例和 30+ 教程。

劣势在于

：React 之外的支持仍不如 React 成熟——原生 JS 版缺少 Layout 动画；完整导入（不做 tree-shaking）可达 50 KB+；复杂时间轴编排能力仍不及 GSAP；需要现代浏览器（不支持 IE11，但实际覆盖率已超 99%）。学习曲线中等：基础动画极易上手，但 Variants、AnimatePresence、Motion Values 等高级概念需要深入学习。

官方 MCP Server（Motion Studio MCP）

：提供完整文档、330+ 示例源码、自定义最佳实践规则集、可视化编辑器保存的过渡效果，兼容 VS Code、Cursor、Windsurf、Claude Desktop、Claude Code。安装命令：npx -y https://api.motion.dev/registry.tgz?package=motion-studio-mcp&version=latest

AI Kit（$299）

：包含 /motion skill（深度 API 知识，自动检测框架）、/motion-audit skill（扫描代码库评估动画性能等级 S→F）、/see-transition skill（视觉化缓动曲线）、CSS spring 生成器和文档搜索工具

LLM 友好文档

：llms.motion.dev 提供 Markdown 格式的完整文档，专为 LLM 消费优化——每个 motion.dev/docs/X 页面都有对应的 llms.motion.dev/docs/X.md官方声称"零幻觉"——代码直接来自官方仓库，而非通用训练数据

Motion 本身不是演示工具，但与

Slidev 深度集成

——Slidev 内置 @vueuse/motion 支持，开发者可直接在 Markdown 幻灯片中使用 v-motion :initial :enter :click-N :leave 语法。在 React 生态中，使用 AnimatePresence 构建自定义幻灯片组件非常直观。Motion+ 的高级组件（Carousel、Typewriter、ScrambleText、AnimateNumber）可直接用于演示场景。

无内置视频导出

，动画以 Web 页面形式呈现，可通过部署为 URL 分享。

p5.js 与前几个库的定位截然不同——它不是 UI 动画库，而是

创意编程平台

。由 Lauren Lee McCarthy 于 2013 年创建，是 Processing（Java）的 JavaScript 现代重写版，隶属于

Processing Foundation

（501(c)(3) 非营利组织）。当前最新版本

v2.2.2

，

v2.0 于 2025 年 4 月正式发布

，是十年来最大的版本更新。

v2.0 带来了重要新特性：

可变字体支持

（动态调整字重、字宽、倾斜度，textToContours 速度提升 3.5 倍）、

JavaScript Shaders（p5.strands）

——用 JavaScript 编写 GPU 加速着色器代替 GLSL、扩展色彩空间（LAB、LCH、OKLab、OKLCH 以及 HDR Display P3）、

WebGPU 渲染

（实验性）以及 async/await 替代 preload 的现代异步模式。

目标用户群体独特：

艺术家、设计师、教育者、编程初学者和创意编码者

。典型场景包括生成艺术、数据可视化、互动装置、音视觉体验和教学演示。

指标数据GitHub 地址Star 数~23,400开源协议LGPL-2.1贡献者600+（四库中最多）维护组织Processing Foundation（非营利）包体积~1 MB minified（v1.x）；v2.0 有所缩减商业版本无，完全免费

p5.js 拥有四个库中

最大的贡献者社区

（600+），这得益于其教育属性和非营利组织的包容文化。采用轮换领导模式，当前项目负责人为 Kit Kuksenok。值得注意的是，p5.js 的许可证是

LGPL-2.1

（而非 MIT），这意味着对库本身的修改需要开源，但在应用中使用不受限制。项目明确表示

不接受完全由 AI 生成的代码贡献

。

p5.js 的核心优势是极低的入门门槛。

setup + draw 的编程模式直观易懂；Friendly Error System（FES）提供人性化的错误提示；

内置 Web 编辑器

（http://editor.p5js.org）实现零配置即时编码。Dan Shiffman 的"The Coding Train" YouTube 频道提供了数百小时的高质量教程。Processing 社区积累了 15 年的创意编码资源。

主要劣势是性能和包体积。

p5.js 比原生 Canvas API

慢 4-10 倍

（社区基准测试数据）；完整库约

1 MB

（minified），远大于其他三个库；

不支持 tree-shaking

，必须加载整个库。全局命名空间污染也是一个架构问题（可通过 instance mode 缓解）。p5.js 没有内置的时间轴/关键帧动画系统，不适合精确的 UI 动效编排，更适合持续运行的生成式视觉。

p5.js 在 AI 方面有两个重要连接点：

ml5.js

（http://ml5js.org）：基于 TensorFlow.js 的友好 ML 库，提供图像分类、物体检测、PoseNet、HandPose、FaceMesh、声音分类和浏览器端神经网络训练——这是

四个库中唯一拥有专门 ML 伴侣库

的

社区 MCP Server

：Adil Moujahid 构建了完整的 p5.js + Claude Desktop MCP 工作流（2025 年 6 月发布），架构为 Claude Desktop → MCP Server（13 个工具）→ WebSocket Bridge → p5.js Editor，实现"提示词到草图"的实时创作

P5 AI Studio

（p5js.ai）：集成 GPT、Claude、Gemini 的免费 p5.js IDE

p5.js 的简洁 API 和海量训练数据使其成为

LLM 最擅长生成代码的创意库之一

。自包含的单文件草图、可视化输出易于验证正确性，"Vibe Coding"（用自然语言描述视觉效果让 AI 生成代码）在 p5.js 社区尤为流行。

p5.js

不适合制作传统产品演示幻灯片

。它没有幻灯片系统、没有内置视频导出（需借助社区库 p5.capture 导出 WebM/GIF/MP4）、没有与 reveal.js 或 Slidev 的官方集成。但 p5.js 在以下场景有独特价值：作为

视觉亮点嵌入演示

——生成艺术背景、互动数据可视化、概念原型动画。推荐工作流是：用 p5.js 创作单个惊艳的动画作品 → 通过 p5.capture 录制为视频 → 嵌入常规幻灯片。

Motion Canvas 由 YouTuber

aarthificial

创建，定位非常精准——

用 TypeScript 代码创建信息型向量动画，并与语音旁白同步

。如果你看过 3Blue1Brown 的数学可视化视频（使用 Python 库 Manim），Motion Canvas 就是 JavaScript 生态中的同类工具。

它同时是两个东西：一个 TypeScript 动画库，和一个提供实时预览的 Web 编辑器。编辑器基于 Vite 构建，代码修改后动画自动热更新。其编程模型独树一帜——

使用 Generator 函数以命令式方式定义动画

，yield* 暂停执行来渲染帧：

export default makeScene2D(function* (view) { const circle = createRef; view.add; yield* circle.scale(2, 0.3); // 放大，持续 0.3 秒 yield* waitUntil('event'); // 等待时间轴标记 yield* circle.fill('green', 0.3); // 变色});

这种"

让代码执行本身定义动画

"的方式，比声明式关键帧更接近编程直觉——你描述"发生什么"，按步骤推进，关注持续时间和加速度而非硬编码帧号。

核心组件包括：2D 渲染器（Circle、Rect、Line、Txt、Img、Video、Code 等内置节点）、信号系统（Signals）实现响应式属性绑定、Layout 布局引擎（Flexbox 风格）、

代码高亮节点

（支持自动 diff 过渡动画——这是做编程教程视频的杀手功能）、音频同步（项目级音轨 + 时间轴标记 waitUntil）、自定义着色器（GLSL）、以及场景编排系统（多 Scene 项目）。

视频导出通过

@motion-canvas/ffmpeg

插件实现——安装后在编辑器中点击 RENDER 即可直出 MP4，支持帧率（24/30/60）、分辨率和音频嵌入配置。也可选择默认的图片序列导出器（PNG/JPEG/WebP），再用后期工具合成。

指标数据GitHub 地址Star 数~18,200开源协议MIT（真正开源）最新版本v3.17.2（2024 年 12 月）贡献者~80+npm 周下载~3,000（@motion-canvas/core）Discord活跃社区商业版本无，通过 Patreon 赞助

Motion Canvas 的社区规模和下载量远小于其他四个库，但在

技术教育视频制作

这个垂直领域有忠实的用户群。它采用

MIT 协议

——与 Remotion 的自定义商业许可形成鲜明对比，这也是 Remotion 官方比较文档中明确提到的差异。

需要注意的一个信号是：

最新版本 v3.17.2 发布于 2024 年 12 月

，距今已超过一年未发布新版本。npm 上标注"last published: a year ago"。这不一定意味着项目被放弃（开源项目常有开发节奏起伏），但对长期采用来说是一个需要关注的风险因素。https://motioncanvas.io/ 这个网站也不知道什么原因无法访问。

Motion Canvas 的最大优势是其编程模型对程序员极为友好。

Generator 函数让动画逻辑读起来像伪代码——顺序执行、条件分支、循环复用，全部用标准 TypeScript。内置的

Code 节点

支持语法高亮和自动 diff 过渡，是做编程教程视频的不二之选。waitUntil 配合编辑器时间轴上的标记点，实现了精确的语音同步。MIT 协议完全免费，无任何商业限制。与 Remotion 相比，Motion Canvas

不依赖 React

——它使用类似 JSX 的语法来声明节点，但底层是自己的 Canvas 渲染器，学习曲线反而更低。

劣势方面

，Motion Canvas 基于 HTML Canvas 而非 DOM——这意味着无法利用 CSS 样式、Web 字体加载、浏览器布局引擎等 Web 平台能力；渲染为像素而非矢量，放大后清晰度受限于分辨率设置。生态系统较小——社区插件有限（如 @hhenrichsen/motion-canvas-graphing），没有 Remotion 那样丰富的模板和辅助包。npm 下载量仅 ~3,000/周，社区问答资源不如其他库丰富。

更新节奏放缓

是当前最大的不确定性——对于正在评估的新项目，需要观察项目后续是否恢复活跃。

Motion Canvas 的 AI 集成处于

社区驱动的早期阶段

，没有官方 AI 工具链：

LobeHub Skill

：第三方社区提交了 Motion Canvas 技能（neversight-skills_feed-motion-canvas），包含完整的 API 参考、组件文档、项目结构指南和最佳实践——可被 AI 助手通过 SKILL.md 协议消费

HuggingFace MCP Hackathon

：2025 年 6 月的 Agents-MCP-Hackathon 中，社区构建了一套 Motion Canvas MCP 工具链——包括 Gradio MCP Server（构建项目）、Motion Canvas Player（渲染）、MCP Fileserver（读写文件和文档）

无官方 MCP Server 或 LLM 文档端点

：与 Motion 的 llms.motion.dev 和 Remotion 的 @remotion/mcp 相比，Motion Canvas 缺少官方的 AI 集成基础设施

由于 Motion Canvas 的代码库和 API 规模相对较小，LLM 生成代码的准确度尚可，但训练数据中 Motion Canvas 的覆盖远不如 p5.js 或 Motion。建议在提示词中明确包含 API 参考和示例代码片段。

Motion Canvas

非常适合制作技术演讲和教育类视频内容

——这是它的设计初衷。在"产品演示"这个场景中，它尤其适合：

代码演示动画

：Code 节点的 diff 过渡功能可以逐步展示代码变化，比静态截图生动得多

架构图动画

：用 Circle、Rect、Line、Arrow 等图元构建系统架构，逐步揭示数据流

数据可视化讲解

：配合 Graphing 插件制作图表动画

语音同步

：内置音频同步和时间标记，适合制作配音讲解视频

它可以直出 MP4 视频，但

没有交互式幻灯片系统

——输出物是视频而非可点击的演示。对比 Remotion，Motion Canvas 更轻量、更易上手、完全免费，但生态和功能广度不及 Remotion。如果你的产品演示主要是

技术讲解型

（展示代码、架构、数据流），Motion Canvas 可能比 Remotion 更高效。

Remotion 由 Jonny Burger 创建（Remotion AG，瑞士注册），

是几个库中唯一以视频输出为核心目标的框架

。其核心理念颠覆传统：

React 组件即视频帧——每一帧是帧号的纯函数

，实现确定性渲染和程序化视频生产。当前版本

v4.0.434

（2026 年 3 月 6 日），开发极为活跃，几乎每日提交。

关键能力包括：

Remotion Studio

（浏览器端预览/编辑工具，含时间轴、Props 编辑器）、

Remotion Player

（@remotion/player，在网页中实时渲染 React 动画）、

Remotion Lambda

（AWS Lambda 分布式并行渲染）、内置 Transition 系统（fade、slide、wipe、flip、clockWipe、iris）、内置 FFmpeg 6.0（Rust 二进制，无需外部安装）、TailwindCSS v4 一等支持，以及多种输出格式：

MP4（H.264/H.265）、WebM（VP8/VP9）、ProRes、GIF 和静态图片

。

Remotion 的许可证模式值得特别关注：

个人、学生、非营利组织和 3 人及以下公司

可免费商用（无限制）；

4 人及以上组织必须购买商业授权

。定价分层："Remotion for Creators"（$25/月/seat，低量团队）、"Remotion for Automators"（$0.01/次渲染，最低 $100/月，面向 SaaS 平台）、"Enterprise"（起步 $500/月）。源代码完全可见但

不允许修改后转售

。这意味着 Remotion 虽然代码透明，但

不是传统意义上的"开源软件"

。

优缺点要点

Remotion 的核心优势是将整个 React 生态转化为视频制作能力。

懂 React 就懂 Remotion——CSS、Canvas、SVG、WebGL、任何 npm 包都能用于视频创作。确定性渲染意味着每帧可复现，天然适合 Git 版本控制和 CI/CD 流水线。Remotion Lambda 支持将渲染任务拆分到多个 Lambda 函数并行处理，实现大规模视频生产。

35+ 官方模板

覆盖 Next.js、React Three Fiber 3D、Audiogram、代码动画等场景。文档质量极高（700+ 页），支持 Markdown 导出，对 AI 代理极为友好。

劣势方面

，Remotion 要求 React/JavaScript 开发技能，对非技术用户完全不适用；渲染计算密集——复杂场景对 CPU 要求高，Lambda/云端无 GPU 加速；WebM 编码较慢；自定义许可证可能令部分开源项目望而却步。对于一次性的简短视频，传统编辑器（如 CapCut、DaVinci）实际上更快。

Remotion 的 AI 集成是 2026 年初的一大亮点，与 Claude Code 的联动在 X（Twitter）上获得了

600 万次浏览

：

官方 MCP Server（@remotion/mcp）

：基于 CrawlChat 技术将文档索引为向量数据库，安装：npx @remotion/mcp@latest，兼容 Cursor、VS Code Copilot、Claude Desktop

Claude Code 一等集成

：官方提供从项目创建到 AI 驱动视频生成的完整工作流（npx create-video@latest → 安装 Skills → Claude Code 提示词驱动）

AI Agent Skills 系统

：remotion-best-practices skill 已获

12.2 万次安装

，涵盖动画、资源、音频、字幕、图表、3D、字体等 20+ 规则文件

AI 友好文档

：每页提供"Copy as Markdown"按钮，URL 添加 .md 后缀即可获取原始 Markdown

Prompt-to-Motion-Graphics SaaS 模板

：官方提供的完整 SaaS 启动模板，用于构建 AI 驱动的视频生成产品

Prompt Gallery

（remotion.dev/prompts）：包含产品演示等场景的提示词集合组件配合 slide、fade、wipe 等过渡效果，本质上就是一个幻灯片过渡系统。每个"幻灯片"是一个组件，具有明确的时长定义。开发者可以用 React 组件

像素级复刻产品 UI

，填充真实或模拟数据，通过一行代码更改即可全局更新品牌视觉。输出能力是 Remotion 的绝对优势：直接导出

MP4、WebM、GIF、ProRes

——这是其他三个库都无法原生实现的。通过

组件还可将动画嵌入网页实时播放。官方 Prompt Gallery 中已有"Product Demo for Presscut"等具体产品演示案例。不过，Remotion 本质上输出的是

视频而非交互式幻灯片

，没有演讲者备注或传统幻灯片隐喻。

维度anime.jsMotionp5.jsMotion CanvasRemotion最新版本v4.3.6v12.35.2v2.2.2v3.17.2v4.0.434GitHub Star~66,700~30,500~23,400~18,200~38,960npm 周下载~70 万~810 万—~3,000~23 万协议MITMITLGPL-2.1MIT自定义 Source-Available包体积10 KB gzip2.3-18 KB~1 MB框架级框架级框架依赖无React/Vue/原生无无（自有渲染）React渲染目标DOM/SVGDOM/SVGCanvas/WebGLCanvasDOM（Chromium）编程模型命令式 API声明式 Propssetup/draw 循环Generator 命令式声明式（帧函数）核心输出Web 动画UI 动画视觉艺术视频/图片序列视频文件官方 MCP✅ 有✅ 有（最完善）❌（社区版）❌（社区版）✅ 有视频导出❌❌❌（需社区库）✅ FFmpeg 插件✅ 原生内置音频同步❌❌❌✅ 内置✅ 内置代码动画❌❌❌✅ Code 节点需第三方商业授权免费$299 增值免费免费4人+需付费学习曲线低中极低中中高（需 React）更新活跃度活跃极活跃活跃⚠️ 放缓极活跃演示适用性⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

这五个库覆盖了 JavaScript 动画生态的较为完整的光谱，但它们

几乎不存在直接竞争关系

——各自解决截然不同的问题。针对"经常做产品演示 slides，要求涵盖动画"的核心需求，这里给出具体建议：

如果产品演示主要面向开发者或技术决策者，需要展示代码变化、系统架构图动画、数据流可视化，

Motion Canvas 是性价比最高的选择

。它的 Generator 编程模型让你像写脚本一样编排动画，Code 节点的 diff 过渡是展示技术细节的利器，waitUntil 配合语音同步让讲解节奏精确可控——而且完全免费、MIT 协议。唯一顾虑是更新节奏放缓，但现有 v3.17 功能已足够成熟。

如果需要更丰富的视觉表现（产品 UI 复刻、品牌一致性、复杂过渡效果），或者需要大规模自动化生成视频，

Remotion 是终极方案

。代价是更高的学习成本和商业授权费用。

如果演示以交互式网页为载体（而非视频），

Motion + Slidev 的组合

最为优雅。Slidev 用 Markdown 写 slides，Motion 提供流畅的 UI 动画，结果是一个可部署为 URL 的交互式演示，支持演讲者模式、代码高亮、LaTeX 公式。对 React 项目，也可以直接用 Motion 构建自定义的单页演示应用。

p5.js 不适合做完整的演示框架，但它可以产出

令人难忘的视觉亮点

。比如用生成艺术做片头动画，用粒子系统可视化实时数据流——录制后嵌入常规幻灯片或 Remotion 视频中。

如果只需要为已有的 HTML 演示（如 reveal.js）添加一些元素进场、SVG 描边、数字跳动等动效，anime.js 是最轻量的选择——10 KB 引入，几行代码搞定。

日常技术讲解视频 → Motion Canvas

：轻量、免费、TypeScript 原生、Code 节点 + 音频同步，最适合做类似"架构讲解"或"SQL 特性演示"的技术视频

高规格产品演示视频 → Remotion

：当需要复刻产品 UI、品牌一致性、多格式输出时，Remotion 的 React 生态优势和 AI 工具链（Claude Code 集成）能大幅提升产出效率

两者都支持视频导出，都有 AI 集成管道，且编程模型互补——Motion Canvas 的命令式适合步骤化讲解，Remotion 的声明式适合画面丰富的产品展示。