범용 클레이 스톱모션 테마 비디오
이 스킬은 일관된 시각적 스타일과 교체 가능한 테마를 가진 짧은 비디오를 생성합니다. '클레이 질감 + 계층형 에셋 + 스톱모션 + 자막 및 사운드'의 범용 제작 방법을 설명합니다. 도시, 날짜, 캐릭터, 랜드마크, 탈것, 줄거리 및 음향 효과는 모두 사용자의 현재 브리핑에서 읽어와야 하며, 특정 프로젝트에 고정되어서는 안 됩니다.
최종 결과물에는 재실행 가능한 HyperFrames 소스 프로젝트, 실제 로컬 에셋, 오디오, MP4 내보내기 및 최종 프레임 추출 검사 이미지가 포함되어야 합니다. 렌더링되지 않은 HTML 미리보기는 최종 영상으로 간주되지 않습니다.
먼저 테마 변수 정의
코드를 작성하기 전에 사용자 요구사항에서 다음을 추출하여 기록합니다.
- 한 줄 요약: 누가 어떤 세계에서 어떤 목표를 완수하는가;
- 시간, 장소, 시대, 랜드마크 또는 세계관;
- 캐릭터 수, 외모, 의상, 소품 및 동작;
- 시각적 재료: 클레이, 판지, 천, 나무, 금속 또는 기타 수제 질감;
- 색상 출처 및 오프닝/엔딩 언어;
- 길이, 화면 비율, 플랫폼, 자막 및 사운드 요구사항.
사용자가 참조 비디오만 제공한 경우, 먼저 재료, 컷 리듬, 구도, 자막 및 사운드를 분석한 후 테마 변수를 DESIGN.md에 기록합니다. 참조 비디오는 방법과 분위기를 제공할 뿐, 새 비디오의 이야기를 자동으로 결정하지 않습니다.
표준 작업 흐름
- 참조 분석 및 가정 기록. 길이, 비율, 컷 리듬, 스톱모션 정지, 재료, 자막 위치, 음악 및 이벤트 음향 효과를 기록합니다. 확인할 수 없는 내용은 가정으로 기록하고 사실인 것처럼 가장하지 마십시오.
- 먼저 설계 문서 작성.
DESIGN.md,STORYBOARD.md및 에셋 목록을 생성합니다. 테마 색상, 재료, 글꼴, 컷 시간, 자막, 오디오 큐 및 엔딩 문구를 정의합니다. - 계층형 에셋 생성. 배경, 캐릭터, 소품, 랜드마크, 텍스처 및 로컬 효과는 로컬 PNG/JPG/WAV로 저장합니다. 캐릭터 및 전경 소품은 투명 PNG를 우선 사용하고, 카메라 위치, 조명, 비율 및 재료 일관성을 유지합니다.
- 에셋 귀속 감사 수행. 각 캐릭터/소품 PNG를 열어 이미 포함된 백팩, 컵, 카드, 모자, 그림자 등의 객체를 나열합니다. 모든 보이는 객체는 캐릭터 PNG, 독립 에셋 레이어 또는 HTML/CSS 중 하나의 출처만 가져야 합니다. 이미 캐릭터 PNG에 그려진 객체에 대해 단순화된 CSS 버전 레이어를 추가할 수 없습니다. 자세한 내용은
references/compositing-audit.md를 참조하십시오. - 먼저 정적 장면 완성. 루트 진입점은
index.html을 사용합니다. 세로 화면이 필요한 경우compositions/에 독립 컴포지션을 배치합니다. 각 컷이 정적 상태에서 먼저 완성되도록 한 다음 모션을 추가합니다. - 결정론적 스톱모션 추가. GSAP의 일시 정지 타임라인, 장면 시작/종료 시간 및 제한된 횟수의
steps(n)를 사용합니다. 미세한 이동, 확대/축소, 회전, 흔들림 및 정지를 통해 수제 스톱모션 느낌을 표현합니다.Math.random(),Date.now(),repeat: -1및 서로 덮어쓰는 CSS/GSAP transform은 금지합니다. - 자막 및 엔딩 추가. 자막은 HTML 레이어이며, 다른 화면 비율에서도 읽기 쉬워야 합니다. 엔딩에는 사용자가 요청한 공식 문구만 포함하고,
preview,draft,test,Codex또는 내부 프롬프트는 금지합니다. - 계층형 사운드 추가. 음악 및 이벤트 음향 효과는 각각 로컬 오디오로 처리합니다. 각
<audio>에는data-start,data-duration,data-track-index,data-volume, 페이드 인/아웃을 명확히 작성합니다. 중첩된 세로 컴포지션의 0이 아닌 시작 큐에는data-hf-media-start-basis="local"을 추가합니다. 플레이스홀더 오디오는 초안에만 사용하고, 최종 타임라인에 혼용하지 마십시오. 백색 소음을 파도, 바람, 불꽃 등 자연 환경음으로 직접 사용하지 마십시오. 적절한 에셋이 없으면 비워두거나 사운드 밀도를 낮추십시오. 납품 전에references/audio-layout.md에 따라 각 오디오 트랙과 믹스를 개별적으로 확인하십시오. - 플랫폼에 맞게 재구성. 세로 화면은 가로 화면을 단순히 자르는 방식으로 만들지 마십시오.
data-width="1080" data-height="1920"을 설정하고, 테마의 주요 대상, 핵심 랜드마크 및 자막을 유지하며, 텍스트를 중앙 안전 영역에 배치하고 캐릭터와 소품의 위치를 재조정하십시오. 자세한 내용은references/vertical-export.md를 참조하십시오. - 렌더링, 프레임 추출 및 검토. lint, validate, 렌더링, ffprobe 및 contact sheet를 실행합니다. 화면 비율, 길이, 자막, 에셋 계층, 중복 객체, 떠다니는 사각형, 엔딩 내부 마커, H.264 비디오 및 AAC 오디오를 확인합니다. 개별 오디오 트랙과 최종 믹스의 시작 0–5초, 주요 전환 및 엔딩을 실제로 청취합니다. ffprobe 및 레벨 검사는 청취 검사를 대체할 수 없습니다. 자세한 내용은
references/workflow.md및references/audio-layout.md를 참조하십시오.
범용 프로젝트 규칙
- 하나의 루트
index.html을 유지합니다. 대체 화면 비율은compositions/에 배치하여 HyperFrames가 여러 루트 진입점을 발견하지 못하도록 합니다. - 실제 랜드마크 또는 테마의 주요 대상에는 실제 래스터 에셋을 사용합니다. CSS 기하학 도형은 임시 레이아웃에만 사용하고 최종 시각적 에셋으로 사용하지 않습니다.
- 테마 콘텐츠는 브리핑에 의해 결정되며, 스킬에 도시, 노선, 날짜, 직업 또는 고정 캐릭터를 사전 설정할 수 없습니다.
- 각 소품은 에셋 목록에 'PNG에 내장됨' 또는 '독립 레이어'로 표시되어야 합니다. 내장 소품인 경우 동일한 의미의 CSS 레이어를 다시 생성하지 마십시오.
- 환경 소품이 필요한 경우 게이트, 난로, 문, 열차 또는 빗줄기와 같은 명확한 ID와 주석을 사용하여 환경 객체가 캐릭터에 붙은 마커처럼 보이지 않도록 합니다.
- 실제 회사 로고, 개인 정보 또는 라이선스 없는 음악을 사용하지 마십시오. 범용 표지판, 생성 텍스처 및 로컬 결정론적 오디오를 우선 사용합니다.
검증 명령어
npm install
npx hyperframes lint
npx hyperframes lint compositions/vertical.html
npx hyperframes validate --no-contrast
npm run render
npm run render:vertical
세로 화면 내보내기 후 실제 프로젝트의 ffprobe-static을 사용하여 확인합니다.
FFPROBE=$(node --input-type=module -e "import p from 'ffprobe-static'; console.log(typeof p === 'string' ? p : p.path)")
python3 scripts/check_render.py outputs/final-vertical.mp4 \
--ffprobe "$FFPROBE" --width 1080 --height 1920 --max-duration 60
최종 contact sheet에는 최소한 오프닝, 주요 동작, 전환, 클라이맥스/결과 및 엔딩이 포함되어야 합니다. 렌더링 성공이 시각적 정확성을 의미하지는 않습니다. 설명할 수 없는 흰색, 갈색, 파란색 또는 회색 사각형, 반복되는 랜드마크, 반복되는 소품, 떠다니는 객체 또는 내부 미리보기 문구가 나타나면 에셋 귀속 감사로 돌아가서 다시 처리해야 합니다.
지원 문서
references/workflow.md: 범용 브리핑, 에셋 목록, 컷 구조 및 승인 기준.references/compositing-audit.md: 내장 소품 귀속, 중복 레이어 및 시각적 아티팩트 검사.references/vertical-export.md: 9:16 안전 영역 및 재구성 규칙.references/audio-layout.md: 범용 음악/음향 효과 레이아웃 및 음량 검사.