Communitygithub.com

octaviosilva2/claude-video-motion

하이퍼프레임(HyperFrames)을 사용해 HTML/CSS 구성을 Chrome/FFmpeg로 캡처하여 결정론적 영상을 생성합니다. 형식, FPS, 지속 시간, 해상도를 선언하고 렌더링 승인을 받아 MP4, WebM, MOV, PNG 등 렌더링된 미디어 파일을 제공해야 할 때 사용합니다.

claude-video-motion란 무엇인가요?

이 스킬은 하이퍼프레임(HyperFrames) 엔진을 기반으로 HTML/CSS 구성을 Chrome으로 캡처하고 FFmpeg로 인코딩하여 결정론적(deterministic) 영상(MP4, WebM, MOV, PNG)을 생성합니다. 웹 프론트엔드 기술로 미디어 파일을 ‘렌더링’하는 것이 핵심이며, 사용자가 영상, 모션, 애니메이션, 재현 가능한 합성물을 요청할 때 활성화됩니다. 단, 웹사이트 내에서 사용되는 기존 영상(웹 에셋)이나 인터랙티브 애니메이션 UI에는 적용되지 않습니다. 모든 렌더링은 사용자의 명시적 승인을 받아야 하며, 형식, 해상도, FPS, 지속 시간은 기본값 없이 사용자에게 질문하여 결정합니다. Node.js, Chrome, FFmpeg가 필요하며, 사용자가 직접 설치를 결정해야 합니다. 이 스킬은 Claude Code, Cursor, Codex 등 AI 에이전트가 파일 기반 미디어 산출물을 요구하는 상황에서 사용됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/octaviosilva2/claude-video-motion/tree/HEAD/skill/frontend-video

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

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

문서

게이트 — 모든 합성 전에

리터럴 트리거: 결과물이 렌더링된 미디어 파일입니다. MP4, WebM, MOV, PNG. 결과물의 형식이지, 외형이 아닙니다.

이 스킬을 활성화하지 않는 경우:

  • 웹사이트 내에서 사용되는 영상 — 히어로, 배경, 증언 영상. 일반 웹 에셋입니다.
  • "영상처럼 보이지만" 인터랙티브한 애니메이션 UI — 여전히 프론트엔드 웹입니다.

구분 기준은 결과물의 형식입니다. 결과물이 브라우저에서 열리고 클릭에 반응한다면, 이 스킬이 아닙니다.

형식, 해상도, FPS, 지속 시간에는 기본값이 없습니다

네 가지 모두 없습니다. "1080p 30fps가 일반적이니까"라고 선택하는 것은 게이트가 막으려는 정확한 행동입니다. 합성이 시작되기 전에 네 가지 모두 사용자에게 질문하세요 (AskUserQuestion 사용), 해당 영상의 목적지(예: Reels/TikTok/Shorts용 세로 1080×1920)에 대한 권장 사항과 함께.

운영 비용 — 약속하기 전에 확인하세요

하이퍼프레임은 임포트가 아닙니다: 생산 프로세스입니다. Node, Chrome, FFmpeg가 설치되어 있어야 하며, 캡처는 무겁습니다.

경로를 약속하기 전에 인프라가 존재하는지 확인하세요. 렌더링 시점에 FFmpeg가 없다는 것을 발견하는 것은 전체 합성이 이미 작성된 후에 발견하는 것입니다.

의존성(Node, FFmpeg, Chrome, hyperframes 패키지) 설치는 사용자의 결정입니다. 무엇이 누락되었는지와 명령어를 명시하고, 확인을 기다리세요.

렌더링은 절대 자동이 아닙니다

렌더링 실행은 사용자의 명시적 승인 없이 이루어지지 않습니다. 렌더링은 머신 시간을 소비하며, 미디어 생성이 포함될 때는 실제 비용이 듭니다.

에셋이 누락되고 대안이 생성인 경우: 무엇이 누락되었는지와 무엇을 생성할 것인지 명시하고 — 거기서 멈추세요.

