remotion

Remotion Animation Logic Diagram Skill

Core Workflow

检测环境 → 用户描述 → 匹配现有模板 → 适配/新建 → 注册 → 渲染 GIF → 导出

Core principle: prioritize reusing existing templates; do not create from scratch.

Users do not need to set up an environment or understand code. The Skill comes with a complete runtime environment.

Directory Structure

skills/remotion/
├── SKILL.md              # 本文件
├── package.json           # 依赖配置（已安装）
├── tsconfig.json          # TypeScript 配置
├── node_modules/          # 依赖（已安装）
├── src/
│   └── index.tsx          # 入口文件（注册所有 Composition）
├── 案例库/                 # 现有模板（可直接渲染）
│   ├── 循环流程图/
│   ├── 莫兰迪卡片网格/
│   ├── 可爱流程图/
│   ├── 对比流程图/
│   ├── 技能流程图/
│   ├── 终端流程图/
│   ├── 人物卡片/
│   ├── 时间线/
│   ├── 代码展示/
│   └── 饼图/
├── 脚本库/
│   ├── check-env.sh       # 环境自检
│   └── init-project.sh    # 初始化（已废弃，环境已内置）
└── 设计规范/
    └── 动画设计规范.md

Execution Steps

When the user requests generation of an animation logic diagram, follow these steps:

Step 1: Detect the Remotion Environment

Check whether the skills/remotion/ directory exists:

• Does not exist → Automatically clone the repository into the skills directory, then npm install
• Exists but has no node_modules → Automatically npm install
• Everything is ready → Proceed to the next step

# 检查目录是否存在
ls skills/remotion/package.json

# 如果不存在，克隆仓库
git clone https://github.com/Ceeon/remotion-skill.git skills/remotion
cd skills/remotion && npm install

# 如果存在但无 node_modules
cd skills/remotion && npm install

# 一切就绪，检查环境
bash 脚本库/check-env.sh

Step 2: Understand the User's Requirements

The user will provide any one of the following types of input:

• ASCII sketch: Use text to draw the approximate layout and logic
• Text description: Describe the desired animation in natural language
• Reference case: Specify a template in the case library

Step 3: Match an Existing Template (Priority)

Look at the case library first; do not create from scratch immediately.

1. Browse all subdirectories under 案例库/ and read each template's .tsx file
2. Find the template closest to the user's requirements
3. Determine the match level:
   • High match(same type, only need to change text/colors) → Copy the template and modify the content
   • Medium match(similar type, need to adjust layout/animation) → Adapt based on the template
   • No match(the case library has nothing similar) → Only then create from scratch

案例库现有模板：
├── 循环流程图/     → 循环关系、闭环流程
├── 莫兰迪卡片网格/ → 多卡片并列展示
├── 可爱流程图/     → 轻松风格的步骤图
├── 对比流程图/     → A vs B 对比
├── 技能流程图/     → 技能/能力展示
├── 终端流程图/     → 代码/终端风格
├── 人物卡片/       → 人物介绍
├── 时间线/         → 时间轴
├── 代码展示/       → 代码演示
└── 饼图/           → 数据可视化

Step 4: Generate/Adapt Component Code

Based on template adaptation or creation from scratch, create a new directory under 案例库/ and write the .tsx component file.

Code Standards:

• Canvas size: 800×600 (default)
• fps：30
• Use frame % totalFrames to implement looping
• Animations use spring() spring effects
• Leave a 60-frame static buffer at the end of the animation (to prevent flickering)
• Font:PingFang SC, Microsoft YaHei, sans-serif
• Entrance animation: pop in sequentially, with a 30-40 frame interval between each element

Must import:

import { useCurrentFrame, useVideoConfig, interpolate, AbsoluteFill, spring } from 'remotion';

Step 5: Register the Composition

Add the new component to src/index.tsx：

import { NewComponent } from '../案例库/新组件/NewComponent';

// 在 Root 组件的 <> 内添加：
<Composition
  id="new-component"
  durationInFrames={240}
  fps={30}
  width={800}
  height={600}
  component={NewComponent}
/>

Step 6: Render the GIF

cd /path/to/skills/remotion
npx remotion render src/index.tsx <composition-id> "/目标路径/文件名.gif" --codec=gif --every-nth-frame=2

• --every-nth-frame=2 is equivalent to 15fps, the best balance between file size and smoothness
• The output path is specified by the user (usually the directory where the article is located)

Render an Existing Template

Templates in the case library can be rendered directly without additional operations:

# 查看可用 composition
grep 'id="' src/index.tsx

# 渲染指定模板
npx remotion render src/index.tsx cycle-flowchart /输出路径/循环流程图.gif --codec=gif --every-nth-frame=2
npx remotion render src/index.tsx morandi-grid /输出路径/莫兰迪卡片网格.gif --codec=gif --every-nth-frame=2
npx remotion render src/index.tsx cute-flowchart /输出路径/可爱流程图.gif --codec=gif --every-nth-frame=2

Design Standards Quick Reference

Item	Default Value
Canvas	800×600
fps	30
Background	#fff or #f5f0eb(Morandi)
Entrance interval	30-40 frames/element
Static buffer	60 frames at the end
Spring animation	spring({ damping: 8-12 })
Font	PingFang SC
Node corner radius	50% (circle) or 20px (card)

Trigger conditions

This skill is triggered when the user mentions the following:

• Animated logic diagrams, dynamic illustrations, GIF illustrations
• Remotion rendering
• Turn ASCII into animation
• Render templates, export GIFs