Communitygithub.com

모션 그래픽

HTML 요소를 사용하여 그래픽을 디자인하고 타임라인 시계에 따라 객체를 애니메이션합니다. 애니메이션 통계 카드, 인포그래픽, 다이어그램, UI 목업, 로고 스팅 또는 그래픽 내 객체 이동에 사용됩니다.

모션 그래픽란 무엇인가요?

이 스킬은 HTML 요소 기반의 모션 그래픽을 제작하는 기능을 제공합니다. `addHtmlElement` 명령어를 통해 디자인된 컨테이너와 레이아웃을 구성하고, 타임라인 기반 애니메이션으로 객체를 움직일 수 있습니다. `addMotionComponent`를 사용하면 별도의 생성 비용 없이 미리 제작된 타임라인 기반 컴포넌트(예: reveal-title, speaker-card, stat-counter)를 추가하고 `setMotionComponent`로 텍스트를 변경할 수 있습니다. 이 스킬은 Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 `searchCatalogue`를 통해 명령어와 컴포넌트를 검색하고 사용할 수 있도록 지원합니다. 주요 워크플로는 먼저 기성 컴포넌트가 적합한지 확인한 후, `addHtmlElement`의 전체 작성 계약을 읽고 HTML을 직접 구축합니다. 그림자 효과, 그라데이션 등 디자인 요소는 복사와 가용 공간에 따라 결정하며, 타임라인 시계를 기준으로 애니메이션해야 합니다. CSS 벽시계 애니메이션이 아닌 타임라인 기반 애니메이션만 내보내기 가능합니다. 실패 사례로는 인라인 SVG에 `xmlns` 누락 시 0픽셀로 렌더링되는 문제, 전체 프레임 배경을 칠하는 HTML 요소가 아래 모든 것을 가리는 문제 등이 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidmoat/skills/tree/HEAD/skills/vidmoat/motion-graphics

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

모션 그래픽은(는) 무엇을 하나요?

addHtmlElement는 디자인된 컨테이너와 레이아웃을 위한 명령어이며, 텍스트 및 캡션 명령어는 일반 단어를 위한 것입니다.

워크플로우

  1. 기성 컴포넌트가 이미 적합할 수 있습니다: addMotionComponent는 생성 비용 없이 비디오 방향에 맞춰 편집 가능하고 타임라인 기반 그래픽을 추가합니다 (setMotionComponent로 텍스트 변경 가능; searchCatalogue 종류 elements에서 컴포넌트 검색: reveal-title, speaker-card, progress-ring, feature-spotlight, stat-counter, keyword, checklist, chat-bubbles, search-bar, proof-card, icon-card, quote-card). 화자가 말하는 내용에 따라 designInserts는 이를 대본과 대조하여 배치합니다. 어느 것도 맞지 않을 때만 HTML을 직접 구축하세요.
  2. 먼저 계약서를 읽으세요: searchCatalogue 종류 commands에서 정확한 id addHtmlElement를 검색하고 마크업을 작성하기 전에 전체 작성 계약서를 읽으세요.
  3. 콘텐츠와 공간에 따라 크기 결정: 복사와 가용 영역에 따라 크기, 스타일 및 배치를 결정하세요. 하단 3분할 패널이 항상 어두운 패널일 필요는 없으며, 통계가 항상 그라데이션 카드일 필요는 없습니다.
  4. 타임라인 시계를 기준으로 애니메이션: 지원되는 타임라인 기반 애니메이션 계약을 사용하세요. 벽시계 CSS 애니메이션은 타임라인 재생이 아니며 내보내지지 않습니다.
  5. 컨테이너 대 객체: 하나의 HTML 클립에 변환을 적용하면 해당 구성 전체가 이동하며, 하위 요소는 이동하지 않습니다. 내부 객체를 이동하려면 해당 클립의 HTML을 읽고 의도한 하위 요소를 타임라인에서 애니메이션하거나 별도의 실제 클립을 사용하세요. 첨부된 세부 정보는 동일한 이동 컨테이너에 유지하세요.
  6. 사용자 지정 컴포넌트: TSX 모션 컴포넌트는 스크립팅이 가능할 때 agentWorkspace 액션 motion_compile (워크플로우 motion-authoring)을 통해 컴파일됩니다.
  7. 검증: 렌더링된 프레임에서 여러 시간 지점에 객체 위치를 확인하세요. 카메라 줌만으로 객체 동작을 만족시킬 수 없습니다.

주의사항

  • 인라인 SVG에는 xmlns가 필요합니다. 그렇지 않으면 조용히 0픽셀로 렌더링됩니다.
  • 전체 프레임 배경을 칠하는 HTML 요소는 해당 지속 시간 동안 아래 모든 것을 가립니다. 루트를 투명하게 만드세요.
  • 사용자가 변경 사항이 없다고 말하면 저장된 결과를 검사하고 동일한 키프레임을 반복하는 대신 실제 메커니즘을 변경하세요.
  • 디자인된 UI, 다이어그램 및 절차적 그래픽은 유료 이미지 생성 없이 워크플로우를 표시할 수 있습니다.

관련 스킬: 제목, 텍스트 중심 비디오. 전문가: 모션 디자이너.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

vidmoat/caption-styling

Style, time and place captions and subtitles so they read on a phone with the sound off. Sets line length, reading speed, cue timing, size, contrast and platform safe zones, and checks SRT or VTT files against them. Use when the user wants captions or subtitles added, restyled, fixed or made accessible, says captions are too fast, too small or hidden under app buttons, or is preparing TikTok, Reels, Shorts or YouTube video, even if they only ask to "put what I say on screen".

vidmoat/layered-motion

Motion graphics people can edit afterwards: compositions of layers with keyframes, After Effects style. Use for lower thirds, animated titles, kinetic type, stat reveals, logo stings and callouts that the person may want to retime or restyle by hand, and when a composition is already on the timeline.

vidmoat/video-essayist

Video Essayist specialist, tagged @video-essayist or consulted for script-led commentary and analysis: narration locked first, every line matched to a visual that proves it, short annotated clips, quotes with sources, thesis by 60 seconds, chapters. Use when the user tags @video-essayist or asks for a video essay, film analysis or commentary edit.

vidmoat/wedding-filmmaker

Wedding & Event Filmmaker specialist, tagged @wedding-filmmaker or consulted for wedding and event highlight films, teasers and vertical teasers: the couple's own words as the spine, cut to licensed music, slow motion only on peaks, true skin and an unclipped dress. Use when the user tags @wedding-filmmaker or asks for a wedding or event highlight video.

관련 스킬