Communitygithub.com

ronnnerr/norstack

程序化 React 视频。用于 Remotion 叠加层、动态图形,或渲染为 mp4 的 React 合成。仅生成动态部分,素材保留视频和竖屏模式。

norstack 是什么?

该技能专为使用 React 和 Remotion 的程序化视频生成而设计。它智能地将生成的动态图形(例如叠加层、动画)与静态视频素材分开,确保焦点集中在 React 驱动的运动上,同时保持素材的完整性。该技能强制实施严格的项目结构,要求所有动画项目都位于指定的 `videos_dir/edit/animations/slot_<id>/` 目录中,并输出 `render.mp4` 文件。它强制实施最佳实践,如使用 `durationInFrames` 作为时间基准、利用 `interpolate` 和 `spring` 函数实现流畅动画、对每个构图使用 `Sequence` 和 `AbsoluteFill` 组件,以及预加载字体和音频以防止渲染失败。此外,该技能还在渲染后执行 `ffprobe` 检查,以验证输出质量,并应用专业的视频编辑规则,如 PTS 偏移和音频淡入淡出。它支持透明叠加层(ProRes 4444 或 WebM 带 Alpha)和分层的色彩方案管理,使其成为在 Remotion 生态系统中构建令人惊叹的动态视频的理想选择。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ronnnerr/norstack/tree/HEAD/skills/remotion

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

remotion

素材 → video / portrait。这仅用于 React 中生成的动态。

插槽

绝不放在仓库根目录。必须位于:

<videos_dir>/edit/animations/slot_<id>/

在那里搭建脚手架。渲染为 render.mp4。将 EDL 叠加层指向该文件。

法则

  • durationInFrames 是真理。不要在 CSS 中猜测秒数。
  • interpolate / spring。不要用线性动画。不要用布局动画(top/left/width)。
  • Sequence + AbsoluteFill。每个构图一个想法。
  • 预加载字体和音频。缺少字体会导致重新渲染。
  • fps 与父级匹配(24 用于电影,30 用于社交),除非你另有说明。
  • 透明叠加层 → ProRes 4444 或带 Alpha 的 WebM。选择前确认。

渲染后

ffprobe render.mp4
# 然后检查 / 查看输出帧

硬性视频规则仍然适用:叠加层 PTS 偏移,字幕最后处理,父级裁剪处添加 30ms 音频淡入淡出。

配色

调色板来自 profile 和 taste。每个项目都有自己的调色板。不要残留橙色的发布视频工具包。

不要在插槽智能体内提问。选择最明显的选项并渲染。

相关技能