URL to Video Generator — URL 到视频生成器

网站到视频生成器 将任何网站转换为60秒的宣传视频，包含动画、中文旁白、字幕和免费的BGM。

何时使用 用户提供网站URL并想要创建视频 从网页内容创建品牌/宣传视频 需要包含旁白的科技风格动画视频 任何包含“网站生成视频”、“promo video”、“宣传视频”或“Remotion video from URL”的请求

工作流程

步骤1：提取网站内容 # 提取网站内容 python3 /root/.openclaw/workspace/scripts/smart_search.py "site:example.com" --max-results 5 或者使用web_fetch工具获取首页内容。 提取： 品牌名称 标语/口号 核心服务/产品（3-5项） 关键统计数据（用户、项目、语言等） 目标受众 CTA（调用行动）

步骤2：提取品牌颜色 curl -sL https://example.com | grep -oE '(#[0-9a-fA-F]{3,8}|rgb\([^)]+\))' | sort | uniq -c | sort -rn | head -10 识别： 主色：最频繁的十六进制颜色（CTA按钮、突出显示） 背景色：通常为暗色主题，如#1a1a2e或#0a0a0f 次要/强调色：第二最频繁的颜色 文本颜色：白色#fff或浅灰色

步骤3：创建Remotion项目 mkdir -p remotion-{brand}-promo/{src,audio,out} cd remotion-{brand}-promo npm init -y npm install remotion @remotion/cli react react-dom npm install -D typescript @types/react 创建文件： src/index.tsx - 组合注册 src/{Brand}Promo.tsx - 主视频组件 remotion.config.ts - 配置 audio/narration.txt - TTS脚本

步骤4：编写旁白脚本 创建audio/narration.txt文件，包含5个部分（每个12秒，总计60秒）： 第1部分：[品牌]介绍 + 标语 第2部分：愿景/核心价值主张 第3部分：关键服务/产品（3项） 第4部分：信任信号/统计数据 第5部分：CTA + 网站URL

步骤5：生成TTS音频 使用tts工具为每个部分生成中文旁白。然后连接： # 如果有多个TTS文件 ffmpeg -i "concat:audio/part1.mp3|audio/part2.mp3|audio/part3.mp3|audio/part4.mp3|audio/part5.mp3" -acodec copy audio/narration.mp3

步骤6：下载免费BGM 从Pixabay获取免费的科技风格背景音乐： cd audio curl -L -o bgm.mp3 "https://cdn.pixabay.com/download/audio/2022/05/27/audio_1808fbf07a.mp3?filename=electronic-future-beats-117998.mp3" -H "User-Agent: Mozilla/5.0" 音量：0.15（非常微妙，不要盖过旁白）

步骤7：构建React动画组件 遵循以下设计规则： A. 安全区域布局 const SAFE_AREA = { subtitleHeight: 60, subtitleBottom: 8, }; 核心内容：paddingBottom: 80（保持在字幕区域上方） 字幕：bottom: 8，font-size 22px 永远不要让内容覆盖字幕区域

B. 字幕组件 const Subtitle = ({ text, active }: { text: string; active: boolean }) => { const frame = useCurrentFrame(); const opacity = active ? interpolate(frame, [0, 8], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }) : interpolate(frame, [0, 8], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); return (

C. 使用SVG矢量图标（不是emoji） 创建SVG图标组件内联： const IconRocket = ({ size = 40, color = COLORS.primary }) => ( ); 所需图标：Eye、Rocket、Book、Target、Wrench、Palette、Monitor、Globe、Arrow

D. 装饰形状 添加旋转几何装饰： const DecoShapes = () => { const frame = useCurrentFrame(); return ( <>

E. 闪电数字动画 数字必须在0.5秒内完成（12帧@24fps）： const studentCount = Math.floor(interpolate(frame, [0, 12], [0, 1200], { extrapolateRight: 'clamp' }));

F. 5场景结构 场景 时间 内容 1 0-12s Logo + 品牌 + 标语 2 12-24s 愿景（之前 → 之后比较） 3 24-36s 3个核心服务，带图标 4 36-48s 统计数据，带闪电数字 + 标签 5 48-60s CTA按钮 + 网站URL 每个场景：durationInFrames={288}（12秒@24fps）