wechat-2d-render
WeChat 2D Render
Workflow
- Use
scripts/render_wechat_2d.shfrom this skill. - Pass
workspace_diras the first argument when the user specifies a folder; otherwise use the current directory. - Pass
output_pathas the second argument when the user specifies output; otherwise useout/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.
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-2dexists; otherwise clone from GitHub. - Track remote default branch (
origin/HEAD) when updating an existing repo. - Install dependencies with
pnpm install; ifpnpmis missing, enable it throughcorepack. - Run the project Remotion scripts:
pnpm run remotion:ensure-browserREMOTION_OUTPUT=... REMOTION_PROPS_FILE=... pnpm run remotion:render
- Default render target is the active composition from
shared/project/projectConfig.js, currently thewechat-chat-motionplugin viaScaffoldDemo30fps. - Default output is ProRes 4444 with
yuva444p10lepixel 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}inbuildSceneProps. - Keep
videoWidthandvideoHeightas layout props; use a props JSON file for custom sizes.
Requirements
gitnodecorepackorpnpm- network access for clone/update and dependency install
More from vibe-motion/skills
svg-assembly-animator
为 SVG 矢量图创建充满“力量感”与“速度感”的零件组装动画,并支持一键导出 30fps 的透明背景序列帧。适用于需要将静态 SVG 转换为可用于视频剪辑(如 AE/PR)的透明素材场景。
344claude-typer
Render a Claude-style prompt typing animation video by calling Remotion CLI against the remote site https://www.laosunwendao.com. Use when the user asks for "做一个 claude 的提示词打字机动画", "做 Claude 打字动画", "创建提示词动画", or similar requests that convert a text prompt into a typing-animation video.
334procedural-fish-render
Clone or update https://github.com/vibe-motion/procedural-fish and render procedural-fish animation to a video using the project's own render command. Use when the user asks to render 程序鱼/procedural fish, export a 程序鱼视频, or run procedural-fish Remotion rendering.
305ruler-progress-render
Clone or update https://github.com/sxhzju/ruler-progress-animator and render a ruler progress video with default parameters. Use when users ask for requests like "绘制个尺子进度条", "做个尺子进度动画", "渲染 ruler progress", or ask to export the default demo video from this project.
224light-spotlight-render
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.
114remotion-3d-ticker
Creates infinite 3D vertical scrolling ticker animations in Remotion. Use when you need to build a parallax gallery, infinite image scroll, multi-column continuous vertical scrolling effect, or a 3D photo wall (3D照片滚动墙 / 3D相册瀑布流).
100