一项Claude技能，用于用Remotion（React）构建动态排版/标志/品牌宣传动态图形作为代码并发布MP4。它涵盖了整个流程：阅读参考片段和品牌的SVG标志，一个带可复用动画辅助的场景每拍项目，一个通过接触表验证的循环，来自一个代码库的9：16和16：9输出，以及用于调整的Remotion Studio。

这是在为 hundredable.com 克隆参考宣传片的动作时制作的——工作流程很通用，视频不包含在内。

安装

Claude Code（CLI / 桌面应用） — 将技能克隆到你的技能文件夹中：

或者只针对一个项目：复制skills/remotion-motion-graphics到 /.claude/skills/。

claude.ai / Cowork — 下载dist/remotion-motion-graphics.skill（或从最新版本下载）并上传到设置→能力→技能。

然后只需请求一个动作片段：技能会在请求中触发，比如*“用这个SVG制作一个动画标志”，“制作像这个视频这样的宣传片”，“ทําโมชั่นโลโก้”*，或者任何Remotion代码都能用。

文件夹结构

工作流程的作用

1. **先阅读材料。

Remotion Motion Graphics - Agent Skill

A Claude skill for building kinetic-typography / logo / brand promo motion graphics as code with Remotion (React) and shipping an MP4. It covers the whole path: reading a reference clip and a brand’s SVG logo, a scene-per-beat project with reusable animation helpers, a verify-by-contact-sheet loop, both 9:16 and 16:9 outputs from one codebase, and Remotion Studio for tweaks.

Built while cloning the motion of a reference promo for hundredable.com — the workflow is general, the video is not included.

Install

Claude Code (CLI / desktop app) — clone the skill into your skills folder:

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

Or for one project only: copy skills/remotion-motion-graphics into /.claude/skills/.

claude.ai / Cowork — download dist/remotion-motion-graphics.skill (or grab it from the latest release) and upload it in Settings → Capabilities → Skills.

Then just ask for a motion piece: the skill triggers on requests like “make an animated logo from this SVG”, “make a promo clip like this video”, “ทำโมชั่นโลโก้”, or any Remotion code work.

Folder Structure

skills/remotion-motion-graphics/
  SKILL.md                              # The workflow: read material → scaffold → scenes → verify → deliver
  assets/                               # Starter code to copy into src/
    theme.template.ts                   #   brand colours, PORTRAIT/LANDSCAPE presets, named scene durations
    layout.ts                           #   useLayout() — every position derives from the frame size
    anim.ts                             #   easing curves, prog(), springAt(), riseStyle(), typed()
    fonts.ts, Main.template.tsx, Root.template.tsx
    components/
      Backgrounds.tsx                   #   LightBg / DarkBg with brand glow
      Cursors.tsx                       #   arrow + dot cursors that spring between targets
      Words.tsx                         #   word-by-word reveal with optional exit
      SvgArt.tsx                        #   animate SVG artwork per path (letter pop, character bounce)
  scripts/
    analyze_reference.sh                # contact sheets from a reference video → beat map
    svg_to_paths.mjs                    # SVG → TypeScript path data + bounding-box report
    check_render.sh                     # low-res render + contact sheets for a composition
    still_frame.sh                      # one frame from an MP4 at a timestamp
  references/
    scene-patterns.md                   # 16 motion patterns with the timings that worked
    verification-and-gotchas.md         # the check loop and the traps met in practice