Loading...
Loading...
Produce programmable videos with Remotion using scene planning, asset orchestration, and validation gates for automated, brand-consistent video content.
npx skill4agent add supercent-io/skills-template video-productionvideo_spec:
audience: [타겟 오디언스]
goal: [비디오 목적]
duration: [총 길이 - 30s, 60s, 90s]
aspect_ratio: "16:9" | "1:1" | "9:16"
tone: "fast" | "calm" | "cinematic"
voice:
style: [내레이션 스타일]
language: [언어]## Scene Plan
### Scene 1: Hook (0:00 - 0:05)
- **Visual**: 제품 로고 페이드인
- **Audio**: 업비트 인트로
- **Text**: "Transform Your Workflow"
- **Transition**: 페이드 → Scene 2
### Scene 2: Problem (0:05 - 0:15)
- **Visual**: 문제 상황 일러스트
- **Audio**: 내레이션 시작
- **Text**: 핵심 메시지 오버레이
- **Transition**: 슬라이드 좌측
### Scene 3: Solution (0:15 - 0:30)
...# 에셋 체크리스트
assets/
├── logos/
│ ├── logo-main.svg
│ └── logo-white.svg
├── screenshots/
│ ├── dashboard.png
│ └── feature-1.png
├── audio/
│ ├── bgm.mp3
│ └── narration.mp3
└── fonts/
└── brand-font.woff2// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';
export const RemotionVideo: React.FC = () => {
return (
<>
<Composition
id="ProductIntro"
component={ProductIntro}
durationInFrames={1800} // 60s at 30fps
fps={30}
width={1920}
height={1080}
/>
</>
);
};
// Scene Component Example
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
const opacity = interpolate(frame, [0, 30], [0, 1]);
return (
<AbsoluteFill style={{ opacity }}>
<Logo />
<Title>Transform Your Workflow</Title>
</AbsoluteFill>
);
};# 1. 프리뷰 렌더링 (저품질)
npx remotion preview src/Video.tsx
# 2. QA 체크
- [ ] 타이밍 확인
- [ ] 오디오 싱크
- [ ] 텍스트 가독성
- [ ] 전환 부드러움
# 3. 최종 렌더링
npx remotion render src/Video.tsx ProductIntro out/video.mp4Create a 60s product intro video with 6 scenes,
upbeat tone, and 16:9 output. Include a CTA at the end.## Scene Breakdown
1. Hook (0:00-0:05): Logo + tagline
2. Problem (0:05-0:15): Pain point visualization
3. Solution (0:15-0:30): Product demo
4. Features (0:30-0:45): Key benefits (3 items)
5. Social Proof (0:45-0:55): Testimonial/stats
6. CTA (0:55-1:00): Call to action + contact
## Remotion Structure
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsxGenerate a 45s onboarding walkthrough using screenshots,
with callouts and 9:16 format for mobile.## Video Production Report
### Spec
- Duration: 60s
- Aspect Ratio: 16:9
- FPS: 30
### Scene Plan
| Scene | Duration | Visual | Audio | Transition |
|-------|----------|--------|-------|------------|
| Hook | 0:00-0:05 | Logo fade | BGM start | Fade |
| ... | ... | ... | ... | ... |
### Assets
- [ ] logo.svg
- [ ] screenshots (3)
- [ ] bgm.mp3
- [ ] narration.mp3
### Render Checklist
- [ ] Preview QA passed
- [ ] Audio sync verified
- [ ] Safe zones checked
- [ ] Final render complete| Agent | Role |
|---|---|
| Claude | 씬 플래닝, 스크립트 작성 |
| Gemini | 에셋 분석, 최적화 제안 |
| Codex | Remotion 코드 생성, 렌더링 실행 |
#video#remotion#animation#storytelling#automation#react