mcpField
C
cinematic-camera

cinematic-camera

github.com/liamrjohnston创意与媒体1411.2k 次安装14 周前更新
代码仓库

关于 cinematic-camera

cinematic-camera 是用于 Remotion 动态视频创作的技能，适合需要连贯空间与共享镜头运动的创作者。它要求先确认画幅和背景、检查已批准的参考作品，并以镜头移动呈现动作因果。

主要功能

  1. 01规划共享空间中的镜头移动
  2. 02要求确认画幅与背景
  3. 03检查已批准作品及真实素材
  4. 04以停留和移动编排动作
  5. 05用静帧与成片进行质量检查

适用场景

  1. 01制作 Instagram 插入视频或全屏视频
  2. 02让镜头在相连的界面元素间移动
  3. 03依据项目既有视觉参考延续视频风格

安装

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

$npx skills add https://github.com/liamrjohnston/remotion-motion-graphics-skill --skill cinematic-camera

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

详细介绍

电影感摄像机

与 remotion-best-practices 和 motion-graphics 配合使用。构建一个连贯的世界，让共享摄像机在其中移动，而不是将彼此孤立的面板弹出到虚空中。

必须完成的前置确认

规划或编写代码前，先遵循 motion-graphics 的前置确认流程。如果缺少相关信息，请询问：

你想要哪种格式：4:3 的 Instagram 半屏插入画面，还是 9:16 的 Instagram 全屏画面？背景想选哪种：暖色浅色、纯净深色、浅色网格，还是深色网格？

不要擅自默认使用 9:16 或深色背景。如果用户让你决定，请使用暖色浅色背景。

绝对禁止的视觉效果

此技能绝不引入霓虹、辉光、泛光、发光边缘、彩色阴影、渐变光球、径向色彩晕染、青紫渐变、玻璃拟态或赛博朋克灯光。摄像机运动不能把克制的场景变成凭感觉编码的 AI 演示。产品强调色应保持纯色且克制。

必须完成的已批准参考检查

规划或编写代码前，必须完成以下步骤：

  1. 检查与同一项目、产品、宽高比、画面位置或视觉机制相关的最新 3–5 个已批准渲染版本。
  2. 打开源合成，检查摄像机关键帧、时序、间距、字体、颜色、画面密度、入场、退场和结尾停留。
  3. 检查实际片段或代表性帧；仅查看文件名并不足够。
  4. 清点真实素材：徽标、吉祥物、截图、录屏、视频素材和先前输出。
  5. 编写简短的节拍图，说明片段如何延续已批准的视觉体系。
  6. 如果没有项目参考，请使用固定的备用方案：暖色米白的实体／编辑风格世界、深色墨色、低饱和中性色、一种克制的纯色品牌强调色、中性阴影，且不添加任何装饰效果。

参考优先级：同一视频 → 同一产品／系列 → 同一宽高比／用途 → 仓库中的其他已批准示例 → 固定备用方案。

规范示例库：https://github.com/Liamrjohnston/remotion-motion-graphics-skill

近期已批准作品是基准，而非可选灵感。不要为了追求新奇而另创一种美学风格。

核心思路

构建一个大于视口的世界。先近距离呈现一个正在发生的动作，在动作完成时保持画面，再展示上下文，然后移动到对比／亮点所在的位置，最后稳定画面。

可以使用面板，但它们必须属于同一个世界，并具有有意义的空间关系。避免让彼此孤立的卡片独立出现在空旷空间中。

摄像机机架

使用一条共享关键帧时间轴控制焦点和缩放：

const ease = Easing.inOut(Easing.cubic);
const KEY_T = [0, 46, 62, 78, 96, 132, 174, TOTAL_FRAMES];

const fx = interpolate(frame, KEY_T, [/* focal x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* focal y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* zoom */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

<AbsoluteFill style={{backgroundColor: BG}}>
  <div
    style={{
      position: 'absolute',
      transform: `translate(${VIEW_W / 2 - fx}px, ${VIEW_H / 2 - fy}px) scale(${z})`,
      transformOrigin: `${fx}px ${fy}px`,
    }}
  >
    {/* Entire scene in world coordinates */}
  </div>
</AbsoluteFill>
  • 尺寸应来自已确认的格式，绝不能使用隐藏的默认值。
  • 世界宽度通常是视口宽度的 2–2.5 倍。
  • 重复相邻关键帧可形成停留。
  • 摄像机通常移动 14–24 帧。
  • 结尾使用两个几乎相同的关键帧，让编辑器中的画面保持稳定。
  • 摄像机、光标、效果和关联对象必须处于同一坐标系中。

动作编排

  1. 以一个已经在运动的对象开场，并近距离呈现。
  2. 在主要动作完成时保持画面。
  3. 展示其所属的更大系统。
  4. 移动到对比／亮点所在的位置。
  5. 拉远画面，同时让辅助对象按交错顺序完成动作。
  6. 稳定画面，以便干净利落地切镜。

规则：

  • 摄像机移动到下一个动作所在的位置；动作在停留期间完成。
  • 每个节拍只安排一个主要动作。
  • 仅在需要展示状态时使用微动效：打字、滴答、勾选、播放、进度变化、光标移动。
  • 优先采用连续变形，而不是替换场景。
  • 优先平滑移动，而不是急促甩镜。
  • 动效应解释因果关系，绝不能用来弥补创意薄弱。

真实性与文本

  • 有真实徽标、视频素材、截图、录屏、界面和已核实数据时，应优先使用。
  • 绝不能用通用彩色方块、伪造标记、虚构界面或虚假指标替代真实内容。
  • 允许使用产品名称、文件名、计数器、命令、进度和真实界面文本。
  • 不要重复旁白中的句子，也不要因为画面显得空就添加说明性徽章。

首轮拒绝门槛

只有当所有答案都是“否”时，才显示渲染结果：

  1. 格式或背景是否尚未确认？
  2. 是否存在霓虹、辉光、彩色灯光、渐变晕染、玻璃面板，或带有 AI 氛围编码风格的处理？
  3. 场景是否是在虚空中摆放的一组互不相关的通用卡片？
  4. 是否使用了暗色风格，而用户并未选择暗色，且没有获批的参考要求使用暗色？
  5. 摄影机运动是否只是装饰，而非引导因果关系？
  6. 是否缺少可用的真实素材？
  7. 关键元素在选定的 Instagram 展示位置是否难以辨认？
  8. 结果是否未能匹配获批参考的间距、密度、材质和运动节奏？

请在内部反复修改，直到通过门槛。

QA 与交付

  1. 为开场、每个摄影机目的地、转场、效果呈现和结尾停留帧渲染静帧。
  2. 将画面与获批参考并排对比，检查构图、密度、视觉识别、材质克制程度和精致度。
  3. 确认真实素材仍清晰可辨。
  4. 确认采用“停留 → 移动 → 停留”的节奏，且移动过程中没有隐藏任何动作。
  5. 检查完整 MP4，确认不存在空洞的移动、裁切、停滞帧、通用填充内容、霓虹／辉光和无力的结尾停留帧。
  6. 只有在呈现效果与同一套获批视觉系统一致时才交付。

技术限制

  • 使用 useCurrentFrame()、spring() 和 interpolate() 驱动运动；不要使用 CSS 动画。
  • interpolate() 的输入范围必须严格递增。
  • 场景复杂度保持适中；大型模糊／阴影图层开销很大，且通常违反视觉规则。
  • 递增数据使用等宽数字。

评论

支持 Markdown