Wechat 2d Render

Name: Wechat 2d Render
Author: vibe-motion

vibe-motion/skills

574 installs
987 repo stars
Updated July 25, 2026
vibe-motion/skills

wechat-2d-render is a shell-driven render skill that clones the sxhzju/wechat-2d repository and exports transparent WeChat-style 2D motion video from JSON presets for developers who need branded motion assets in Node wor

About

wechat-2d-render is an agent skill backed by a bash script that automates rendering transparent WeChat-style 2D motion assets from the public wechat-2d repository. The workflow requires git, Node.js, and pnpm, clones REPO_URL into a workspace directory, and renders output to a configurable path such as out/wechat-2d-transparent.mov using a JSON preset at shared/project/render-presets/default.json. Developers reach for wechat-2d-render when they need programmatic 2D motion exports for mobile UI demos, social content, or mini-program-style animations without hand-tuning a render pipeline each time. The script validates toolchain prerequisites up front and accepts workspace, output path, and props file overrides as positional arguments. It fits teams already using Node and pnpm who want repeatable transparent .mov assets from version-controlled render presets.

Bash workflow clones or updates sxhzju/wechat-2d, then drives a render with configurable props JSON
Default output path out/wechat-2d-transparent.mov with preset shared/project/render-presets/default.json
Auto-enables pnpm via corepack when pnpm is missing
Requires git and node; fails fast with clear errors if tooling is absent

Wechat 2d Render by the numbers

574 all-time installs (skills.sh)
+37 installs in the week ending Jul 27, 2026 (Skillselion tracking)
Ranked #377 of 1,335 Generative Media skills by installs in the Skillselion catalog
Security screen: CRITICAL risk (skills.sh audit)
Data as of Aug 5, 2026 (Skillselion catalog sync)

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/vibe-motion/skills/wechat-2d-render.svg)](https://skillselion.com/skills/vibe-motion/skills/wechat-2d-render)

Installs	574
repo stars	★ 987
Security audit	0 / 3 scanners passed
Last updated	July 25, 2026
Repository	vibe-motion/skills ↗

How do you render WeChat-style 2D motion assets?

Render transparent WeChat-style 2D motion assets from the wechat-2d repo using Node, pnpm, and a JSON render preset.

Who is it for?

Developers producing repeatable transparent 2D motion exports for mobile UI demos using Node, pnpm, and JSON render presets.

Skip if: Teams needing real-time in-app animation code, 3D rendering, or motion design without Node and pnpm installed.

When should I use this skill?

A developer asks to render WeChat-style 2D motion, export transparent .mov assets, or run the wechat-2d render pipeline.

What you get

Transparent .mov motion file generated from JSON render preset configuration

Transparent .mov motion file
Cloned wechat-2d workspace

By the numbers

Default output path is out/wechat-2d-transparent.mov
Default render preset is shared/project/render-presets/default.json

Files

SKILL.mdMarkdownGitHub ↗

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

#!/usr/bin/env bash
set -euo pipefail

REPO_URL="${REPO_URL:-https://github.com/sxhzju/wechat-2d.git}"
REPO_DIR_NAME="${REPO_DIR_NAME:-wechat-2d}"
WORKSPACE_DIR="${1:-$PWD}"
OUTPUT_PATH="${2:-out/wechat-2d-transparent.mov}"
PROPS_FILE="${3:-shared/project/render-presets/default.json}"

if ! command -v git >/dev/null 2>&1; then
  echo "[Error] git is required." >&2
  exit 1
fi

if ! command -v node >/dev/null 2>&1; then
  echo "[Error] node is required." >&2
  exit 1
fi

ensure_pnpm() {
  if command -v pnpm >/dev/null 2>&1; then
    return 0
  fi

  if ! command -v corepack >/dev/null 2>&1; then
    echo "[Error] pnpm is required. Install pnpm or use a Node.js distribution with corepack." >&2
    exit 1
  fi

  echo "[Skill] pnpm not found; enabling pnpm through corepack"
  corepack enable pnpm
}

mkdir -p "$WORKSPACE_DIR"
cd "$WORKSPACE_DIR"

if [ -d "$REPO_DIR_NAME/.git" ]; then
  echo "[Skill] Reusing existing repo: $REPO_DIR_NAME"
  git -C "$REPO_DIR_NAME" fetch --all --prune

  DEFAULT_BRANCH="$(git -C "$REPO_DIR_NAME" ls-remote --symref origin HEAD 2>/dev/null | awk '/^ref:/ {sub("refs/heads/", "", $2); print $2; exit}')"
  if [ -z "$DEFAULT_BRANCH" ]; then
    DEFAULT_BRANCH="main"
  fi

  git -C "$REPO_DIR_NAME" checkout "$DEFAULT_BRANCH"
  git -C "$REPO_DIR_NAME" pull --ff-only origin "$DEFAULT_BRANCH"
else
  echo "[Skill] Cloning repo: $REPO_URL"
  git clone "$REPO_URL" "$REPO_DIR_NAME"
fi

cd "$REPO_DIR_NAME"

if [ ! -f package.json ]; then
  echo "[Error] package.json not found in $(pwd)" >&2
  exit 1
fi

if [ ! -f "$PROPS_FILE" ]; then
  echo "[Error] props file not found: $PROPS_FILE" >&2
  exit 1
fi

ensure_pnpm

echo "[Skill] Installing dependencies"
pnpm install

mkdir -p "$(dirname "$OUTPUT_PATH")"

echo "[Skill] Preparing shared Remotion browser cache"
pnpm run remotion:ensure-browser

echo "[Skill] Rendering WeChat 2D motion"
REMOTION_OUTPUT="$OUTPUT_PATH" \
REMOTION_PROPS_FILE="$PROPS_FILE" \
pnpm run remotion:render

ABS_OUTPUT="$(cd "$(dirname "$OUTPUT_PATH")" && pwd)/$(basename "$OUTPUT_PATH")"
echo "[Skill] Render completed: $ABS_OUTPUT"

Related skills

Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k

Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665

Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665

Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665

Remotion RenderRender videos programmatically using React components and Remotion framework441k665

Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665

FAQ

What does wechat-2d-render produce?

wechat-2d-render clones the wechat-2d repository and outputs a transparent .mov motion file, defaulting to out/wechat-2d-transparent.mov, driven by a JSON render preset such as shared/project/render-presets/default.json.

What tools does wechat-2d-render require?

wechat-2d-render requires git, Node.js, and pnpm. The script exits early with an error if git or Node is missing, and expects pnpm or corepack to be available before rendering.

Is Wechat 2d Render safe to install?

skills.sh reports 0 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Generative Mediacontent