remotion-video-creation

name	remotion-video-creation
description	React 기반 Remotion 영상 제작 모범 사례입니다. 3D, 애니메이션, 오디오, 자막, 차트, 전환 등 29개 도메인 규칙을 다룹니다.
metadata	{"tags":"remotion, video, react, animation, composition, three.js, lottie"}

사용 시점

Remotion 코드를 다룰 때마다 이 스킬을 사용해 도메인 특화 지식을 불러옵니다.

사용 방법

자세한 설명과 코드 예제는 개별 규칙 파일을 읽습니다.

• rules/3d.md - Three.js와 React Three Fiber를 이용한 Remotion 3D 콘텐츠
• rules/animations.md - Remotion의 기본 애니메이션 기술
• rules/assets.md - 이미지, 비디오, 오디오, 폰트를 Remotion에 가져오는 방법
• rules/audio.md - 오디오 및 사운드 사용: 가져오기, 트리밍, 볼륨, 속도, 피치
• rules/calculate-metadata.md - 컴포지션 길이, 크기, props를 동적으로 설정
• rules/can-decode.md - 브라우저가 비디오를 디코딩할 수 있는지 Mediabunny로 확인
• rules/charts.md - Remotion용 차트 및 데이터 시각화 패턴
• rules/compositions.md - 컴포지션, still, 폴더, 기본 props, 동적 메타데이터 정의
• rules/display-captions.md - TikTok 스타일 페이지와 단어 강조를 이용한 자막 표시
• rules/extract-frames.md - Mediabunny로 특정 시점의 프레임 추출
• rules/fonts.md - Google Fonts와 로컬 폰트를 Remotion에 로드
• rules/get-audio-duration.md - 오디오 파일 길이를 초 단위로 구하기
• rules/get-video-dimensions.md - 비디오 파일의 너비와 높이 구하기
• rules/get-video-duration.md - 비디오 길이를 초 단위로 구하기
• rules/gifs.md - Remotion 타임라인과 동기화된 GIF 표시
• rules/images.md - Img 컴포넌트를 사용한 이미지 삽입
• rules/import-srt-captions.md - @remotion/captions로 .srt 자막 파일 가져오기
• rules/lottie.md - Lottie 애니메이션 삽입
• rules/measuring-dom-nodes.md - DOM 요소 크기 측정
• rules/measuring-text.md - 텍스트 크기 측정, 컨테이너 맞춤, overflow 점검
• rules/sequencing.md - 지연, 트리밍, 길이 제한 등 시퀀싱 패턴
• rules/tailwind.md - Remotion에서 TailwindCSS 사용
• rules/text-animations.md - 타이포그래피와 텍스트 애니메이션 패턴
• rules/timing.md - 선형, easing, spring 기반 보간 곡선
• rules/transcribe-captions.md - 오디오 전사를 통한 자막 생성
• rules/transitions.md - 장면 전환 패턴
• rules/trimming.md - 애니메이션 시작/끝 자르기 패턴
• rules/videos.md - 비디오 삽입, 트리밍, 볼륨, 속도, 루프, 피치