본문으로 건너뛰기

Claude Code용 Remotion 스킬

Remotion을 넘어서는 Claude Code용 모션 스킬

스킬 세트 하나만 설치하면 Claude Code가 내 문서를 HyperFrames 타임라인에서 편집할 수 있는 인터랙티브 모션으로 바꿉니다.

스킬 설치하기예시 보기

월 $19.9부터 · Claude Code & Codex 지원 · Anthropic과 무관한 독립 서비스

Claude Motion을 사용하려면 유료 Creator 또는 Studio 구독이 필요합니다. 무료 요금제는 없습니다.

HYPERFRAMES 타임라인 · 0:24 / 2:10

텍스트

제목콜아웃

차트

오가닉 막대채널 필터

인터랙션

퀴즈드래그 매칭

오디오

배경 음악 · 내레이션

내 CLAUDE CODE 또는 CODEX에서 실행 · HYPERFRAMES 기반 · MP4 + 인터랙티브 웹

한 번 설치로 완전한 모션 스킬 세트

  • 무엇이든 넣으세요

    문서, 스크립트, 강의 노트, PPT 또는 대략적인 아이디어.

  • 모션 스타일 선택

    모든 스타일을 먼저 내 콘텐츠로 미리 볼 수 있습니다.

  • 내 에이전트가 직접 제작

    Claude Code 또는 Codex가 작성하므로 비주얼에는 크레딧이 들지 않습니다.

스킬 설치하기

모션 스킬 비교

  • 영상 프로젝트에는

    어울리는 곳에서는 Remotion을 계속 쓰세요.

  • 문서와 강의에는

    Claude Motion을 쓰세요.

  • 앱 UI에는

    Framer Motion.

스킬 설치하기
스킬적합한 용도결과물
Remotion 스킬프로그래밍 방식 영상MP4
Framer Motion 스킬React 앱의 UI 애니메이션웹 컴포넌트
Claude Motion 스킬문서, 강의, 데이터 스토리인터랙티브 웹 + MP4

영상 스킬로는 못 만드는 인터랙티브 블록

  • 움직이는 차트

    툴팁, 범례, 실시간 필터가 있는 ECharts.

  • 퀴즈

    즉각적인 피드백, 해설, 점수.

  • 드래그 앤 드롭

    스스로 채점되는 정렬, 매칭, 분류 연습.

스킬 설치하기

모션 스타일에서 시작하세요

모든 스타일에 차트, 필터, 퀴즈, 드래그 앤 드롭이 포함됩니다. 에이전트에게 자유롭게 디자인을 맡길 수도 있습니다.

좋아하는 스타일을 여러 개 선택하면 AI가 내용에 맞는 스타일을 선택합니다.

탐색 중 패키지는 다운로드되지 않습니다.

스타일 매칭 후 만들기
모든 모션 스타일 보기

필요한 모든 기능

  • 모션 스타일

    스타일을 고르거나 에이전트에게 자유롭게 디자인을 맡기세요.

  • 애니메이션 차트

    ECharts 내장, 스타일에 맞춰 디자인.

  • 퀴즈와 드래그 앤 드롭

    기본으로 인터랙티브.

  • HyperFrames 타임라인

    클립, 타이밍, 블록 편집.

  • 내레이션

    영어와 중국어, 브랜드명도 정확하게 발음.

  • 음악

    지금 생성하거나 나중에 추가.

  • 공유 링크

    공개 또는 비밀번호, 통계 포함.

  • MP4 렌더링

    로컬에서 결정론적으로.

Claude Motion 스킬 설치 방법

  1. 1한 줄 설치 명령을 Claude Code나 Codex에 붙여 넣습니다.
  2. 2문서를 넣고 모션 스타일을 고릅니다. 음악은 지금 또는 나중에 선택할 수 있습니다.
  3. 3HyperFrames 타임라인에서 다듬은 뒤 MP4로 렌더링하거나 링크로 공유합니다.
Claude Motion 설치: npx -y claudemotion@latest setup를 실행하고 출력 안내를 따르세요.

처음 실행하면 브라우저가 열려 로그인합니다. 클릭 한 번이면 되고, 터미널은 필요 없습니다.

자주 묻는 질문

둘 다 쓸 수 있나요?

네. 스킬은 서로 독립적입니다. 영상 프로젝트에는 Remotion을 계속 쓰고, 문서를 모션으로 바꿀 때는 Claude Motion을 쓰세요.

더 알아보기

영상 도구처럼 편집되는 모션 스킬을 Claude Code에

스킬 설치하기