---

name: Remotion Video Skill description: 基于 Remotion 的动画演示视频创作技能，提供丰富的动画组件和视频模板。By ModelWise team. version: 1.0.0 tags:

• video
• animation
• remotion
• react author: ModelWise team

---

Remotion Video Skill

By ModelWise team - Professional AI Agent Solutions

基于 Remotion 的动画演示视频制作技能。

功能特性

基础动画组件

• FadeIn/FadeOut - 淡入淡出动画
• SlideIn - 滑动入场动画（支持四个方向）
• ScaleIn - 缩放入场动画（支持 spring 效果）
• Typewriter - 打字机文字效果
• WordHighlight - 文字高亮动画

场景过渡效果

• TransitionScene - 封装 @remotion/transitions
• 支持 fade、slide、wipe 等过渡效果

视频模板

• ProductDemo - 产品演示模板
• TitleSequence - 标题动画模板
• DataVisualization - 数据展示模板

视频配置预设

• landscape: 1920x1080 (16:9 横屏)
• portrait: 1080x1920 (9:16 竖屏)
• square: 1080x1080 (1:1 正方形)

使用方法

1. 安装依赖

npm install

2. 启动开发服务器

npm run studio

3. 渲染视频

npx remotion render HelloDemo out/demo.mp4

项目结构

remotion-video-skill/
├── package.json           # 项目依赖
├── tsconfig.json          # TypeScript 配置
├── remotion.config.ts     # Remotion 配置
├── SKILL.md               # 技能说明文档
├── task.md                # 任务进度记录
└── src/
    ├── Root.tsx           # 入口文件
    ├── components/        # 可复用动画组件
    ├── compositions/      # 视频组合/模板
    └── utils/             # 工具函数

开发指南

创建新的动画组件

在 src/components/ 目录下创建新的组件文件。

创建新的视频模板

1. 在 src/compositions/ 创建模板文件
2. 在 src/Root.tsx 中注册新的 Composition

使用动画预设

import { springPresets, easingPresets } from "./utils/animations";

技术栈

• React 18
• Remotion 4.x
• TypeScript 5.x
• @remotion/transitions