Kinetic-typography / 로고 / 브랜드 프로모션 모션 그래픽 ** 코드** Remotion (React) 및 MP4 배송. 그것은 전체 경로 커버: 참조 클립과 브랜드의 SVG 로고, 재사용 가능한 애니메이션 도우미, 확인-by-contact-sheet 루프, 모두 9:16 그리고 16:9 tweaks에 대한 하나의 코드베이스에서 출력, 및 리 모션 스튜디오.

내장하면서 참조 프로모션의 동작을 100able.com - 작업 흐름은 일반, 비디오는 포함되지 않습니다.

설치

**Claude Code (CLI / 데스크톱 앱) ** - 기술 폴더에 기술을 복제합니다.

또는 하나의 프로젝트 만 : 복사 [T0]] /.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