用代码写视频：Kimi Code + Remotion 完整实战教程(附免费API获取方法)

本文由 莫潇羽@无忆研习社 原创，转载请注明出处：www.wuyi.wiki

在短视频和自媒体盛行的今天，视频制作已经成为许多开发者和内容创作者的刚需。传统的视频剪辑软件虽然功能强大，但面对批量化、程序化的视频制作需求时往往力不从心。如果你是一名前端开发者，或者对React有一定了解，那么今天要介绍的这套技术方案会让你眼前一亮——用代码来写视频。

没错，就是像写网页一样写视频。通过 Remotion 这个框架，你可以用 React 组件来构建视频的每一帧画面；再结合 Kimi Code 这款国产 AI 编程工具，你甚至可以通过自然语言描述来生成视频代码。这种方式不仅效率极高，还能保证视频风格的一致性，非常适合需要批量产出内容的场景。

本文将从零开始，手把手带你走完整个流程。无论你是刚接触编程的新手，还是想提升视频制作效率的老手，都能从中有所收获。莫潇羽整理这份教程花费了不少时间，希望能帮助更多朋友掌握这项技能。

什么是 Remotion？为什么选择它？

Remotion 框架简介

Remotion 是一个开源的视频制作框架，它的核心理念是"用 React 写视频"。如果你了解前端开发，就知道 React 是一个非常流行的 JavaScript 库，用于构建用户界面。Remotion 巧妙地将这套开发模式引入到视频制作领域，让开发者可以用熟悉的技术栈来创建动态视频内容。

从技术原理上讲，视频本质上是一系列连续的图像帧。Remotion 利用 React 的组件化思想，让你可以用代码定义每一帧画面应该呈现什么内容。它会根据时间线（timeline）和帧率（fps）来计算当前帧的状态，然后渲染出对应的画面。最终，这些画面被合成为一个完整的视频文件。

Remotion 的官方网站是 https://www.remotion.dev/ ，GitHub 仓库地址为 https://github.com/remotion-dev/remotion 。这是一个活跃的开源项目，社区支持良好。

Remotion 的核心优势

莫潇羽@无忆研习社 在实际使用中发现，Remotion 有以下几个显著优势：

• 前端技术栈友好：如果你会 React，上手 Remotion 几乎没有门槛。你可以使用 CSS、Canvas、SVG、WebGL 等各种 Web 技术来设计视频画面。
• 可编程性强：视频的每个元素都可以通过变量、函数、API、算法来控制。这意味着你可以轻松实现数据驱动的视频，比如根据不同用户数据生成个性化视频。
• 组件复用：React 的组件化思想在视频制作中同样适用。你可以把常用的视觉元素封装成组件，在不同的视频项目中复用。
• 实时预览：开发过程中可以在浏览器里实时预览视频效果，支持热更新。这让调试变得非常高效。
• 多种输出格式：支持导出 MP4、WebM、GIF 等多种格式，可以满足不同平台的需求。

适用场景举例

在什么情况下适合使用 Remotion 来制作视频呢？以下是一些典型场景：

• 数据可视化视频：比如股票走势图、用户增长曲线、统计报告动画等。
• 个性化视频：根据用户信息生成定制化内容，比如年度回顾、生日祝福等。
• 产品宣传视频：可以把产品数据、特性说明等内容程序化地生成视频。
• 社交媒体素材：批量制作具有统一风格的短视频、动态图等。
• 技术演示动画：代码高亮、终端动画、架构图动画等。

Kimi Code：国产 AI 编程的新选择

什么是 Kimi Code

Kimi Code 是月之暗面（Moonshot AI）推出的 AI 编程工具，它基于 Kimi K2.5 多模态大模型，可以帮助开发者快速完成各种编程任务。与海外的 Claude Code、GitHub Copilot 等工具类似，Kimi Code 也提供了代码生成、代码补全、代码解释、Bug 修复等功能。

