remotion-video-production by akillness/oh-my-skills
npx skills add https://github.com/akillness/oh-my-skills --skill remotion-video-production一项使用 Remotion 制作可编程视频的技能。根据文本指令生成自动化视频,并大规模制作品牌风格一致的视频。
video_spec:
audience: [目标受众]
goal: [视频目的]
duration: [总时长 - 30s, 60s, 90s]
aspect_ratio: "16:9" | "1:1" | "9:16"
tone: "fast" | "calm" | "cinematic"
voice:
style: [旁白风格]
language: [语言]
场景结构模板:
## 场景规划
### 场景 1:开场钩子 (0:00 - 0:05)
- **视觉**:产品标志淡入
- **音频**:欢快的开场音乐
- **文本**:"变革您的工作流程"
- **转场**:淡出 → 场景 2
### 场景 2:问题 (0:05 - 0:15)
- **视觉**:问题场景图示
- **音频**:旁白开始
- **文本**:关键信息叠加
- **转场**:向左滑动
### 场景 3:解决方案 (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
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
素材准备规则:
// 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}
/>
</>
);
};
// 场景组件示例
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. 质量保证检查
- [ ] 时间点验证
- [ ] 音频同步
- [ ] 文本可读性
- [ ] 转场流畅度
# 3. 最终渲染
npx remotion render src/Video.tsx ProductIntro out/video.mp4
提示:
Create a 60s product intro video with 6 scenes,
upbeat tone, and 16:9 output. Include a CTA at the end.
预期输出:
## 场景分解
1. 开场钩子 (0:00-0:05): 标志 + 标语
2. 问题 (0:05-0:15): 痛点可视化
3. 解决方案 (0:15-0:30): 产品演示
4. 功能 (0:30-0:45): 关键优势(3项)
5. 社会认同 (0:45-0:55): 推荐语/统计数据
6. 行动号召 (0:55-1:00): 行动号召 + 联系方式
## Remotion 结构
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx
提示:
Generate a 45s onboarding walkthrough using screenshots,
with callouts and 9:16 format for mobile.
预期输出:
原因:帧时间不匹配 解决方案:重新计算帧数并对齐时间戳
原因:素材过大或效果复杂 解决方案:压缩素材并简化动画
原因:字体大小不足或对比度不够 解决方案:使用最小 24px 字体和高对比度颜色
## 视频制作报告
### 规格
- 时长: 60s
- 宽高比: 16:9
- 帧率: 30
### 场景规划
| 场景 | 时长 | 视觉 | 音频 | 转场 |
|-------|----------|--------|-------|------------|
| 开场钩子 | 0:00-0:05 | 标志淡入 | 背景音乐开始 | 淡出 |
| ... | ... | ... | ... | ... |
### 素材
- [ ] logo.svg
- [ ] 截图 (3)
- [ ] bgm.mp3
- [ ] narration.mp3
### 渲染检查清单
- [ ] 预览质量保证通过
- [ ] 音频同步已验证
- [ ] 安全区域已检查
- [ ] 最终渲染完成
| 智能体 | 角色 |
|---|---|
| Claude | 场景规划,脚本撰写 |
| Gemini | 素材分析,优化建议 |
| Codex | Remotion 代码生成,渲染执行 |
#video #remotion #animation #storytelling #automation #react
每周安装量
1
代码仓库
GitHub 星标数
3
首次出现
1 天前
安全审计
安装于
mcpjam1
claude-code1
junie1
windsurf1
zencoder1
crush1
A skill for producing programmable videos using Remotion. Generate automated videos from text instructions and produce brand-consistent videos at scale.
video_spec:
audience: [target audience]
goal: [video purpose]
duration: [total length - 30s, 60s, 90s]
aspect_ratio: "16:9" | "1:1" | "9:16"
tone: "fast" | "calm" | "cinematic"
voice:
style: [narration style]
language: [language]
Scene structure template:
## Scene Plan
### Scene 1: Hook (0:00 - 0:05)
- **Visual**: Product logo fade-in
- **Audio**: Upbeat intro
- **Text**: "Transform Your Workflow"
- **Transition**: Fade → Scene 2
### Scene 2: Problem (0:05 - 0:15)
- **Visual**: Problem scenario illustration
- **Audio**: Narration begins
- **Text**: Key message overlay
- **Transition**: Slide left
### Scene 3: Solution (0:15 - 0:30)
...
# Asset checklist
assets/
├── logos/
│ ├── logo-main.svg
│ └── logo-white.svg
├── screenshots/
│ ├── dashboard.png
│ └── feature-1.png
├── audio/
│ ├── bgm.mp3
│ └── narration.mp3
└── fonts/
└── brand-font.woff2
Asset preparation rules :
// 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. Preview render (low quality)
npx remotion preview src/Video.tsx
# 2. QA checks
- [ ] Timing verification
- [ ] Audio sync
- [ ] Text readability
- [ ] Smooth transitions
# 3. Final render
npx remotion render src/Video.tsx ProductIntro out/video.mp4
Prompt :
Create a 60s product intro video with 6 scenes,
upbeat tone, and 16:9 output. Include a CTA at the end.
Expected output :
## 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.tsx
Prompt :
Generate a 45s onboarding walkthrough using screenshots,
with callouts and 9:16 format for mobile.
Expected output :
Cause : Frame timing mismatch Solution : Recalculate frames and align timestamps
Cause : Heavy assets or effects Solution : Compress assets and simplify animations
Cause : Insufficient font size or contrast Solution : Use minimum 24px font and high-contrast colors
## 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 | Scene planning, script writing |
| Gemini | Asset analysis, optimization suggestions |
| Codex | Remotion code generation, render execution |
#video #remotion #animation #storytelling #automation #react
Weekly Installs
1
Repository
GitHub Stars
3
First Seen
1 day ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
mcpjam1
claude-code1
junie1
windsurf1
zencoder1
crush1
GitHub Actions 官方文档查询助手 - 精准解答 CI/CD 工作流问题
45,200 周安装