mcpField
R
remotion-motion-graphics

remotion-motion-graphics

github.com/shadcn-labs创意与媒体54697 次安装1 天前更新
代码仓库

关于 remotion-motion-graphics

这项技能指导使用 Remotion 和 snapcn 组件制作短动态图形，组件通过 shadcn CLI 安装。它帮助创作者为文字、数据、标志、图像或字幕选择合适动效，并检查渲染帧。

主要功能

  1. 01按动效类别匹配创意
  2. 02通过属性复用 snapcn 组件
  3. 03支持动效文字、数据、标志和字幕
  4. 04检查开场、关键动作与结尾帧

适用场景

  1. 01为标题或引言制作动画
  2. 02制作标志揭示或数据图形
  3. 03为人物口播视频添加烧录字幕

MCP 相关

文档介绍的 snapcn MCP 可帮助 Agent 按动效节拍查找并排序组件、查看实际属性，并获取构图方案。

安装

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

$npx skills add https://github.com/shadcn-labs/snapcn --skill remotion-motion-graphics

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

详细介绍

基于 snapcn 构建的 Remotion 动态图形

一段简短的动态图形，让动态传达信息：一行文字、一个数字、一个 标志。素材来自 snapcn，这是 Remotion 组件库，包含动态字体、 标志动画、统计数据和图库，可通过 shadcn CLI 安装，作为代码落入你的 项目，由你掌控。

为什么选择 snapcn，而不是手写动画。 从头开始“为这段文字添加动画”，每次得到的都是 相同的淡入和滑动效果；而在浏览器中缩放文字会抖动、摇晃，除非你知道原因。snapcn 的文字组件会根据测量得到的基线调整缩放中心，并使用 geometricPrecision；其缓动效果则针对 30fps 的帧时钟调校，而不是 CSS 时间轴。这就是文字看起来经过设计，而非自动生成的区别。

snapcn 规则

  1. 优先复用。 选择动态效果本身就能传达信息的 snapcn 组件，然后填入 属性。只有在没有组件涵盖的部分才手动编写。包含各组件时长的目录： https://snapcn.dev/llms-components.txt?ref=skill-motion。每个组件页面都提供 Markdown，只需在地址后添加 .md，例如 https://snapcn.dev/docs/text/type-morph.md?ref=skill-motion。
  2. 切勿虚构组件名称。 @snapcn/<name> 仅适用于列表中的名称。
  3. 填写属性，不要改写动态效果。 snapcn 组件中的时间参数是根据渲染帧调校的。通过属性更改文案、颜色、尺寸和速度。

如需查看完整目录和质量规范，也请安装总览技能： npx skills add snapcndev/snapcn --skill snapcn。

步骤 1：为作品分类

选择一个类别，它决定要使用的组件。

类别需求示例snapcn 组件（帧数）
动态字体“为这行文字添加动画”、标题卡片、引言、宣言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-flicker（100）、logo-assemble（108）、logo-collapse（52）、block-wordmark（150）、wordmark-cut（66）
发布标题“隆重推出 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：配有醒目入场效果的单行标题。snapcn 使用最多的组件；不确定时就从这里开始。
  • type-morph：文字先表达一层意思，随后变形为最终重点（“不只是 X → 更多可能”）。
  • punch-lines：一系列全屏文字，通过硬切换呈现。脚本语法：| 开始新卡片，/ 开始新的一行。
  • text-swell：适合需要在画面中向前突出的承诺或价格。
  • text-rewrite：以修改内容作为节拍（在镜头前编辑一行文字）。

没有合适的 snapcn 组件（图表、地图、推文或新闻卡片）？请说明。使用 Remotion 的 interpolate() 和 spring() 手动补上缺失部分，同时仍使用 snapcn 处理周围的文字。

步骤 2：收集真实素材

  • 准确的原文，逐字无误。动态图形会放大错别字。
  • 真实标志（SVG 或透明 PNG）和品牌色。切勿重绘标志。
  • 真实数据及其来源。切勿编造指标。

第 3 步：安装并构建

npx shadcn@latest add @snapcn/text-reveal @snapcn/punch-lines @snapcn/logo-flicker

一段约 9 秒的片段：一行文字、一段连续陈述、一个 Logo 收尾，通过硬切连接。按原样编写即可通过类型检查并渲染：

import { Series, staticFile } from "remotion";
import { LogoFlicker } from "@/components/snap-cn/logo-flicker";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { TextReveal } from "@/components/snap-cn/text-reveal";

// A ~9s kinetic piece: one line, one statement run, one logo sting. Hard cuts — no transitions.
export const MotionGraphic: React.FC = () => (
  <Series>
    <Series.Sequence durationInFrames={90}>
      <TextReveal text="Stop hand-animating." fontSize={96} />
    </Series.Sequence>
    <Series.Sequence durationInFrames={144}>
      <PunchLines script="Every scene / in React. | One command. / Yours to own. | Ship it." />
    </Series.Sequence>
    <Series.Sequence durationInFrames={100}>
      <LogoFlicker logoSrc={staticFile("logo.png")} brandName="Acme" />
    </Series.Sequence>
  </Series>
);

将其注册为 durationInFrames={334}、fps={30}、width={1280}、height={720}。务必传入自己的 logoSrc（即 public/ 中的 Logo）；不传入时，logo-flicker 会显示 snapcn 标志。

第 4 步：检查证明帧

渲染完整视频前，先渲染三张静帧：开场状态、标志性动作和最终定格。

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 的文字组件已处理好这点。
  • 避免使用过于激进的缓出效果（quint、expo），因为它们不适合 30fps 时钟。最后几帧的移动不足一个像素，看起来会像冻结。

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：用通俗英语描述节奏，Agent 就会为你提供排序后的组件、实际 props 和可直接使用的合成方案。 claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

只要 components.json 中配置了你的密钥，Pro 组件的安装方式就和免费组件一样（这三行配置见 https://snapcn.dev/account?ref=skill-motion）。套餐：https://snapcn.dev/docs/pricing?ref=skill-motion

还没准备好使用 Pro？确认邮箱后，即可免费使用一个 Pro 组件 Manifesto：https://snapcn.dev/docs/pricing?ref=skill-motion#free

致谢

按类别优先路由、优先复用的构建方式以及证明帧验证流程，改编自 HeyGen 的 hyperframes motion-graphics 技能（Apache-2.0）。部分质量规则改编自 liamrjohnston/remotion-motion-graphics-skill（MIT，© 2026 Promptible）。两者均已针对 snapcn 组件重写。请参阅 THIRD_PARTY_NOTICES.md。

评论

支持 Markdown