本文へ移動
cccskills
無料GitHub で公開

wechat-2d-render

Clone or update https://github.com/sxhzju/wechat-2d and render the default WeChat-style 2D chat motion video with Remotion. Use when users ask for 微信聊天动画, wechat 2d chat render, 微信视频消息动效, or exporting the default demo from the wechat-2d project.

インストール方法を見る

含まれるファイル(3)

  • SKILL.md3.0 KB
  • assets/wechat-2d-demo.gif523.4 KB
  • scripts/render_wechat_2d.sh2.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV. Use when users ask for 3D 克拉尼, 克拉尼粒子动画, Chladni motion, sound-reactive sand or cosmic-web visuals, audio-to-motion, music visualizer video, or rendering Dynamic Sand, Modal Sand, Cosmic Web, or Dynamic Cosmic.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3412026年10月6日 更新

Create fast, high-impact 15-30 second brand and product marketing videos from an official company website, verified brand sources, or user-uploaded product imagery. Use for launch films, website motion videos, AI/SaaS demos, product promos, and Vibe Motion/Remotion productions that require exact logos, authentic imagery, English-first copy, product-feature storytelling, strong visual impact, smooth transitions, and deterministic frame-based animation.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3412026年10月6日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3412026年10月6日 更新

colorize

無料

Turn photos, videos, and Live Photos into a black-and-white to color reveal clip (单彩渐变 + 动感模糊 + 丁达尔旋焦). The frame starts monochrome and spun, color sweeps in from the left under a horizontal motion blur, and the spin settles from the center outward into a softly glowing full-color frame. Use when users ask for 上色效果, 黑白变彩色, 丁达尔旋焦, 旋焦上色, 剪映上色特效, color reveal, colorize transition, or want this effect on images, iPhone Live Photos (HEIC/JPG + MOV), Android motion photos, or video clips. Outputs H.264 MP4.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3412026年10月6日 更新

Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes; especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3412026年10月6日 更新

制作屏摄风格的鱼眼畸变效果与聚焦动画:桶形鱼眼畸变 + 细扫描线/摩尔纹干涉 + 四周暗角, 可对任意图片/视频做「推镜聚焦到某处 + 黄色标注块滑入」的 Remotion 视频输出。 核心是 clone https://github.com/vibe-motion/fisheye-motion 项目并按需改参数渲染。 触发词:鱼眼、fisheye、屏摄、摩尔纹、moire、扫描线、CRT、暗角、vignette、 聚焦推镜、高亮标注动画、screen-photo effect。

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3412026年10月6日 更新

vibe-motion のスキルをすべて見る

このスキルの問題を報告する