mcpField
R
remotion

remotion

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

关于 remotion

面向 Remotion 视频项目的工具包专用技能，供创作者通过可复用组件和自定义场景转场扩展模板，并提供工具包约定与计时实践。

主要功能

  1. 01可复用的视频组件
  2. 02自定义场景转场库
  3. 03转场示例与时长指南
  4. 0430fps 项目计时约定
  5. 05由旁白驱动场景计时

适用场景

  1. 01为模板添加可复用背景与叠加元素
  2. 02选择视频场景之间的转场效果
  3. 03设置标题、演示和片尾场景时长

安装

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

$npx skills add https://github.com/digitalsamba/claude-code-video-toolkit --skill remotion

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

附带文件reference.md

详细介绍

Remotion — 工具包扩展

Remotion 核心知识位于 .claude/skills/remotion-official/（从官方 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、blurAmountCTA、高能时刻、强调效果
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

工具包约定

以下是此工具包特有的选择。有关 Remotion 通用最佳实践（插值钳制、useVideoConfig、delayRender、staticFile、不使用 CSS 动画），请参阅 remotion-official 技能。

  1. 所有项目均使用 30fps — 计时方式：帧数 = 秒数 × 30
  2. playbackRate 必须保持恒定 — 对于可变/极端速度，请使用 FFmpeg 预处理
  3. 视频/音频组件 — 模板使用 Remotion 中的 <OffthreadVideo> 和 <Audio>。上游现在也记录了 @remotion/media 中的 <Video>/<Audio>（较新版本，包含 trim 属性和音高变换）。两者均可正确渲染；扩展现有模板时，优先沿用工具包的选择以保持一致。

项目计时约定

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

**节奏：**配音约为每分钟 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