Remotion Bozo - 快速视频创作技能

---

name: remotion-bozo

description: 快速创建 Remotion 视频项目的技能。提供完整的项目模板、动画工具函数、渲染脚本和最佳实践。一键创建专业视频项目。

metadata:

tags: remotion, video, react, animation, template

---

# Remotion Bozo - 快速视频创作技能

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

🎯 适用场景

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

📋 核心功能

1. 项目模板

2. 动画工具集

3. 快速渲染

4. Chrome 复用

🚀 快速开始

创建新项目

# 使用技能创建项目
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. 使用 Sequence 组件管理场景

2. 预计算场景进度避免重复计算

3. 使用 clamp 防止插值超出范围

4. Spring 动画适合缩放和位移

5. Easing 适合淡入淡出效果

🔗 相关资源