kguevaram94/remotion-playground

Remotion Shorts — 레포지토리 스킬

공식 포맷: logic-lateral

참조: output/s4-19-interruptores/ · 템플릿: data/templates/script-logic-lateral.json.

비트: hook → rules → countdown → explanation → reveal → outro (댓글 CTA).

비주얼: logic-room, switch-sequence, bulb-state-reveal (+ countdown, text).

cp data/templates/script-logic-lateral.json data/topics/mi-reto.json
npm run generar-short -- --input data/topics/mi-reto.json

자동 빌더 (제목에 스위치/전구 포함): src/shorts/templates/three-switches.ts.

핵심 규칙

1. 모든 애니메이션은 useCurrentFrame() / interpolate / spring에 의존합니다.
2. 데이터는 선언형 JSON으로 작성하고, 컴포넌트는 src/shorts/remotion/components/에 위치합니다.
3. 프레임 동기화가 공식 지원되지 않는 GSAP, Anime.js, Motion Canvas는 정당한 사유 없이 추가하지 않습니다.
4. FFmpeg/Satori는 포스트 프로세스에서 처리하며, 컴포지션 내부에서 사용하지 않습니다.
5. HelloRemotion과 ScriptVideo를 손상시키지 않습니다.
6. logic-lateral 아웃트로는 항상 댓글을 요청합니다.

수정 위치

변경 사항	파일
새로운 시각적 장면	components/ + ShortVideo.tsx 내 분기 + 스키마
템플릿 / 감지	src/shorts/templates/ + select.ts
파이프라인	src/shorts/pipeline/
썸네일	src/shorts/media/thumbnail.ts
FFmpeg	src/shorts/media/ffmpeg.ts
렌더링 옵션	render-video.ts (gl: angle, 번들 캐시)

외부 참조

• https://www.remotion.dev/docs/third-party
• https://www.remotion.dev/docs/ffmpeg
• https://www.remotion.dev/docs/three
• https://www.remotion.dev/docs/rive