Kimi Code 的特点在于它对中文的理解非常出色，而且针对国内开发者的使用习惯做了优化。更重要的是，它提供了命令行工具（CLI）和 VS Code 插件等多种使用方式，可以灵活地融入你现有的开发工作流。

Kimi Code 的官方网站是 https://www.kimi.com/code ，CLI 工具的 GitHub 仓库是 https://github.com/MoonshotAI/kimi-cli 。

Kimi K2.5 模型介绍

Kimi K2.5 是 Kimi Code 背后的大语言模型。根据官方介绍，它是一个拥有 1 万亿参数的多模态混合专家（MoE）模型，在视觉理解和代码生成方面都有出色的表现。

从实际使用体验来看，Kimi K2.5 在以下几个方面表现突出：

• 多模态理解：可以接收图片和视频作为输入，理解视觉内容并生成相应的代码。
• 长上下文支持：支持最长 256K 的上下文窗口，可以处理大型代码仓库。
• Agent 能力：具备自主规划和执行任务的能力，可以在执行过程中动态调整策略。
• 工具调用：支持调用外部工具，比如搜索网页、执行 Shell 命令等。

为什么用 Kimi Code 来辅助 Remotion 开发

莫潇羽@无忆研习社 尝试将 Kimi Code 与 Remotion 结合使用后发现，这是一种非常高效的工作方式。原因如下：

• 降低学习门槛：即使你对 Remotion 的 API 不够熟悉，也可以通过自然语言描述让 Kimi Code 生成相应的代码。
• 加速开发过程：很多重复性的代码编写工作可以交给 AI 完成，你只需要专注于创意和效果调整。
• 视觉辅助编程：Kimi K2.5 支持图片输入，你可以把设计稿、截图发给它，让它生成对应的视频组件代码。
• 大仓库支持：对于已经积累了大量素材和组件的项目，Kimi Code 的长上下文能力可以让它更好地理解项目结构，给出更准确的建议。

环境准备：安装必要的工具

在正式开始之前，我们需要准备好开发环境。以下是需要安装的工具清单。

Node.js 安装

Remotion 是基于 Node.js 的，所以首先需要确保你的电脑上安装了 Node.js。建议安装 LTS（长期支持）版本。

Windows/macOS/Linux 通用方法：

访问 Node.js 官网 https://nodejs.org/ ，下载对应操作系统的安装包，然后按照提示完成安装。

安装完成后，打开终端（Windows 上是 PowerShell 或 CMD，macOS/Linux 上是 Terminal），运行以下命令验证安装是否成功：

node --version
npm --version

如果能看到版本号输出，说明安装成功了。

包管理器选择

Node.js 自带 npm 包管理器，但莫潇羽更推荐使用 pnpm，它的安装速度更快，磁盘占用更小。

安装 pnpm：

npm install -g pnpm

当然，使用 npm 或 yarn 也完全可以，本文后续的命令会以 pnpm 为例，你可以根据自己的习惯替换。

Kimi Code CLI 安装

Kimi Code 提供了命令行工具（CLI），可以在终端中直接与 AI 交互。这是使用 Kimi Code 最灵活的方式。

快速安装方法（推荐）：

Linux 和 macOS 用户可以运行：

curl -LsSf https://cdn.kimi.com/binaries/kimi-cli/install.sh | bash

Windows 用户可以在 PowerShell 中运行：

Invoke-RestMethod https://cdn.kimi.com/binaries/kimi-cli/install.ps1 | Invoke-Expression

这个脚本会自动安装 uv（一个 Python 包管理器）和 Kimi CLI。

使用 uv 手动安装：

如果你的系统已经有 uv，可以直接安装：

uv tool install --python 3.13 kimi-cli

安装完成后，运行以下命令验证：

kimi --version

注意事项： macOS 用户首次运行 kimi 命令时，可能会因为系统安全检查而等待较长时间（最多 10 秒左右），这是正常现象，请耐心等待。

Kimi Code 登录与配置

