Remotion 视频生成器 “使用 React 和 Remotion 编程方式创建专业的运动图形视频。”

版权与参考 原始技能来源：Superskills - 视频生成器（Remotion） 作者：Riley Brown / VibeCode 社区 修改：Firecrawl 被替换为 Scrapling 用于品牌数据提取 使用 Python Scrapling 库代替 Firecrawl API 为 Remotion v4 API 添加了全面的故障排除 核心技术 Remotion：https://www.remotion.dev/ Scrapling：https://github.com/D4Vinci/Scrapling React：https://react.dev/ 测试结果 OpenClaw 推广视频 - 成功渲染！

快速使用指南（步骤指南） 步骤 1：抓取品牌数据 # 运行 Scrapling 脚本以获取品牌颜色、标志、标语 bash skills/remotion-video-generator/scripts/scrapling.sh "https://brand-website.com" 这将提取：brandName、tagline、logoUrl、faviconUrl、primaryColors、ogImageUrl、screenshotUrl

步骤 2：下载品牌资产 mkdir -p public/images/brand curl -sL "https://brand.com/logo.svg" -o public/images/brand/logo.svg curl -sL "https://brand.com/og-image.png" -o public/images/brand/og-image.png curl -sL "https://image.thum.io/get/width/1200/crop/800/https://brand.com" -o screenshot.png

步骤 3：创建项目结构 mkdir -p my-video/src my-video/public/images/brand my-video/public/audio

步骤 4：创建 package.json { "name": "my-video", "scripts": { "dev": "npx remotion studio", "build": "npx remotion bundle" }, "dependencies": { "@remotion/cli": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "remotion": "^4.0.0", "lucide-react": "^0.300.0" } }

步骤 5：安装依赖项 cd my-video && npm install

步骤 6：创建视频组件 创建 src/MyVideo.tsx 文件： 使用 AbsoluteFill 进行全屏布局 使用 Sequence 组件进行场景定时 使用 useCurrentFrame、useVideoConfig、interpolate、spring 进行动画

步骤 7：创建入口点（Remotion v4 API） 创建 src/index.tsx 文件 - 必须使用 .tsx 扩展名： 导入 { registerRoot, Composition } from "remotion"; 导入 { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion"; const MyVideo = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // 动画 - 总是传递 fps 到 spring() const scale = spring({ frame, fps, from: 0.8, to: 1 }); return (

Hello World

重要的 Remotion v4 规则： 使用 .tsx 扩展名（而不是 .ts）用于包含 JSX 的文件 必须使用 registerRoot + Composition API 总是传递 fps 到 spring()：spring({ frame, fps, from: 0.8, to: 1 }) 使用 useVideoConfig() 获取 fps：const { fps } = useVideoConfig() 使用组合名称渲染：npx remotion render MyVideo out/video.mp4

步骤 8：启动开发服务器 cd my-video && npm run dev 服务器运行在 http://localhost:3000

步骤 9：预览和迭代 在浏览器中预览 编辑源文件 - 自动热重载 用户查看和请求更改

步骤 10：渲染最终视频（当用户要求时） npx remotion render index out/final-video.mp4

版权 原始技能：https://superskills.vibecode.run/ 修改：Firecrawl 被替换为 Scrapling 用于品牌数据提取 Remotion：https://www.remotion.dev/

安装 # 全局安装 Remotion npm install -g remotion # 安装视频项目依赖项 npm install lucide-react # 安装 Scrapling（已经在工作空间技能中） pip install scrapling

代理指令 何时使用视频生成器 使用此技能时： 创建推广视频 制作产品演示 社交媒体视频内容 动画解释器 商业广告 任何程序化视频内容 不要用于： 简单幻灯片（使用其他工具） 现有视频的视频编辑 直播

默认工作流（始终遵循此流程） 抓取品牌数据（如果以产品为特色）使用 Scrapling（而不是 Firecrawl） 在 output// 中创建项目 使用适当的运动图形构建所有场景 使用 npm install 安装依赖项 修复 package.json 脚本以使用 npx remotion（而不是 bun）： "scripts": { "dev": "npx remotion studio", "build": "npx remotion bundle" } 启动 Remotion Studio 作为后台进程： cd output/ && npm run dev 通过 Cloudflare 隧道公开： bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 将公共 URL 发送给用户（例如 https://xxx.trycloudflare.com） 用户将在浏览器中预览、请求更改，您可以编辑源文件。Remotion 自动热重载。 渲染（仅当用户明确要求导出时） cd output/ npx remotion render CompositionName out/video.mp4

快速开始 # 创建项目 cd output/