mcpField
W
wechat-2d-render

wechat-2d-render

github.com/vibe-motionCreative & media1.4k840 installsUpdated 3w ago
Repository

About wechat-2d-render

A skill that runs a Remotion workflow to render a WeChat 2D animation to a MOV file. It uses a local project when available, supports custom props, and defaults to a ProRes 4444 output suited to transparent-background workflows.

Key features

  1. 01Run the Remotion render script
  2. 02Choose workspace and output paths
  3. 03Pass custom props JSON
  4. 04Default ProRes 4444 output
  5. 05Clone or reuse the local project

Use cases

  1. 01Render a WeChat chat animation
  2. 02Create a transparent-background MOV
  3. 03Render with custom composition props

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vibe-motion/skills --skill wechat-2d-render

After installing, type/wechat-2d-renderin Claude Code to confirm it loaded.

Bundled filesscripts/render_wechat_2d.sh

Details

From the project README

WeChat 2D Render

Workflow

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

Command

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:

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.

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} in buildSceneProps.
  • Keep videoWidth and videoHeight as layout props; use a props JSON file for custom sizes.

Requirements

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

Comments

Markdown supported