安装好 Kimi CLI 后，需要进行登录配置才能使用。

方法一：使用 Kimi 账号登录（推荐）

直接在终端运行：

kimi

进入 Kimi CLI 后，输入：

/login

系统会打开浏览器引导你完成登录授权。登录成功后，Kimi CLI 会自动配置好可用的模型。

方法二：使用 API Key

如果你有 Moonshot 开放平台的 API Key，也可以手动配置：

kimi

进入后输入：

/setup

然后根据提示选择平台、输入 API Key、选择模型即可。

免费使用 Kimi K2.5 的方案

这里莫潇羽@无忆研习社 要分享一个实用技巧：如何免费使用 Kimi K2.5 模型。

通过英伟达 NIM 平台获取免费 API

英伟达的 NIM（NVIDIA Inference Microservices）平台提供了多种大模型的免费试用 API，其中就包括 Kimi K2.5。

获取 API Key 的步骤：

• 访问英伟达 Build 平台：https://build.nvidia.com/moonshotai/kimi-k2.5
• 如果还没有英伟达账号，需要先注册一个。
• 登录后，在页面上找到"View Code"或"Get API Key"按钮。
• 点击后会显示一个自动生成的 API Key。

配置环境变量：

获取到 API Key 后，需要设置以下环境变量才能让 Kimi CLI 使用英伟达的 API：

Linux/macOS：

export KIMI_BASE_URL="https://integrate.api.nvidia.com/v1"
export KIMI_MODEL_NAME="moonshotai/kimi-k2.5"
export KIMI_MODEL_MAX_CONTEXT_SIZE="262144"
export KIMI_API_KEY="你的密钥"

Windows PowerShell：

$env:KIMI_BASE_URL="https://integrate.api.nvidia.com/v1"
$env:KIMI_MODEL_NAME="moonshotai/kimi-k2.5"
$env:KIMI_MODEL_MAX_CONTEXT_SIZE="262144"
$env:KIMI_API_KEY="你的密钥"

配置好环境变量后，运行 kimi 命令就可以开始使用了。

使用注意事项：

目前英伟达没有明确公布这个免费 API 的使用限制，但从实际体验来看，响应速度可能会比官方 API 稍慢一些，这可能是因为使用人数较多导致的算力分配问题。建议在对响应速度要求不高的学习和测试场景下使用这个方案。

创建 Remotion 项目

环境准备好之后，我们来创建一个 Remotion 项目。

初始化项目

Remotion 提供了脚手架工具来快速创建项目。打开终端，运行以下命令：

pnpm create video

或者使用 npm：

npx create-video@latest

执行后会出现一个交互式界面，让你选择项目模板和配置选项。

选择模板：

Remotion 提供了多个模板，对于初学者，建议选择"Hello World"模板，它足够简单，不会对你的学习造成干扰。

项目命名：

输入你想要的项目名称，比如 my-video-project。

选择 CSS 方案：

建议选择 Tailwind CSS，它是一个实用优先的 CSS 框架，可以让你快速编写样式。

是否添加 agent skills：

这是 Remotion 的一个新功能，用于让 AI 更好地理解项目结构。建议选择"是"。

安装依赖

项目创建完成后，进入项目目录：

cd my-video-project

然后安装依赖：

pnpm install

这个过程可能需要几分钟，取决于你的网络速度。

配置 ESBuild（重要）

莫潇羽@无忆研习社 在实践中发现，有一个配置细节需要注意。为了避免构建时出现问题，建议在项目中启用 ESBuild。

打开项目根目录下的配置文件，确保 ESBuild 选项被启用。具体配置方式可能因模板版本而异，如果遇到构建报错，可以检查这个配置。

启动开发服务器

运行以下命令启动 Remotion Studio：

pnpm dev

启动成功后，会在终端显示一个本地 URL（通常是 http://localhost:3000）。用浏览器打开这个地址，你就可以看到 Remotion 的可视化编辑界面了。

