exiao/skills

Remotion 동영상

Remotion(React)을 사용하여 애니메이션 동영상을 제작합니다. 공식 remotion-dev 모범 사례와 Bloom 특화 컴포지션을 기반으로 합니다.

빠른 라우터

작업에 따라 관련 규칙 파일을 읽으십시오:

핵심 애니메이션

작업	규칙 파일
인터폴레이션, 이징, 스프링	references/rules/timing.md
애니메이션 기초	references/rules/animations.md
텍스트 애니메이션 (타자기, 단어별 등)	references/rules/text-animations.md
장면 전환 (슬라이드, 페이드, 와이프, 플립)	references/rules/transitions.md
시퀀싱 (지연, 트림, 지속 시간 제한)	references/rules/sequencing.md
트리밍 (시작/끝 자르기)	references/rules/trimming.md

미디어

작업	규칙 파일
이미지 (Img 컴포넌트)	references/rules/images.md
동영상 (임베드, 트림, 볼륨, 속도, 루프)	references/rules/videos.md
오디오 (가져오기, 트림, 볼륨, 속도, 피치)	references/rules/audio.md
오디오 시각화 (스펙트럼, 파형)	references/rules/audio-visualization.md
타임라인에 동기화된 GIF	references/rules/gifs.md
폰트 (Google Fonts, 로컬)	references/rules/fonts.md
에셋 (이미지/동영상/오디오 가져오기)	references/rules/assets.md

자막 및 음성 해설

작업	규칙 파일
자막 생성 (오디오 전사)	references/rules/transcribe-captions.md
SRT 자막 가져오기	references/rules/import-srt-captions.md
자막 표시 (애니메이션 자막)	references/rules/display-captions.md
자막 개요	references/rules/subtitles.md
AI 음성 해설 (ElevenLabs TTS)	references/rules/voiceover.md

고급

작업	규칙 파일
3D 콘텐츠 (Three.js / React Three Fiber)	references/rules/3d.md
차트 (막대, 원형, 선, 주식)	references/rules/charts.md
지도 (Mapbox)	references/rules/maps.md
Lottie 애니메이션	references/rules/lottie.md
라이트 릭 오버레이	references/rules/light-leaks.md
투명 비디오 렌더링	references/rules/transparent-videos.md

설정 및 구성

작업	규칙 파일
컴포지션, 스틸, 폴더, 기본 props	references/rules/compositions.md
동적 메타데이터 (calculateMetadata)	references/rules/calculate-metadata.md
Zod 스키마로 매개변수화	references/rules/parameters.md
Remotion에서 TailwindCSS 사용	references/rules/tailwind.md
텍스트 측정 (맞춤, 오버플로)	references/rules/measuring-text.md
DOM 노드 측정	references/rules/measuring-dom-nodes.md

FFmpeg 및 미디어 유틸리티

작업	규칙 파일
FFmpeg 작업 (트림, 무음 감지)	references/rules/ffmpeg.md
비디오에서 프레임 추출	references/rules/extract-frames.md
비디오 길이 구하기	references/rules/get-video-duration.md
비디오 크기 구하기	references/rules/get-video-dimensions.md
오디오 길이 구하기	references/rules/get-audio-duration.md
비디오 디코딩 가능 여부 확인	references/rules/can-decode.md

---

remotion-bits 컴포넌트 키트

미리 제작된 애니메이션 컴포넌트입니다. 설치: npm install remotion-bits

주요 컴포넌트: AnimatedText (단어/문자/문단 나타내기), ParticleSystem (컨페티, 눈, 반딧불), GradientTransition, Scene3D (3D 카메라 무브먼트), Typewriter, CodeBlock (구문 강조 타이핑).

전체 카탈로그 및 사용 예시는 references/remotion-bits.md를 참조하세요.

---

Bloom 프로젝트

프로젝트 위치: ~/clawd/remotion-videos/

