remotion-bozo

一个完整的 Remotion 视频项目模板和创作工具集，让你快速创建专业视频。需要先安装好remotion-best-practices与remotion-video-toolkit这两个skill。并且有安装playwright。

🎯 适用场景

当你需要以下任务时使用此技能：

1. 创建新的 Remotion 视频项目
2. 快速搭建视频开发环境
3. 使用预定义的动画工具函数
4. 一键渲染 MP4 视频
5. 复用 chrome-headless-shell（避免重复下载）

📋 核心功能

1. 项目模板

1. 完整的 TypeScript + Remotion 配置
2. 预配置的 package.json 脚本
3. 优化的项目结构

2. 动画工具集

1. Spring 动画配置
2. Easing 缓动函数
3. 场景进度计算
4. 贝塞尔曲线预设

3. 快速渲染

1. CLI 渲染命令
2. Lambda 云端渲染支持
3. 多种输出格式

4. Chrome 复用

1. 自动检测现有 chrome-headless-shell
2. 避免重复下载

🚀 快速开始

创建新项目

# 使用技能创建项目
remotion-bozo create my-video

# 进入项目目录
cd my-video

# 预览视频
npm start

# 渲染视频
npm run render

📁 项目结构

my-video/
├── src/
│   ├── index.tsx              # 入口文件
│   └── VideoTemplate.tsx      # 视频组件模板
├── out/                       # 输出目录
├── package.json
├── tsconfig.json
└── README.md

🎨 动画工具函数

Spring 动画

import {spring} from 'remotion';

const scale = spring({
  frame: progress * 30,
  fps: 30,
  config: {
    damping: 12,
    stiffness: 80,
    mass: 1
  }
});

Easing 缓动

import {interpolate, Easing} from 'remotion';

const opacity = interpolate(progress, [0, 0.3], [0, 1], {
  easing: Easing.inOut(Easing.cubic)
});

贝塞尔曲线

const bouncy = Easing.bezier(0.68, -0.55, 0.265, 1.55);

🔧 Chrome Headless Shell 复用

技能会自动检测并复用现有的 chrome-headless-shell：

1. Playwright 版本: ~/Library/Caches/ms-playwright/chromium_headless_shell-*/chrome-headless-shell-mac-arm64
2. Remotion 版本: node_modules/.remotion/chrome-headless-shell/

设置环境变量强制使用指定版本：

# 在 .zshrc 中添加
export REMOTION_BROWSER_EXECUTABLE="/path/to/chrome-headless-shell"

📦 可用命令

| 命令 | 说明 | |------|------| | create <project-name> | 创建新项目 | | render | 渲染当前项目 | | preview | 预览视频 | | lambda | 配置 Lambda 渲染 |

🎬 视频参数

1. 默认分辨率: 1920 x 1080 (Full HD)
2. 默认帧率: 30 fps
3. 默认编码: H.264
4. 支持格式: MP4, WebM, GIF

📚 相关规则

1. [rules/project-template.md](rules/project-template.md) - 项目模板说明
2. [rules/animation-tools.md](rules/animation-tools.md) - 动画工具函数
3. [rules/rendering.md](rules/rendering.md) - 渲染配置
4. [rules/chrome-reuse.md](rules/chrome-reuse.md) - Chrome 复用配置

🌟 最佳实践

1. 使用 Sequence 组件管理场景
2. 预计算场景进度避免重复计算
3. 使用 clamp 防止插值超出范围
4. Spring 动画适合缩放和位移
5. Easing 适合淡入淡出效果

🔗 相关资源

1. [Remotion 官方文档](https://www.remotion.dev/docs)
2. [remotion-best-practices](../remotion-best-practices)
3. [remotion-video-toolkit](../remotion-video-toolkit)