wechat-2d-render

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WeChat 2D Render

微信2D渲染

Workflow

工作流程

Use
```
scripts/render_wechat_2d.sh
```
from this skill.
Pass
```
workspace_dir
```
as the first argument when the user specifies a folder; otherwise use the current directory.
Pass
```
output_path
```
as the second argument when the user specifies output; otherwise use
```
out/wechat-2d-transparent.mov
```
.
Pass a props JSON path as the third argument when the user provides custom Remotion props; otherwise use
```
shared/project/render-presets/default.json
```
.
Run the script and wait for completion.
Return the final absolute output path printed by the script.

使用本技能中的
```
scripts/render_wechat_2d.sh
```
脚本。
如果用户指定了文件夹，将
```
workspace_dir
```
作为第一个参数传入；否则使用当前目录。
如果用户指定了输出路径，将
```
output_path
```
作为第二个参数传入；否则使用
```
out/wechat-2d-transparent.mov
```
。
如果用户提供了自定义Remotion参数，将props JSON路径作为第三个参数传入；否则使用
```
shared/project/render-presets/default.json
```
。
运行脚本并等待完成。
返回脚本输出的最终绝对输出路径。

Command

命令

bash

bash scripts/render_wechat_2d.sh [workspace_dir] [output_path] [props_file]

bash

bash scripts/render_wechat_2d.sh [workspace_dir] [output_path] [props_file]

Installed Skill Resolution

已安装技能解析

Use the installed skill copy, not the source repo checkout:

bash

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/wechat-2d-render" ]; then
    skill_dir="$base/skills/wechat-2d-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "wechat-2d-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

bash "$skill_dir/scripts/render_wechat_2d.sh" "$(pwd)" "$(pwd)/out/wechat-2d-transparent.mov"

使用已安装的技能副本，而非源码仓库检出版本：

bash

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/wechat-2d-render" ]; then
    skill_dir="$base/skills/wechat-2d-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "wechat-2d-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

bash "$skill_dir/scripts/render_wechat_2d.sh" "$(pwd)" "$(pwd)/out/wechat-2d-transparent.mov"

Behavior

行为

Reuse local repo if
```
workspace_dir/wechat-2d
```
exists; otherwise clone from GitHub.
Track remote default branch (
```
origin/HEAD
```
) when updating an existing repo.
Install dependencies with
```
pnpm install
```
; if
```
pnpm
```
is missing, enable it through
```
corepack
```
.

Run the project Remotion scripts:

```
pnpm run remotion:ensure-browser
```

REMOTION_OUTPUT=... REMOTION_PROPS_FILE=... pnpm run remotion:render

Default render target is the active composition from
```
shared/project/projectConfig.js
```
, currently the
```
wechat-chat-motion
```
plugin via
```
ScaffoldDemo30fps
```
.
Default output is ProRes 4444 with
```
yuva444p10le
```
pixel format and PNG image format, suitable for transparent-background workflows.

如果
```
workspace_dir/wechat-2d
```
已存在，则复用本地仓库；否则从GitHub克隆。
更新现有仓库时，跟踪远程默认分支（
```
origin/HEAD
```
）。
使用
```
pnpm install
```
安装依赖；如果未安装
```
pnpm
```
，通过
```
corepack
```
启用它。

运行项目的Remotion脚本：

```
pnpm run remotion:ensure-browser
```

REMOTION_OUTPUT=... REMOTION_PROPS_FILE=... pnpm run remotion:render

默认渲染目标是
```
shared/project/projectConfig.js
```
中的活动合成，当前是通过
```
ScaffoldDemo30fps
```
的
```
wechat-chat-motion
```
插件。
默认输出为ProRes 4444格式，采用
```
yuva444p10le
```
像素格式和PNG图像格式，适用于透明背景工作流。

Project Notes

项目说明

The project uses a scaffold/plugin split:
- ```
preview/*
```
  for local UI controls and browser preview.
- ```
remotion/*
```
  for Remotion entry wrappers.
- ```
shared/scaffold/*
```
  for common runtime.
- ```
shared/project/*
```
  for plugin and composition registry.
- ```
shared/features/demoMotion/*
```
  for the WeChat chat scene.
Animation state must be deterministic per frame. Remotion renders frames in parallel and out of order, so do not rely on timers, mutable cursors, previous renders, or render order.

Frame-specific data should be built from

{frame, fps, loop, sceneContext, pluginParams}

buildSceneProps

Keep
```
videoWidth
```
and
```
videoHeight
```
as layout props; use a props JSON file for custom sizes.

项目采用脚手架/插件分离架构：
- ```
preview/*
```
  用于本地UI控制和浏览器预览。
- ```
remotion/*
```
  用于Remotion入口包装器。
- ```
shared/scaffold/*
```
  用于通用运行时。
- ```
shared/project/*
```
  用于插件和合成注册。
- ```
shared/features/demoMotion/*
```
  用于微信聊天场景。
动画状态必须逐帧确定。Remotion会并行且乱序渲染帧，因此请勿依赖计时器、可变游标、之前的渲染或渲染顺序。

特定帧的数据应从

buildSceneProps

中的

{frame, fps, loop, sceneContext, pluginParams}

构建。

将
```
videoWidth
```
和
```
videoHeight
```
作为布局参数保留；使用props JSON文件自定义尺寸。

Requirements

要求

```
git
```
```
node
```
```
corepack
```
or
```
pnpm
```
network access for clone/update and dependency install

```
git
```
```
node
```
```
corepack
```
或
```
pnpm
```
克隆/更新仓库及安装依赖需要网络访问