在这个界面中，你可以：

• 预览视频效果
• 调整时间线
• 查看不同的 Composition（组合）
• 修改参数并实时看到效果

Remotion 核心概念详解

在开始实战之前，我们需要理解 Remotion 的几个核心概念。莫潇羽@无忆研习社 会用通俗易懂的语言来解释这些概念，帮助小白读者建立正确的认知。

Composition（组合）

Composition 是 Remotion 中最核心的概念，你可以把它理解为"一个视频"。每个 Composition 包含以下信息：

• id：组合的唯一标识符，用于在代码中引用。
• component：渲染这个视频的 React 组件。
• durationInFrames：视频的总帧数。
• fps：帧率（每秒多少帧）。
• width/height：视频的分辨率。

举个例子，如果你设置 fps: 30 和 durationInFrames: 150，那么这个视频的时长就是 150 / 30 = 5 秒。

Sequence（序列）

Sequence 用于在时间线上安排内容。你可以把它理解为视频中的一个"片段"。通过设置 from 属性，你可以指定这个片段从第几帧开始播放。

比如你有两个动画，想让第二个动画在第一个结束后才开始，就可以用 Sequence 来实现。

useCurrentFrame 和 useVideoConfig

这两个是 Remotion 提供的 React Hooks：

• useCurrentFrame()：返回当前渲染的是第几帧。你可以根据帧数来计算动画效果。
• useVideoConfig()：返回当前视频的配置信息，包括 fps、宽度、高度、总帧数等。

利用这两个 Hook，你可以实现基于时间的动画效果。比如：

const frame = useCurrentFrame();
const opacity = Math.min(1, frame / 30); // 前30帧淡入

渲染原理

Remotion 的渲染过程可以简化为：

• 遍历视频的每一帧（从 0 到 durationInFrames - 1）。
• 对于每一帧，调用你的 React 组件，传入当前帧数。
• 将组件渲染为图像。
• 把所有图像编码成视频文件。

在开发过程中，Remotion 会启动一个 Chromium 浏览器来渲染这些帧。最终渲染时，它会使用 FFmpeg 来编码视频。

使用 Kimi Code 创建视频动画

现在，让我们进入实战环节。莫潇羽@无忆研习社 将演示如何使用 Kimi Code 来辅助创建 Remotion 视频。

在项目目录启动 Kimi Code

首先，确保你已经进入了 Remotion 项目目录，然后启动 Kimi Code：

cd my-video-project
kimi

启动后，Kimi Code 会自动扫描项目结构，建立对项目的理解。

初始化项目文档

为了让 Kimi Code 更好地理解你的项目，可以先让它生成一份项目文档。在 Kimi CLI 中输入：

/init

这个命令会让 Kimi Code 分析项目结构，并生成一个 AGENTS.md 文件（或类似的文档），里面包含了项目的基本信息、文件结构、主要功能等。这有助于后续的对话中 AI 给出更准确的建议。

添加自定义规则

在使用 AI 编程时，设置一些规则可以让输出更符合你的预期。比如，你可能不希望 AI 在代码中使用 emoji 字符，而是使用专业的图标库。

在 Kimi CLI 中输入：

我想请你使用 Lucide 的图标，而不是 emoji。当需要使用图标时，优先使用 lucide-react 这个图标库。

Kimi Code 会记住这个偏好，在后续生成代码时遵循这个规则。

Lucide 是一个开源的图标库，官网是 https://lucide.dev/ ，它提供了 1600 多个精美的 SVG 图标，非常适合在 React 项目中使用。

创建第一个视频场景

让我们尝试创建一个简单的折线图动画。在 Kimi CLI 中输入：

我想请你帮我创建一个新的场景，是一个折线图动画。请随机生成一些数据，让折线图有逐渐绘制出来的效果。

Kimi Code 会根据你的描述，生成相应的 React 组件代码，并自动创建或修改项目中的文件。

