Douyin Remotion Video
이 스킬은 사용자가 영어 어휘 자료를 Douyin 스타일의 펀치 있는 단어 학습 숏폼 동영상으로 만들고자 할 때 사용하세요. 특히 다음과 같은 경우에 적합합니다:
- 단어 뿌리, 접두사, 접미사, 단어군, 혼동어쌍 또는 어휘 목록을 숏폼 동영상으로 만들어야 할 때
- 영어 학습 Remotion 프로젝트에 검정/노랑 고대비 어휘 카드 스타일이 필요할 때
- Alibaba Bailian/DashScope CosyVoice 내레이션이 자막 및 타이밍을 구동해야 할 때
- 기존 Remotion 장면의 스타일, 리듬, 자막, 음성 또는 최종 내보내기 검토가 필요할 때
논문 설명, 코드 모듈 설명, 아키텍처 다이어그램, 일반 지식 동영상 또는 플러그 앤 플레이 모듈 프로젝트에는 이 스킬을 사용하지 마세요. 그러한 작업은 별도의 스킬이나 프로젝트에 속합니다.
이 줄은 고정되었습니다: 새로운 루트워드 에피소드는 더 이상 만들지 않습니다. 새로운 어휘 에피소드는 템플릿 스킬(skills/vocab-dossier, skills/vocab-game-show, skills/vocab-whiteboard 중 하나, npm run plan으로 선택, 규칙은 skills/_shared/HOUSE_RULES.md 참조)을 사용하세요. 이 스킬은 기존 검정/노랑 루트워드 에피소드(001–059)를 다시 렌더링하는 용도로만 남아 있습니다.
입력
일반적인 입력:
- 어휘 콘텐츠: 대상 루트/접사, 단어 목록, 의미, 발음, 예시 암기 각도 또는 영어 학습 에피소드에 대한 간략한 아이디어
- 에피소드 개요: 주제, 대상, 목표, 플랫폼, 길이, 처음 3초 훅, 핵심 단어
public/bgm/,shared-assets/bgm/및src/data/bgmRegistry.ts의 BGM 자산 및 레지스트리 항목public/assets/icons/animals/,shared-assets/icons/animals/및src/data/animalIconRegistry.ts의 로컬 동물 아이콘 자산- 데이터 파일:
src/data/words.ts,src/data/voiceScript.ts,src/data/episodeConfig.ts, 선택적src/data/subtitles.ts - React + TypeScript를 사용하는 기존 Remotion 프로젝트
- 영어 어휘 비주얼 스타일에 대한 선택적 참조 동영상 또는 스크린샷
출력
예상 출력:
- 실행 가능한 영어 어휘 Remotion 에피소드
- 데이터 기반 어휘 파일
public/audio/segments/의 TTS 세그먼트public/audio/main-voice.mp3의 병합된 내레이션src/data/generatedVoiceTimeline.ts의 오디오 기반 타임라인- 최종 MP4, 일반적으로
out/root-word-template.mp4또는 에피소드별 출력 경로 - 에피소드 산출물과 함께 내보내진 모든 에피소드의 Douyin 커버 이미지
- 에피소드당 약 150자의 중국어 문자와 내장된
#태그가 포함된 Douyin 캡션
핵심 워크플로우
- 어휘 주제를 읽고 짧은 에피소드 개요를 작성합니다.
- 수업 본문을 작성하기 전에 처음 3초 훅을 디자인합니다.
hookType, 훅 카피, 플래시 단어, 루트 텍스트, 톤, SFX 순간, 선택적 단일 동물 반응을 선택합니다. - 특히
voiceScript.ts및words.ts와 같은 어휘 데이터 파일을 생성하거나 업데이트합니다. episodeConfig.ts를 구성합니다. 여기에는hook,bgmId,bgmVolume,voiceVolume,sfxVolume이 포함됩니다.bgmRegistry에서 적절한 BGM을 선택하고 기본bgmVolume: 0.32를 구성하며 믹스 확인을 계획합니다.- 훅, 오개념, 루트 공개 또는 요약 비트를 지원하는 경우에만
animalIconRegistry에서 2-4개의 동물 아이콘 순간을 선택합니다. - 데이터에서 Remotion 장면을 구축합니다. 콘텐츠, 타이밍, 오디오 믹스 설정, 아이콘 순간 및 시각적 상태를 분리합니다.
- DashScope CosyVoice로 TTS 내레이션을 생성합니다. API 키를 하드코딩하지 마십시오.
ffprobe지속 시간을 사용하여generatedVoiceTimeline.ts를 생성합니다.generatedVoiceTimeline에서 자막, 활성 장면, 활성 키워드, 훅 플래시 단어, 갈등 카피 및 펀치 줌을 구동합니다.- 특히 0-3초 이내의 프레임과 실제 TTS 이후 늘어난 훅 비트에서 키 비트의 스틸 프레임을 렌더링한 다음 빈 프레임, 겹침 및 대비 부족을 검사합니다.
- 에피소드의 Douyin 커버를 생성합니다. 모든 에피소드는 커버 이미지를 함께 제공해야 하며, 예외는 없습니다.
- 약 150자의 중국어 문자와 내장된
#태그가 포함된 Douyin 캡션을 생성하고 릴리스 파일과 함께 내보냅니다. - 최종 MP4를 렌더링하고 훅 중단, 오디오/비디오 동기화, BGM 덕킹, BGM 볼륨, 동물 아이콘 배치, 최종 페이드 아웃, 커버 가독성 및 캡션 품질을 확인합니다.
필요 시 로드할 파일
- 비주얼 스타일:
references/visual_rules.md - 처음 3초 훅:
references/hook_rules.md - 타이밍 및 페이싱:
references/rhythm_rules.md - DashScope 내레이션:
references/voice_rules.md - BGM 및 오디오 믹스:
references/audio_rules.md - 동물 아이콘 사용:
references/icon_rules.md - 자막 디자인 및 동기화:
references/subtitle_rules.md - 내보내기 QA 체크리스트:
references/quality_rules.md - 종단간 절차:
workflow.md - 현재 예시:
examples/ject_episode_example.md
선호하는 프로젝트 패턴
다음 파일을 데이터 기반으로 유지하세요:
src/data/voiceScript.ts: 어휘 에피소드의 표준 내레이션 및 자막 소스src/data/generatedVoiceTimeline.ts: 실제 오디오 지속 시간에서 생성됨src/data/bgmRegistry.ts:public/bgm/에서 생성된 로컬 BGM 레지스트리src/data/animalIconRegistry.ts:public/assets/icons/animals/에서 생성된 로컬 동물 아이콘 레지스트리src/data/episodeConfig.ts: 에피소드별hook,bgmId,bgmVolume,voiceVolume,sfxVolumesrc/scenes/HookScene.tsx: 하드 컷, 단어 플래시, 갈등 카피, 페이오프, 선택적 로컬 SFX 및 최대 하나의 동물 반응을 포함하는 Douyin 중단 시스템. TTS 후generatedVoiceTimeline에서 파생된 타이밍을 사용해야 늘어난 훅 내레이션이 빈 프레임을 남기지 않습니다.src/timeline.ts:generatedVoiceTimeline에서 장면 타이밍을 파생합니다.src/components/BackgroundMusic.tsx: BGM을 반복하고 음성 아래에서 덕킹하며 마지막에 페이드 아웃합니다.src/components/AnimatedAnimalIcon.tsx: 선택된 감정적 비트에 대한 짧고 로컬한 동물 아이콘 반응src/CoverThumbnail.tsx: 표준 통합 Douyin 커버 템플릿. 검정/노랑 느낌을 유지하고 크리에이터 브랜딩小猪盖被를 표시하며 적절할 때 로컬 동물 아이콘을 사용해야 합니다.scripts/generate-release-copy.ts: 에피소드 캡션 및 게시 노트를 위한 표준 릴리스 카피 생성기src/utils/audioMixing.ts: 공유 BGM 볼륨, 덕킹 및 페이드 헬퍼src/utils/motion.ts:slamIn,punchZoom,shake,flashOpacity와 같은 공유 모션 헬퍼public/audio/main-voice.mp3: Remotion이<Audio>로 재생해야 하는 유일한 생성된 아티팩트public/bgm/: Remotion이 사용하는 로컬 BGM, 렌더링 중 네트워크에서 BGM을 로드하지 마십시오.public/assets/icons/animals/: Remotion이 사용하는 로컬 동물 아이콘, 렌더링 중 원격 URL에서 아이콘을 로드하지 마십시오.
안전 규칙
- API 키를 소스 파일, 템플릿, 예제, 로그 또는 문서에 기록하지 마십시오.
- 환경 변수에서
DASHSCOPE_API_KEY를 사용하세요. - 생성된 오디오 및 타임라인을 교체 가능한 아티팩트로 취급하세요.
- 생성된 음성 타임라인이 있으면 하드코딩된 초 마커에 의존하지 마십시오.
- 모든 에피소드는 비디오 산출물과 함께 Douyin 커버 이미지를 내보내야 합니다.
- 모든 에피소드는 비디오 산출물과 함께 Douyin 캡션을 내보내야 합니다.
- 커버는 통합 브랜드 스타일(검정 배경, 노랑 강조, 크리에이터 이름
小猪盖被, 읽기 쉬운 루트 기반 암기 각도)을 유지해야 합니다. - 캡션은 약 150자의 중국어 문자여야 하며 단일 Douyin 게시물 본문으로 읽을 수 있어야 하고
#英语学习스타일의 태그를 포함해야 합니다. - 일반 제목 페이지로 에피소드를 시작하지 마십시오. 처음 0.5-1초는 큰 텍스트 또는 하드 비주얼 히트로 스크롤을 중단해야 합니다.
- TTS 후 훅 비주얼이 고정된 3초 마커에서 끝나지 않도록 하십시오. 실제 음성 타임라인이 시작 부분을 늘리면 루트 또는 패턴 공개가 시작될 때까지 일치하는 플래시 단어 및 갈등 비주얼을 화면에 계속 유지하십시오.
- 훅 오빗/버블 단어 플래시는 실제
flash-words음성 세그먼트에 의해 템포가 조정되어야 합니다. 모든 단어에 고정된 8-10 프레임 슬롯을 사용하지 마십시오. 각 단어가 들릴 때 나타나도록 말하는 세그먼트 전체에 버블 공개 타이밍을 분산시키고 이전 단어는 계속 보이게 유지하십시오. - 오빗 회전을 제한하십시오. 046 스타일의 시작은 단어가 화면에서 휘날리는 것이 아니라 하나의 군집 주위로 모이는 느낌이어야 합니다. 일반적으로 세그먼트 전체에서 1/4 회전이면 충분합니다.
- 그리드/구조 장면은 실제 단어 수를 기반으로 동적 대칭 레이아웃을 사용해야 합니다. 에피소드에 6개 또는 7개의 단어가 있을 때 8-슬롯 레이아웃을 하드코딩하지 마십시오. 불완전한 행을 중앙에 배치하고 누락된 단어가 없는지 확인하십시오.
- 그리드 연결선은 루트/카드 가장자리에서 시작하여 모듈 뒤에 남아 있어야 합니다. 단어 텍스트 또는 카드 콘텐츠를 통해 선을 그리지 마십시오.
- DashScope
instruction이 시스템 음성에 대해 실패하면rate,voice,model및 스크립트 구조를 유지하면서instruction없이 다시 시도하십시오. - Remotion 미리보기 또는 렌더링 중에 원격 URL에서 BGM을 로드하지 마십시오.
- Remotion 미리보기 또는 렌더링 중에 원격 URL에서 동물 아이콘을 로드하지 마십시오.
- BGM 라이선스가 명확하지 않으면 에피소드
notes.md에license_check_required를 추가하십시오. - 변경에 대한 문서화된 이유가 없는 한 현재 오디오 기본값을 사용하십시오:
bgmVolume: 0.32, 음성 덕킹 계수0.65, BGM 안전 상한0.32.
유용한 명령어
npm run voice
npm run preview -- --port=3000
npm run render
npx tsc --noEmit
npm run render는 최종 비디오와 Douyin 커버 이미지를 모두 내보내기 때문에 모든 에피소드의 기본 릴리스 명령으로 취급되어야 합니다.
npm run copy는 활성 에피소드의 Douyin 캡션 및 게시 노트만 백필 또는 새로고침하는 데 사용할 수 있습니다.
키프레임 확인:
npx remotion still src/index.ts RootWordTemplate out/check.png --frame=150 --scale=0.5