사용 방법

frontend-video/
├── SKILL.md                ← 이 파일. 항상 읽히는 유일한 파일
└── referencias/
    ├── hyperframes.md      게이트, 형식/FPS/지속 시간, 결정론적 시간,
    │                       어댑터, 캡션, 렌더링 승인
    ├── direcao-visual.md   서면 이유가 있는 토큰, 반-일반, 분해된 참조
    ├── assets.md           출처, 라이선스, 최적화 — 여기서 에셋은 결과물입니다
    └── validacao.md        미디어에 적용 가능한 게이트
당신의 작업열기
형식, 해상도, FPS, 지속 시간 결정hyperframes.md §3
콘텐츠, 글꼴, 캡션, 권리hyperframes.md §4
결정론적 시간, 재현 가능한 출력, 씬 어댑터hyperframes.md §5
접근성 및 성능hyperframes.md §6
렌더링 승인hyperframes.md §7
합성의 미적 방향direcao-visual.md
이미지, 글꼴, 음악, 효과, 나레이션 라이선스assets.md
결과물 확정validacao.md

항상 무시할 것: SEO, 인덱싱 가능한 DOM, 탐색 경로, 애플리케이션 상태 — 결정론적 미디어에는 이 중 어느 것도 없습니다. 최종 결과물로서의 웹 런타임도 적용되지 않습니다: 여기서 브라우저는 캡처 도구이지, 목적지가 아닙니다.

음악, 효과 및 나레이션

  • 음악 및 음향 효과: 사용자의 승인을 받은 경우에만 다운로드하세요, 파일별로. 라이선스는 의도된 사용(상업적 목적인 경우)을 허용해야 합니다. 각 트랙의 출처, 저자 및 라이선스를 기록하세요. 자세한 내용은 assets.md를 참조하세요.
  • 나레이션: 스킬은 음성을 생성하지 않습니다. 나레이션 텍스트를 짧은 블록으로 작성하고, 사용자에게 자신의 음성 서비스(예: ElevenLabs)에서 생성하여 파일을 보내달라고 요청하세요. 음성 생성에는 비용이 듭니다: 블록을 명시하고 거기서 멈추세요.

재현 가능성 — "결정론적"이 실제로 요구하는 것

엔진은 합성을 시간별로 검색 가능하게 만듭니다. 이것만으로는 동일한 출력을 보장하지 않습니다.

바이트 단위로 재현 가능한 파일을 약속하려면 다음을 모두 고정해야 합니다: HyperFrames, Chrome, FFmpeg, 글꼴, 에셋, 코덱 및 플래그, 해상도, FPS, 지속 시간, 환경. 이 잠금 없이 동일한 커밋이라도 약속을 허가하지 않습니다.

감사된 출처: 저장소 heygen-com/hyperframes, 커밋 af1cb1c10da33bade100db8233435c7591b7c0bc, 해당 커밋의 주요 패키지 0.8.17, 루트 및 CLI에서 Apache-2.0 라이선스. 2026-08-28에 확인됨. 이 저장소의 exemplo-p01/은 package.json에 버전이 고정된 0.8.166으로 렌더링되었습니다. 프로젝트에서 버전을 고정하고, 합성이 명세서에서 다루지 않는 기능에 의존한다면 다시 감사하세요.

항상 유효한 것

  1. 실제 콘텐츠, 결코 발명된 것이 아님 — 최종처럼 보이는 플레이스홀더 없음.
  2. 캡션과 대비는 결과물의 일부이며, 추가 사항이 아닙니다.
  3. 실제 출력에서 검증, 미리보기에서 하지 않음. 미리보기가 보여주는 것과 최종 파일이 포함하는 것은 다릅니다 — 코덱, 색상 및 타이밍이 다릅니다.
  4. 자체 씬 코드는 계속 자체 disposal을 담당합니다. 합성 내 Three/WebGL 씬은 다른 곳과 마찬가지로 teardown이 필요합니다.

관련 스킬