生成完成后，你可以在 Remotion Studio 中预览效果。如果基本效果满意，但想调整样式，可以继续对话：

这个效果不错，但是配色有点普通，我想换成科技感更强的暗黑主题，类似 Vercel 官网那种风格，深色背景、高对比度、蓝色或青色作为强调色。

Kimi Code 会理解你的需求，修改组件的样式代码。

复刻终端动画视频

现在让我们尝试一个更复杂的例子：复刻一个终端打字动画。这种视频效果在技术类自媒体中非常常见，展示效果很酷。

莫潇羽@无忆研习社 把这个任务分解为以下几个步骤：

第一步：明确需求

在 Kimi CLI 中，先和 AI 讨论需求，而不是直接让它写代码：

我想创建一个终端动画视频，大概的效果是这样的：
1. 首先显示一个 Mac 风格的终端窗口
2. 终端内有打字机效果，逐字输入一个命令
3. 打字时显示光标，命令输入完成后停顿 0.5 秒
4. 然后逐行显示命令的执行结果
5. 最后终端窗口做一个翻转动画，展示一个 Logo

我们先讨论一下，不要急着写代码，帮我梳理一下这个场景需要哪些组件和动画。

这种"先聊再写"的方式非常重要。在实际开发中，和 AI 讨论的时间应该占到整体时间的三分之一甚至更多。如果沟通充分，执行时基本不会出太大问题。

第二步：确认方案

Kimi Code 会给出一个初步方案，包括：

• Terminal 组件：终端窗口的外观
• TypeWriter 组件：打字机效果
• CommandOutput 组件：命令输出显示
• FlipAnimation 组件：翻转动画
• Logo 组件：最终展示的标志

你可以根据 AI 的建议进行调整，比如：

方案看起来不错。关于 Logo 部分，我想使用 lucide-react 里面的图标，请帮我选择一个合适的。另外，终端窗口的顶部要有红黄绿三个按钮，模拟 Mac 的窗口样式。

第三步：开始实现

确认方案后，让 AI 开始编写代码：

好的，请你帮我实现这个场景。

Kimi Code 会开始创建文件、编写代码。在这个过程中，它可能会：

• 创建新的组件文件
• 修改 Root.tsx 注册新的 Composition
• 安装必要的依赖包

第四步：调试和优化

代码生成后，在 Remotion Studio 中预览效果。如果发现问题，继续和 AI 沟通：

效果基本可以了，但是有几个问题需要修复：
1. 打字速度有点太快，能不能慢一点？
2. 光标闪烁的频率不太自然
3. 翻转动画结束后，Logo 的位置没有居中

通过这种迭代式的开发，你可以逐步完善视频效果。

渲染导出视频

当视频效果满意后，就可以渲染导出了。在 Remotion Studio 界面中，点击"Render"按钮。

Remotion 会：

• 下载一个 Chromium 浏览器（如果还没有）
• 逐帧渲染视频内容
• 使用 FFmpeg 编码成视频文件

渲染时间取决于视频长度、分辨率和你的电脑性能。渲染完成后，视频文件会保存在项目的 out 目录中。

你也可以使用命令行渲染：

pnpm remotion render src/index.ts MyComposition out/video.mp4

在大型代码仓库中使用 Kimi Code

当你积累了一定数量的视频素材和组件后，项目可能会变得比较庞大。这时候，如何有效地使用 Kimi Code 就变得很重要了。

项目组织的最佳实践

莫潇羽@无忆研习社 在实践中发现，Remotion 项目的组织方式会显著影响开发效率。这里分享一些经验：

Sequence 模式 vs Composition 模式

在 Remotion 中，你可以用两种方式来组织内容：

• Sequence 模式：把所有内容放在一个 Composition 里，用多个 Sequence 来控制播放顺序。这种方式简单直观，但当 Sequence 数量变多时，调试会变得困难——一个 Sequence 出问题可能影响整个时间线。
• Composition 模式：每个独立的动画效果都作为一个单独的 Composition 存在。这种方式更模块化，便于单独调试和复用。

