remotion-render
React/Remotion 코드로 비디오 렌더링
또한 다음에서 사용할 수 있습니다: inference-sh-8,inference-sh-7
Remotion을 사용하여 React TSX 코드를 전문적인 MP4 비디오로 변환합니다. 개발자, 콘텐츠 크리에이터 및 자동화 워크플로우를 위한 프로그래매틱 비디오 생성입니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"remotion-render" 사용 중입니다. 애니메이션 텍스트로 간단한 Remotion 비디오 렌더링
예상 결과:
스킬이 inference.sh API를 호출하고 비디오 파일을 반환합니다. 사용자가 렌더링된 애니메이션이 포함된 다운로드 가능한 MP4를 받습니다.
"remotion-render" 사용 중입니다. 0에서 100까지 카운터 애니메이션 생성
예상 결과:
렌더링 중에 진행 상황 업데이트가 스트리밍된 후, 애니메이션 카운터가 표시된 최종 MP4가 전달됩니다.
"remotion-render" 사용 중입니다. 커스텀 props로 비디오 생성
예상 결과:
Remotion 컴포넌트가 props를 받아 제공된 제목과 자막이 포함된 personalize된 비디오를 렌더링합니다.
보안 감사
안전All 43 static findings are false positives. External commands (infsh app run) are hardcoded service invocations, not arbitrary execution. Network requests go to the legitimate inference.sh rendering service. No malicious patterns detected.
위험 요인
⚙️ 외부 명령어 (31)
품질 점수
만들 수 있는 것
개발자 문서 비디오
비디오 편집기를 사용하는 대신 React 컴포넌트를 작성하여 튜토리얼 및 문서 비디오 생성을 자동화
소셜 미디어 콘텐츠
코드 템플릿에서 애니메이션 소셜 미디어 게시물, 공지 및 프로모션 비디오 생성
데이터 기반 비디오 자동화
동적 props를 Remotion 컴포넌트에 전달하여 데이터, 지표 또는 분석을 시각화하는 비디오 생성
이 프롬프트를 사용해 보세요
remotion-render 스킬을 사용하여 비디오를 렌더링하세요. 중앙에 'Hello World' 텍스트가 3초에 걸쳐 페이드인되는 간단한 애니메이션을 만드세요. 30fps, 1920x1080 해상도입니다.
remotion-render를 사용하여 5초에 걸쳐 0에서 100%까지 애니메이션 진행 카운터를 만드세요. 60fps입니다. 카운터는 검은색 배경 중앙에 큰 흰색 텍스트로 표시되어야 합니다.
remotion-render 비디오를 만들어 3개의 순차적 텍스트 요소가 하나씩 페이드인되도록 하세요. 각 텍스트가 1초 동안 나타나 시퀀스 애니메이션을 만드세요.
title과 subtitle을 props로接受的 remotion-render 비디오를 렌더링하세요. title='Welcome'과 subtitle='Created with AI'를 전달하여 브랜드 오프닝 슬라이드를 생성하세요.
모범 사례
- Remotion API를 배우면서 점차 복잡성을 더해 간단한 애니메이션부터 시작하세요
- 긴 비디오의 경우 렌더링 진행 상황을 추적하기 위해 스트리밍을 사용하세요
- TSX 코드를 Remotion Studio에서 먼저 테스트하여 초기 오류를 잡으세요
- 개발 중에는 렌더링 시간을 줄이기 위해 비디오 지속 시간을 짧게 유지하세요
피하기
- 60초 이상의 매우 긴 비디오는 스트리밍 없이 렌더링하려고 하지 마세요 - 진행 상황을 볼 수 없습니다
- 렌더링 시간 제한을 초과하는 복잡한 중첩 애니메이션을 피하세요
- 매우 많은 양의 데이터를 props로 전달하지 마세요 - props 값을 단순하게 유지하세요
- 렌더링 중에 로드되지 않을 수 있는 외부 이미지나 자산 사용을 피하세요