remotion-ads by maartenlouis/remotion-ads
npx skills add https://github.com/maartenlouis/remotion-ads --skill remotion-ads使用 Remotion、ElevenLabs 语音旁白和动画字幕创建专业的视频广告和讲解视频。
references/brand-config-template.md → references/brand-config.mdassets/dictionaries/template.pls 创建发音词典有关依赖项和文件夹结构,请参阅 references/setup.md。
| 格式 | 宽高比 | 分辨率 | 时长 | 场景 |
|---|---|---|---|---|
| Instagram Reels | 9:16 | 1080×1920 | 15-60秒 | 4 (Hook→Problem→Solution→CTA) |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| Instagram Reels (Ohneis) | 9:16 | 1080×1920 | 15-45秒 | 节拍驱动 (逐词) |
| 网站讲解视频 | 16:9 | 1920×1080 | 60-160秒 | 6 (Hook→Problem→Context→Solution→Process→CTA) |
| 轮播图 | 4:5 | 1080×1350 | 静态 | 5-10 张幻灯片 |
有关安全区域和裁剪规格,请参阅 references/formats.md。有关节拍驱动的电影感 Reels 模板,请参阅 references/ohneis-style.md。有关 16:9 长视频格式,请参阅 references/website-videos.md。
# 1. 编写场景 JSON
# 2. 生成带词级时间戳的语音旁白
node scripts/generate.js \
--scenes scenes.json \
--with-timestamps \
--dictionary your-brand \
--output-dir public/audio/ad-example/
# 3. 使用 info.json 中的 actualDuration 创建 Remotion 合成
# 4. 渲染
npx remotion render AdExample out/ad-example.mp4 --codec=h264 --crf=18
# 1. 将页面数据提取到场景 JSON
node scripts/url-to-scenes.js --url https://example.com/page --format reels --output scenes.json
# 2. 审查/编辑生成的 scenes.json
# 3. 继续上述语音旁白 + 合成步骤
完整的 URL 到视频工作流程,请参阅 references/url-to-video.md。
┌──────────────────────────┐ 0px
│ 顶部危险区 (285px) │
├──────────────────────────┤
│ ←80px 安全区域 120px→ │
│ 880×1235px │
├──────────────────────────┤
│ 底部危险区 (400px) │
└──────────────────────────┘ 1920px
const SAFE = { top: 285, bottom: 400, left: 80, right: 120 };
const SAFE = { top: 60, bottom: 60, left: 80, right: 80 };
{
"name": "ad-example",
"voice": "VoiceName",
"character": "narrator",
"dictionary": "your-brand",
"scenes": [
{ "id": "scene1", "text": "Hook text.", "duration": 3.5, "character": "dramatic" },
{ "id": "scene2", "text": "Problem.", "duration": 4.5 },
{ "id": "scene3", "text": "Solution.", "duration": 4.0, "character": "expert" },
{ "id": "scene4", "text": "CTA.", "duration": 3.0, "character": "calm" }
]
}
| 角色 | 风格 | 稳定性 | 相似度 | 风格参数 |
|---|---|---|---|---|
dramatic | 强烈,情感丰富 | 0.3 | 0.8 | 0.7 |
narrator | 专业,流畅 | 0.5 | 0.75 | 0.4 |
expert | 权威 | 0.6 | 0.85 | 0.3 |
calm | 舒缓,令人安心 | 0.7 | 0.8 | 0.2 |
conversational | 随意,友好 | 0.45 | 0.7 | 0.5 |
import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
// 从你的 brand-config.md 值中导入
const COLORS = { primary: "#000", accent: "#888", dark: "#111", background: "#fff" };
export const AdTemplate: React.FC = () => {
const { fps } = useVideoConfig();
// 使用 info.json 中的 actualDuration,而非估算值
const DURATIONS = { scene1: 3.42, scene2: 4.35, scene3: 4.12, scene4: 3.31 };
const pad = 5;
return (
<AbsoluteFill>
<Audio src={staticFile("audio/ad-example/ad-example-combined.mp3")} />
<Series>
<Series.Sequence durationInFrames={Math.round(DURATIONS.scene1 * fps) + pad}>
<Scene1Hook />
</Series.Sequence>
{/* ... 剩余场景 */}
</Series>
</AbsoluteFill>
);
};
可复用的场景组件,请参阅 references/components.md。TransitionSeries 音频同步,请参阅 references/voiceover.md。
根据任务按需加载这些文件:
| 文件 | 何时阅读 |
|---|---|
| setup.md | 项目初始化 |
| brand-config-template.md | 配置品牌:颜色、字体、语音、字幕、合规性 |
| formats.md | 尺寸规格、安全区域、裁剪预览 |
| 文件 | 何时阅读 |
|---|---|
| ohneis-style.md | 节拍驱动的电影感 Reels 模板:混合字体排版、硬切、情绪化照片 |
| voiceover.md | ElevenLabs TTS、模型、场景 JSON、时间同步、词典 |
| captions.md | 动画字幕:TikTok 风格、逐词、卡拉 OK |
| animations.md | Spring 配置、过渡、动画组件 |
| components.md | 可复用的场景模板组件 |
| website-videos.md | 16:9 长视频格式,6 场景结构 |
| url-to-video.md | 从现有网页创建视频 |
| 文件 | 何时阅读 |
|---|---|
| sound-effects.md | ElevenLabs 音效生成 |
| music.md | 通过 ElevenLabs 或 Suno 的背景音乐 |
| 文件 | 何时阅读 |
|---|---|
| local-assets.md | 背景图片、图标、插图 |
| carousels.md | 4:5 轮播图设计和批量渲染 |
| 文件 | 何时阅读 |
|---|---|
| ad-copywriting.md | 脚本框架、钩子公式、CTA 模式 |
| copy-frameworks.md | 标题模板、段落公式 |
| natural-transitions.md | 听起来自然的过渡,避免 AI 痕迹 |
| 文件 | 何时阅读 |
|---|---|
| paid-ads.md | Meta 广告系列策略、定向、预算 |
| social-content.md | 内容日历、再利用框架 |
| 脚本 | 用途 |
|---|---|
scripts/generate.js | ElevenLabs 带时间戳的语音旁白、词典、请求拼接 |
scripts/suno-direct.ts | Suno 背景音乐生成 |
scripts/url-to-scenes.js | 将页面内容提取到场景 JSON |
每周安装量
96
仓库
GitHub 星标数
15
首次出现
2026年1月27日
安全审计
安装于
opencode82
codex82
gemini-cli81
cursor78
claude-code77
github-copilot76
Create professional video ads and explainer videos with Remotion, ElevenLabs voiceover, and animated captions.
references/brand-config-template.md → references/brand-config.mdassets/dictionaries/template.plsSee references/setup.md for dependencies and folder structure.
| Format | Aspect | Resolution | Duration | Scenes |
|---|---|---|---|---|
| Instagram Reels | 9:16 | 1080×1920 | 15-60s | 4 (Hook→Problem→Solution→CTA) |
| Instagram Reels (Ohneis) | 9:16 | 1080×1920 | 15-45s | Beat-driven (word-level) |
| Website Explainers | 16:9 | 1920×1080 | 60-160s | 6 (Hook→Problem→Context→Solution→Process→CTA) |
| Carousels | 4:5 | 1080×1350 | Static | 5-10 slides |
See references/formats.md for safe zones and crop specs. See references/ohneis-style.md for beat-driven cinematic reel template. See references/website-videos.md for 16:9 long-form format.
# 1. Write scene JSON
# 2. Generate voiceover with word timestamps
node scripts/generate.js \
--scenes scenes.json \
--with-timestamps \
--dictionary your-brand \
--output-dir public/audio/ad-example/
# 3. Create Remotion composition using actualDuration from info.json
# 4. Render
npx remotion render AdExample out/ad-example.mp4 --codec=h264 --crf=18
# 1. Extract page data into scene JSON
node scripts/url-to-scenes.js --url https://example.com/page --format reels --output scenes.json
# 2. Review/edit the generated scenes.json
# 3. Continue with voiceover + composition as above
See references/url-to-video.md for the full URL-to-video workflow.
┌──────────────────────────┐ 0px
│ TOP DANGER (285px) │
├──────────────────────────┤
│ ←80px SAFE AREA 120px→ │
│ 880×1235px │
├──────────────────────────┤
│ BOTTOM DANGER (400px) │
└──────────────────────────┘ 1920px
const SAFE = { top: 285, bottom: 400, left: 80, right: 120 };
const SAFE = { top: 60, bottom: 60, left: 80, right: 80 };
{
"name": "ad-example",
"voice": "VoiceName",
"character": "narrator",
"dictionary": "your-brand",
"scenes": [
{ "id": "scene1", "text": "Hook text.", "duration": 3.5, "character": "dramatic" },
{ "id": "scene2", "text": "Problem.", "duration": 4.5 },
{ "id": "scene3", "text": "Solution.", "duration": 4.0, "character": "expert" },
{ "id": "scene4", "text": "CTA.", "duration": 3.0, "character": "calm" }
]
}
| Character | Style | Stability | Similarity | Style Param |
|---|---|---|---|---|
dramatic | Intense, emotional | 0.3 | 0.8 | 0.7 |
narrator | Professional, smooth | 0.5 | 0.75 | 0.4 |
expert | Authoritative | 0.6 | 0.85 | 0.3 |
calm | Soothing, reassuring |
import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
// Import from your brand-config.md values
const COLORS = { primary: "#000", accent: "#888", dark: "#111", background: "#fff" };
export const AdTemplate: React.FC = () => {
const { fps } = useVideoConfig();
// Use actualDuration from info.json, not estimated
const DURATIONS = { scene1: 3.42, scene2: 4.35, scene3: 4.12, scene4: 3.31 };
const pad = 5;
return (
<AbsoluteFill>
<Audio src={staticFile("audio/ad-example/ad-example-combined.mp3")} />
<Series>
<Series.Sequence durationInFrames={Math.round(DURATIONS.scene1 * fps) + pad}>
<Scene1Hook />
</Series.Sequence>
{/* ... remaining scenes */}
</Series>
</AbsoluteFill>
);
};
See references/components.md for reusable scene components. See references/voiceover.md for TransitionSeries audio sync.
Load these on demand based on the task:
| File | When to read |
|---|---|
| setup.md | Project initialization |
| brand-config-template.md | Configuring brand: colors, fonts, voice, captions, compliance |
| formats.md | Dimension specs, safe zones, crop previews |
| File | When to read |
|---|---|
| ohneis-style.md | Beat-driven cinematic reel template: mixed-font typography, hard cuts, moody photos |
| voiceover.md | ElevenLabs TTS, models, scene JSON, timing sync, dictionaries |
| captions.md | Animated captions: TikTok-style, word-by-word, karaoke |
| animations.md | Spring configs, transitions, animation components |
| components.md | Reusable scene template components |
| website-videos.md | 16:9 long-form format, 6-scene structure |
| url-to-video.md | Create videos from existing web pages |
| File | When to read |
|---|---|
| sound-effects.md | ElevenLabs SFX generation |
| music.md | Background music via ElevenLabs or Suno |
| File | When to read |
|---|---|
| local-assets.md | Background images, icons, illustrations |
| carousels.md | 4:5 carousel design and batch rendering |
| File | When to read |
|---|---|
| ad-copywriting.md | Script frameworks, hook formulas, CTA patterns |
| copy-frameworks.md | Headline templates, section formulas |
| natural-transitions.md | Human-sounding transitions, AI-tell avoidance |
| File | When to read |
|---|---|
| paid-ads.md | Meta campaign strategy, targeting, budgets |
| social-content.md | Content calendar, repurposing framework |
| Script | Purpose |
|---|---|
scripts/generate.js | ElevenLabs voiceover with timestamps, dictionaries, request stitching |
scripts/suno-direct.ts | Suno background music generation |
scripts/url-to-scenes.js | Extract page content into scene JSON |
Weekly Installs
96
Repository
GitHub Stars
15
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode82
codex82
gemini-cli81
cursor78
claude-code77
github-copilot76
Skills CLI 使用指南:AI Agent 技能包管理器安装与管理教程
44,900 周安装
zeroize-audit 安全审计工具:检测敏感数据归零漏洞与编译器优化风险
914 周安装
App Store Connect CLI 崩溃排查工具:快速分析 TestFlight 崩溃报告与性能诊断
940 周安装
Uniwind:将Tailwind CSS v4引入React Native的样式解决方案
958 周安装
Autoresearch:自主实验循环工具,自动化代码优化与性能改进
1,000 周安装
Sentry问题修复技能:利用AI自动调试与修复生产环境错误
996 周安装
Obsidian CLI 命令行工具:自动化知识库管理与笔记搜索,提升 Obsidian 生产力
1,000 周安装
| 0.7 |
| 0.8 |
| 0.2 |
conversational | Casual, friendly | 0.45 | 0.7 | 0.5 |