随着项目规模增大，从 Sequence 模式迁移到 Composition 模式是一个明智的选择。

让 Kimi Code 帮助重构

如果你的项目已经有很多 Sequence，可以让 Kimi Code 帮你重构。但要注意沟通方式：

我的项目中有很多内容是按照 Sequence 来组织的，都在 root.tsx 文件里。我现在需要把它们改成 Composition 的方式来组织。

每个 Sequence 应该成为一个独立的 Composition，保留原有的导出方式。另外，如果能自动化扫描来注册 Composition 就更好了，这样我以后添加新内容时不用每次手动修改注册代码。

我们先讨论一下方案，不要急着动手。

通过先讨论后实施的方式，Kimi Code 会给出一个合理的重构方案，你确认后再执行，可以避免很多潜在问题。

处理大规模文件修改

对于涉及大量文件修改的任务，Kimi Code 的表现如何呢？

从实测来看，Kimi K2.5 在以下方面表现不错：

• 理解项目结构：得益于长上下文能力，它可以理解 10 万行甚至更多代码的项目。
• 保持一致性：在修改多个文件时，能保持代码风格和逻辑的一致性。
• 自动发现问题：在重构过程中，有时会顺带发现并修复一些潜在问题，比如重复的导出、未使用的导入等。

但也需要注意：

• 先备份：在进行大规模修改前，确保代码已经提交到版本控制系统。
• 分步执行：如果任务很大，可以分成多个小步骤执行，每步完成后检查一下。
• 及时反馈：如果发现问题，及时告诉 AI，让它修正。

使用 commit 命令提交代码

当修改完成并验证无误后，可以直接在 Kimi CLI 中提交代码：

commit

Kimi Code 会自动分析改动，生成合适的提交信息。这个命令在 Claude Code 和其他类似工具中也是通用的。

多模态能力实战：从截图生成代码

Kimi K2.5 是一个多模态模型，这意味着它可以理解图像内容。这个能力在 Remotion 开发中非常有用——你可以直接把设计稿或截图发给它，让它生成对应的代码。

复刻截图效果

假设你在网上看到一个效果不错的数据可视化图表，想在自己的视频中复刻类似的效果。你可以：

• 截取目标效果的图片
• 在 Kimi CLI 中粘贴图片（通常用 Ctrl+V 或拖拽）
• 然后输入：

请帮我实现一下这个效果，找一个 inbox 之类的地方放这个新的 Composition。

Kimi Code 会分析图片中的视觉元素，包括：

• 布局结构
• 颜色方案
• 图表类型
• 文字内容
• 数据分布

然后生成对应的 React 组件代码。

多模态识别的局限

需要注意的是，多模态识别并不是万能的。从实践经验来看：

• 简单场景效果好：如果截图内容比较简单，比如只有 3-4 个元素，识别效果通常很好。
• 复杂场景需要补充说明：如果截图很复杂，比如同时包含 10 个柱状图，虽然数字能识别对，但样式可能会有丢失。这时候需要用更多的文字描述来补充。
• 特定图标难以复刻：如果截图中有特定品牌的 Logo 或图标，AI 无法直接生成这些内容，需要你手动处理。
• 颜色可能有偏差：从截图提取颜色时可能会有微小偏差，建议用吸色器工具获取准确色值后告诉 AI。

Remotion 进阶技巧

掌握了基础之后，莫潇羽@无忆研习社 再分享一些进阶技巧，帮助你做出更专业的视频。

动画曲线和缓动函数

Remotion 提供了 interpolate 函数来创建平滑的动画。它的基本用法是：

import { interpolate, Easing } from 'remotion';

const frame = useCurrentFrame();
const opacity = interpolate(
  frame,
  [0, 30], // 输入范围：第0帧到第30帧
  [0, 1],  // 输出范围：透明度从0到1
  {
    extrapolateRight: 'clamp', // 超出范围时钳制
    easing: Easing.bezier(0.33, 1, 0.68, 1) // 缓动曲线
  }
);