remotion-videos/
├── src/
│   ├── Root.tsx          # 모든 컴포지션이 여기에 등록됨
│   ├── ProductDemo.tsx   # 메인 제품 데모 컴포넌트
│   ├── schema.ts         # Props용 Zod 스키마
│   ├── scenes/           # 개별 장면 컴포넌트
│   │   ├── TerminalTyping.tsx
│   │   ├── FileScanning.tsx
│   │   ├── ScoreReveal.tsx
│   │   ├── ResultsSummary.tsx
│   │   └── TextOverlay.tsx
│   └── Composition.tsx
├── public/               # 정적 에셋
├── out/                  # 렌더링 출력
├── remotion.config.ts
└── package.json

기존 컴포지션

ID	크기	사용 사례
ProductDemo	1080x1080	트위터/인스타그램 정사각형
ProductDemoVertical	1080x1920	틱톡/릴스/쇼츠 세로형
BloomDemo	1080x1080	Bloom 브랜드 정사각형
BloomDemoVertical	1080x1920	Bloom 브랜드 세로형

모든 컴포지션: 15초 @ 30fps (450프레임).

Props 스키마 (ProductDemoProps)

{
  command: string;           // 표시되는 터미널 명령어 타이핑
  files: Array<{             // 스캔 애니메이션용 파일 목록
    name: string;
    errors: number;
    warnings: number;
  }>;
  score: number;             // 공개할 점수 (0-maxScore)
  maxScore: number;          // 최대 점수 값
  statusLabel: string;       // 예: "Critical", "Moderate Risk"
  statusColor: string;       // 상태 표시용 Hex 색상
  resultLines: string[];     // 요약 결과
  title: string;             // 비디오 제목 텍스트
  logoText: string;          // 브랜드/제품명
}

---

사전 컴포지션: 실제 Bloom 스크린샷

비디오에 Bloom 앱 UI가 포함된 경우, 먼저 실제 스크린샷을 캡처하십시오:

1. PhoneAgent 브리지 시작 (~/clawd/skills/phoneagent/SKILL.md 참조)
2. 실행: python scripts/capture_bloom_screenshots.py --feature <portfolio|stock_detail|watchlist> --output public/screenshots/<feature>
3. 컴포지션에서 스크린샷 참조: staticFile("screenshots/<feature>/home.png")

브리지가 실행 중이지 않으면 자동으로 대체됩니다.

---

렌더링

cd ~/clawd/remotion-videos

# 브라우저에서 미리보기 (Remotion Studio)
npm run dev

# MP4로 렌더링
npx remotion render ProductDemo out/product-demo.mp4

# 틱톡용 세로형 렌더링
npx remotion render ProductDemoVertical out/product-demo-vertical.mp4

# 사용자 정의 props
npx remotion render ProductDemo out/custom.mp4 --props='{"command":"my command","score":85}'

# GIF로 렌더링
npx remotion render ProductDemo out/demo.gif --image-format=png --codec=gif

# 특정 프레임 범위
npx remotion render ProductDemo out/clip.mp4 --frames=0-150

새 컴포지션 만들기

1. src/scenes/에 장면 컴포넌트 생성
2. src/에 메인 컴포지션 생성
3. src/schema.ts에 Zod 스키마 정의
4. src/Root.tsx에 크기와 함께 등록:
   • 정사각형: 1080x1080 (트위터, 인스타그램)
   • 세로형: 1080x1920 (틱톡, 릴스, 쇼츠)
   • 가로형: 1920x1080 (유튜브)

---

렌더링 후 QA

렌더링 후 항상 QA를 실행하십시오:

python scripts/visual_qa.py out/video.mp4 "목표 설명"
# 또는 래퍼 사용:
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "목표 설명"

발견된 문제를 수정하고 다시 렌더링하십시오. QA에 실패한 비디오를 전달하지 마십시오.

---

팁

• 소셜 미디어용으로 15-30초 분량 유지
• 모바일 시청을 위해 고대비 색상 사용
• 자막/텍스트 오버레이 추가 (대부분의 시청자는 음소거 상태로 시청)
• 게시 전 정사각형과 세로형 모두 테스트
• 소셜 미디어용 30fps (고속 움직임의 경우 60fps)
• 처음부터 애니메이션을 만들기보다 remotion-bits 컴포넌트 사용