그림과 다이어그램을 실제로 움직이게 만드는 코드 기반 애니메이션 에이전트 스킬
showheyohtaki/motion-prompt
AI에 활용할 수 있는 모션 그래픽, 카메라, UI, 웹, 사진 효과 144가지를 모아 둔 검색 가능한 라이브러리로, 각 효과의 실시간 샘플과 프롬프트를 제공합니다.
- 스타
- 465
- 포크
- 53
- 열린 이슈
- 3
- 마지막 커밋
- 그저께
어떤 프로젝트인가요?
Motion Prompt는 AI에게 만들어 달라고 요청할 수 있는 시각 효과의 이름을 모아 둔 라이브러리입니다. 각 항목에는 짧은 이름, 움직이는 샘플, 한 줄 설명, 예시 프롬프트가 함께 제공됩니다. 현재 모션 그래픽 동작, 카메라 동작, UI 컴포넌트 이름, 랜딩 페이지 및 웹 효과, 사진 스타일과 조명, 두 번째 모션 그래픽 팩까지 총 6개 팩에 각각 24개 항목이 들어 있습니다.
원하는 결과물은 알고 있지만 그 효과를 뭐라고 부르는지 모르는 사람을 위한 프로젝트입니다. 갤러리를 둘러보며 샘플을 선택해 Claude Code나 Codex 같은 코딩 에이전트에 전달하면, 에이전트가 프로젝트에서 해당 효과를 다시 구현합니다. Node.js 커맨드라인 도구로 번호나 키워드에 따라 항목을 검색할 수도 있으며, 저장소에는 다른 분야나 언어를 위한 유사한 라이브러리를 만드는 프롬프트도 포함되어 있습니다.
핵심 기능
- 01각각 실시간 애니메이션 샘플을 제공하는 24개 효과 팩 6종.
- 02갤러리를 둘러보고 샘플을 골라 AI 에이전트에 전달.
- 03번호로 효과 사양과 코드를 검색, 나열, 가져올 수 있는 커맨드라인 도구.
- 04라이브러리를 번역하거나 자신의 분야에 맞는 라이브러리를 만들기 위한 프롬프트.
- 05각 효과는 외부 라이브러리 없이 Canvas 2D context에 그리는 단일 함수로 구현됩니다.
활용 사례
- 동영상 프롬프트를 작성하기 전에 적절한 모션 또는 카메라 동작 용어 찾기.
- 코딩 에이전트가 웹사이트에 특정 UI 또는 랜딩 페이지 효과를 추가하도록 하기.
- 다른 분야의 디자인 또는 제작 팀을 위한 이름이 붙은 레퍼런스 라이브러리 구축하기.
빠른 시작
- 1
Node.js 18 이상이 설치되어 있는지 확인합니다
node --version - 2
motion-prompt 스킬을 설치합니다
npx skills add showheyohtaki/motion-prompt - 3
Claude Code 또는 Codex에서 AI에게 라이브러리를 열어 달라고 한 다음 갤러리에서 샘플을 선택합니다
사용 전 알아둘 점
- 이 스킬을 사용하려면 Node.js 18 이상과 Claude Code 또는 Codex 같은 에이전트가 필요합니다.
- 이름 목록은 현재 영어와 일본어로만 제공되므로 중국어 사용자는 직접 번역을 생성해야 합니다.
토픽
자주 묻는 질문
- motion-prompt은(는) 무엇인가요?
- AI에 활용할 수 있는 모션 그래픽, 카메라, UI, 웹, 사진 효과 144가지를 모아 둔 검색 가능한 라이브러리로, 각 효과의 실시간 샘플과 프롬프트를 제공합니다. Motion Prompt는 AI에게 만들어 달라고 요청할 수 있는 시각 효과의 이름을 모아 둔 라이브러리입니다. 각 항목에는 짧은 이름, 움직이는 샘플, 한 줄 설명, 예시 프롬프트가 함께 제공됩니다. 현재 모션 그래픽 동작, 카메라 동작, UI 컴포넌트 이름, 랜딩 페이지 및 웹 효과, 사진 스타일과 조명, 두 번째 모션 그래픽 팩까지 총 6개 팩에 각각 24개 항목이 들어 있습니다.
- motion-prompt은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- motion-prompt은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- motion-prompt은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. motion-prompt의 마지막 커밋은 2026년 10월 19일입니다.
- motion-prompt은(는) 어디에 사용할 수 있나요?
- 동영상 프롬프트를 작성하기 전에 적절한 모션 또는 카메라 동작 용어 찾기. 코딩 에이전트가 웹사이트에 특정 UI 또는 랜딩 페이지 효과를 추가하도록 하기. 다른 분야의 디자인 또는 제작 팀을 위한 이름이 붙은 레퍼런스 라이브러리 구축하기.
- motion-prompt는 어떻게 설치하나요?
- Node.js 18 이상이 설치되어 있는지 확인합니다: node --version motion-prompt 스킬을 설치합니다: npx skills add showheyohtaki/motion-prompt Claude Code 또는 Codex에서 AI에게 라이브러리를 열어 달라고 한 다음 갤러리에서 샘플을 선택합니다
- motion-prompt은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/showheyohtaki/motion-prompt
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
짧은 테마를 비트에 맞춘 모션 그래픽 영상으로 만들고 HyperFrames로 MP4 렌더링하는 Claude Code 스킬입니다.
프롬프트를 짧은 절차적 캔버스 애니메이션으로 만들고, 헤드리스 브라우저와 ffmpeg로 MP4를 렌더링하는 Claude Code 스킬입니다.
코딩 에이전트가 대본을 내레이션이 있는 설명 영상이나 제품 데모로 제작합니다.
슬래시 명령, 메모리, 스킬, 서브에이전트, 훅, MCP를 위한 복사·붙여넣기 템플릿을 제공하는 Claude Code 시각적 예제 중심 가이드입니다.
Claude Code, Cursor, Codex용 디자인 스킬로, AI 코딩 에이전트가 AI가 만든 듯한 티가 나지 않는 UI를 구현하도록 돕습니다.