常用的缓动函数包括：

• Easing.linear：线性，匀速变化
• Easing.ease：缓入缓出
• Easing.easeIn：缓入
• Easing.easeOut：缓出
• Easing.bezier()：自定义贝塞尔曲线

spring 动画

除了 interpolate，Remotion 还提供了 spring 函数来创建物理弹性动画：

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

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: {
    damping: 10,
    mass: 0.5,
    stiffness: 100,
  },
});

spring 动画会产生自然的弹性效果，适合用于元素入场、按钮点击等场景。

使用音频

Remotion 支持在视频中添加音频。基本用法：

import { Audio, staticFile } from 'remotion';

export const MyComp = () => {
  return (
    <>
      <Audio src={staticFile('bgm.mp3')} volume={0.5} />
      {/* 其他内容 */}
    </>
  );
};

需要注意：

• 音频文件要放在 public 目录下
• 使用 staticFile() 函数来引用静态资源
• 可以用 volume 属性控制音量
• 可以用 startFrom 和 endAt 属性截取音频片段

使用外部数据

Remotion 视频可以是数据驱动的。你可以通过 props 传入数据，让同一套模板生成不同内容的视频：

// 定义 props 的默认值
export const myCompSchema = z.object({
  title: z.string(),
  items: z.array(z.string()),
  highlightColor: z.string(),
});

export const defaultMyCompProps = {
  title: '默认标题',
  items: ['项目1', '项目2', '项目3'],
  highlightColor: '#0066ff',
};

// 使用 props
export const MyComp = ({ title, items, highlightColor }) => {
  return (
    <div>
      <h1 style={{ color: highlightColor }}>{title}</h1>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
};

这种方式非常适合批量生成视频，比如根据不同用户的数据生成个性化内容。

服务端渲染

如果你需要批量渲染视频或者在服务器上渲染，Remotion 提供了完整的服务端渲染 API。你可以：

• 使用 @remotion/renderer 包在 Node.js 中渲染
• 使用 Remotion Lambda 在 AWS Lambda 上渲染
• 使用 GitHub Actions 自动化渲染

具体的配置方法可以参考官方文档：https://www.remotion.dev/docs/render

常见问题与解决方案

在使用 Remotion 和 Kimi Code 的过程中，你可能会遇到一些问题。莫潇羽@无忆研习社 整理了一些常见问题及其解决方案。

安装依赖时报错

问题：运行 pnpm install 时出现错误。

解决方案：

• 确保 Node.js 版本是 18.x 或更高
• 尝试清除缓存后重新安装：pnpm store prune && pnpm install
• 如果是网络问题，可以配置国内镜像源

预览时白屏或报错

问题：启动 pnpm dev 后，浏览器显示白屏或控制台有报错。

解决方案：

• 检查浏览器控制台的具体错误信息
• 确保所有依赖都已正确安装
• 检查组件代码是否有语法错误
• 确保 Composition 的 durationInFrames 大于 0

Kimi Code 响应缓慢

问题：使用英伟达免费 API 时，响应速度很慢。

解决方案：

• 这是正常现象，免费资源使用人数多
• 可以考虑使用官方 API 获得更好的体验
• 在等待期间可以做其他事情

渲染时卡住或失败

问题：点击渲染后长时间没有响应，或者渲染失败。

解决方案：

• 确保电脑有足够的内存和磁盘空间
• 检查是否有无限循环或内存泄漏的代码
• 尝试降低分辨率或缩短时长后再渲染
• 查看终端输出的具体错误信息

AI 生成的代码有问题

问题：Kimi Code 生成的代码无法运行或效果不对。

解决方案：

• 仔细阅读报错信息，将其反馈给 AI
• 提供更详细的需求描述
• 分步实现，不要一次要求太多功