mcpField
R
remotion

remotion

github.com/calesthio创意与媒体73.0k1.2k 次安装1 天前更新
代码仓库

关于 remotion

remotion 是面向 Remotion 视频项目的工具包扩展技能，供使用 React 组件制作视频的开发者参考。它提供可复用组件、自定义转场及渲染实践规范。

主要功能

  1. 01复用视频组件
  2. 02提供自定义场景转场
  3. 03转场效果参数配置
  4. 04帧动画与渲染实践
  5. 05转场展示图库

适用场景

  1. 01为视频场景添加转场效果
  2. 02在多个模板间复用视觉组件
  3. 03按帧设计动画与场景时长
  4. 04通过图库预览转场效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/calesthio/openmontage --skill remotion

安装后在 Claude Code 中输入/remotion确认已加载。

附带文件reference.md

详细介绍

Remotion — 工具包扩展

.claude/skills/remotion-official/ 中包含 Remotion 核心知识（与官方 remotion-dev/skills 仓库同步）。本文件仅介绍 工具包特有的模式。

共享组件

lib/components/ 中的可复用视频组件。在模板中通过以下方式导入：

import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components';
组件用途
AnimatedBackground漂浮图形背景（变体：subtle、tech、warm、dark）
SlideTransition场景转场（fade、zoom、slide-up、blur-fade）
Label带可选 JIRA 参考信息的悬浮标签徽章
Vignette电影感边缘暗化叠层
LogoWatermark角落品牌标识
SplitScreen并排视频对比
NarratorPiP画中画演示者叠层
Envelope带开启动画的 3D 信封
PointingHand带滑入和脉冲效果的动态手部表情符号
MazeDecoration角落用的动态等距网格装饰

自定义转场

工具包在 lib/transitions/ 中包含一个转场库，可实现超出官方 @remotion/transitions 包范围的场景间效果。

使用 TransitionSeries
import { TransitionSeries, linearTiming } from '@remotion/transitions';
// Import custom transitions from lib (adjust path based on your project location)
import { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions';
// Or import from @remotion/transitions for official ones
import { slide, fade } from '@remotion/transitions/slide';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <TitleSlide />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={glitch({ intensity: 0.8 })}
    timing={linearTiming({ durationInFrames: 30 })}
  />
  <TransitionSeries.Sequence durationInFrames={120}>
    <ContentSlide />
  </TransitionSeries.Sequence>
</TransitionSeries>
可用的自定义转场
转场选项适用场景
glitch()intensity、slices、rgbShift技术演示、前卫揭示、赛博朋克
rgbSplit()direction、displacement现代科技、充满活力的转场
zoomBlur()direction、blurAmount行动号召、高能时刻、强调冲击力
lightLeak()temperature、direction庆祝场景、胶片美学、温暖时刻
clockWipe()startAngle、direction、segments时间相关内容、趣味揭示
pixelate()maxBlockSize、gridSize、scanlines、glitchArtifacts、randomness复古/游戏、数字化变换
checkerboard()gridSize、pattern、stagger、squareAnimation趣味揭示、结构化转场

棋盘格模式： sequential、random、diagonal、alternating、spiral、rows、columns、center-out、corners-in

转场示例
// Tech/cyberpunk feel
glitch({ intensity: 0.8, slices: 8, rgbShift: true })

// Warm celebration
lightLeak({ temperature: 'warm', direction: 'right' })

// High energy zoom
zoomBlur({ direction: 'in', blurAmount: 20 })

// Chromatic aberration
rgbSplit({ direction: 'diagonal', displacement: 30 })

// Clock sweep reveal
clockWipe({ direction: 'clockwise', startAngle: 0 })

// Retro pixelation
pixelate({ maxBlockSize: 50, glitchArtifacts: true })

// Checkerboard patterns
checkerboard({ pattern: 'diagonal', gridSize: 8 })
checkerboard({ pattern: 'spiral', gridSize: 10 })
checkerboard({ pattern: 'center-out', squareAnimation: 'scale' })
转场时长指南
类型帧数说明
快速切换15-20快速、有力
标准30-45最常见
戏剧性50-60缓慢揭示
故障效果20-30应有突兀感
漏光45-60需要时间扫过画面
预览转场

运行展示图库以查看所有转场：

cd showcase/transitions && npm run studio

工具包最佳实践

  1. 仅使用基于帧的动画 — 避免 CSS 转场/动画；它们会导致渲染时闪烁
  2. 使用 useVideoConfig() 中的 fps — 使动画不受帧率影响
  3. 限制插值范围 — 使用 extrapolateRight: 'clamp' 防止数值失控
  4. 使用 OffthreadVideo — 对复杂合成而言，性能优于 <Video>
  5. 异步操作使用 delayRender — 始终阻止渲染，直到数据就绪
  6. 资源使用 staticFile — 正确引用 public/ 文件夹中的文件
  7. 所有项目均使用 30fps — 时间换算：帧数 = 秒数 × 30
  8. playbackRate 必须保持恒定 — 对于可变/极端速度，请使用 FFmpeg 预处理

项目时间约定

场景类型时长说明
标题3-5s（90-150f）Logo + 标题
概览10-20s3-5 个要点
演示10-30s调整 playbackRate 以适应时长
数据8-12s3-4 张数据卡片
片尾5-10s快速淡出

节奏： 配音约为 150 字/分钟。时长由配音决定。

高级 API

有关所有钩子、组件、渲染器、Lambda 和 Player API 的详细 API 文档，请参阅 reference.md。

许可证说明

Remotion 使用特殊许可证。企业进行商业用途时可能需要获取许可证。请查看 https://remotion.dev/license

反馈与贡献

如果此技能缺少信息或可以改进：

  • 缺少某种模式？ 描述你需要的内容
  • 发现错误？ 告诉我哪里有问题
  • 想要贡献？ 我可以帮你：
    1. 更新此技能，加入改进内容
    2. 创建 PR，提交到 github.com/digitalsamba/claude-code-video-toolkit

只需说“改进此技能”，我就会引导你更新 .claude/skills/remotion/SKILL.md。

评论

支持 Markdown