remotion-motion-graphics

用途

该技能用于在 Remotion 中制作一段短小、设计主导的动态图形：动态即信息，内容通常是「一句话、一个数字、一个 Logo」。构成元素来自 snapcn——一套 Remotion 组件，涵盖动态字体（kinetic type）、Logo 声效、统计数字与画廊等，通过 shadcn CLI 安装，并以「归你所有的代码」形式落入项目。

主要能力

分类路由：先为作品选择一个类别，类别决定所用组件。
- 动态字体（如「动画化这行字」、标题卡、引言、宣言）：text-reveal(90帧)、type-morph(94)、punch-lines(144)、text-swell(110)、text-build(75)、word-gather(49)、word-flip(180)、text-rewrite(102)、orb-swarm(160)。
- 统计数字（一个主数字，「我们达到 500 个团队」）：count-grid(47)。
- Logo 声效 / 品牌揭示（片头、片尾、Logo 动画）：logo-flicker(100)、logo-assemble(108)、logo-collapse(52)、block-wordmark(150)、wordmark-cut(66)。
- 发布标题（「Introducing X」）：announce-title(170)。
- 社交证明 / 叠加层（关注者、团队聊天、「人们正在讨论」）：follower-rush(300)、channel-thread(110)。
- 图片开场（作品集、情绪板、画廊）：orbit-gallery(300)、moodboard-reveal(150)、card-rail(108)、reel-collage(96)。
- 字幕（为口播视频烧录字幕）：word-captions(96)、karaoke-captions(150)。
动态字体选型指南：text-reveal 适合单个标题的英雄式入场（最常用，不确定时从此开始）；type-morph 适合「先说一件事，再变形成结局」；punch-lines 适合一连串全屏陈述硬切（脚本语法：| 开新卡，/ 开新行）；text-swell 适合需要向前停留的承诺或价格；text-rewrite 适合以「修正」为节拍（在镜头前被编辑的一行字）。若无 snapcn 组件适配（图表、地图、推文或新闻卡），技能会明确说明，并用 Remotion 的 interpolate() 与 spring() 手工补足，同时仍用 snapcn 处理周边文字。

使用方式

分类作品：选定一个类别，据此确定组件。
收集真实素材：逐字准确的文案（动态图形会放大错别字）；真实 Logo（SVG 或透明 PNG）与品牌色（绝不重绘 Logo）；真实数字及其来源（绝不杜撰指标）。
安装与构建：例如 npx shadcn@latest add @snapcn/text-reveal @snapcn/punch-lines @snapcn/logo-flicker 一个约 9 秒的片段：一行字、一串陈述、一个 Logo 声效，用硬切连接。示例代码可见于资料，其中使用 Series、Series.Sequence，并以 durationInFrames={334}、fps={30}、width={1280}、height={720} 注册。务必传入自己的 logoSrc（放在 public/ 中的 Logo）；否则 logo-flicker 会显示 snapcn 标记。
证明帧校验：渲染整片前先出三张静帧——开场状态、标志性动作、最终停留。例如 npx remotion still MotionGraphic out/open.png --frame=10 npx remotion still MotionGraphic out/move.png --frame=150 npx remotion still MotionGraphic out/hold.png --frame=330 npx remotion render MotionGraphic out/motion.mp4 --codec=h264 --crf=18 检查文字在目标尺寸下清晰可读、无裁切、最后一帧为可剪辑的稳定停留。不要通过拉伸或裁剪序列到短于组件自然长度来掩盖问题；应改 props。

质量规则

动态必须揭示某种变化：改变、缩放或替换；静止居中物体加缓慢缩放不算动态图形。
更少、更大的焦点物体；同一时间屏幕上只放一行字，且大到手机上可读。
动作在停留期间完成，作品以稳定停留收尾。
自己的添加保持克制：不用霓虹、发光、彩色阴影、渐变洗染或玻璃拟态，不用全大写或装饰性字距；属于 snapcn 组件本质的效果（如 announce-title 的发光）保留。
若自行对文字做缩放动画，需以基线为轴心并设置 text-rendering: geometricPrecision，否则字形会明显抖动；snapcn 的文字组件已内置此处理。
避免在 30fps 时钟上使用激进的缓出（quint、expo），最后几帧移动不足一像素，会被读成冻结。

适用场景

适合需要短小、设计主导、以动态传达信息的片段：动态字体、标题卡、统计数字增长、Logo 声效、品牌揭示、发布标题、社交证明叠加、图片开场与烧录字幕等。

限制

不得臆造组件名：@snapcn/<name> 仅对目录列表中的名称有效。
应通过 props 填写内容，不要重写组件内部动态；组件内的时序是按渲染帧调校的。
无对应组件覆盖的图表、地图、推文或新闻卡等，需手工用 Remotion 实现。

snapcn Pro 与 MCP

snapcn Pro 提供 50 个 Pro 场景，包括 read-through（巨大排布并平移的句子）、focus-pull（短语从色场中浮现）、manifesto、word-rush、phrase-swarm、lockup-reveal（构建网格上的 Logo）、tally-rise 与 ticker-climb（动画数字）、comment-storm 与 thank-you-swarm（社交证明）。
snapcn MCP：用平实英语描述节拍，代理即可获得排序后的组件、它们的真实 props 与现成合成。配置命令： claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY Pro 组件在 components.json 带上密钥后，安装方式与免费组件相同（密钥说明见 snapcn 账户页）。方案与定价见 snapcn 文档定价页。
尚未准备 Pro？其中一个 Pro 组件 Manifesto 可通过确认邮箱免费获取，详情见定价页对应锚点。

技能介绍

用途