Remotion Logo动画，来自snapcn
在Remotion中制作一个2-6秒的Logo揭示动画。这里的每一个开场片段都是snapcn组件，一个通过shadcn CLI安装并作为你项目中的可编辑代码的Remotion场景。你提供Logo和品牌名称，动画效果已经内建。
为什么选择snapcn，而不是手写揭示动画。 当智能体被要求“制作Logo动画”时，它每次都写出同样的东西：淡入，从0.8缩放至1，然后结束。snapcn的Logo场景从真实的品牌影片中提炼而来：一系列照片闪烁后定格在标记上，一组镜头环绕并汇聚成Logo，一个宽度是画面两倍的文字标记然后硬切。
snapcn规则
- 首先选择一个snapcn Logo场景。 带有长度的目录在这里：
https://snapcn.dev/llms-components.txt?ref=skill-logo。任何页面都可以通过添加.md来提供Markdown。 例如https://snapcn.dev/docs/logos/logo-flicker.md?ref=skill-logo。 - 切勿发明组件名称。 只有该列表中出现的名称才能安装。
- 始终传递你自己的Logo和名称。 每个Logo场景默认使用snapcn标记和单词“snapcn”，直到你替换它们。
- 切勿重新绘制Logo。 使用真实文件：
public/中的透明PNG或SVG。
关于完整目录，也可以安装总揽技能：
npx skills add snapcndev/snapcn --skill snapcn。
选择开场片段
| 场景 | 帧数 | 效果 | 参数 |
|---|---|---|---|
logo-flicker | 100 | 照片快速闪烁，闪烁渐慢，你的Logo最终定格 | logoSrc, brandName, images |
logo-assemble | 108 | 一圈照片围绕一行文字旋转并汇聚到标记上 | logoSrc, brandName, middleText, images |
logo-collapse | 52 | 一组堆叠照片快速切换并汇聚到标记上；名称落在旁边 | mark, wordmark, images（用` |
block-wordmark | 150 | 实色块逐字母构建名称 | text, colors |
wordmark-cut | 66 | 宽度是画面两倍的文字标记，然后硬切到其最后几个字母 | word, dotFrom, dotTo |
announce-title | 170 | 完整的标题序列：眉标、名称、标语、标记 | title, tagline, symbolPath |
- 开场片头：
logo-flicker或logo-collapse：简短，高能量。 - 结尾/结束卡片：
wordmark-cut或block-wordmark：名称在末尾保持不动。 - 发布开场：
announce-title（参见remotion-launch-video技能）。 - 没有品牌照片？ 使用
block-wordmark或wordmark-cut；它们只需要名称。
构建
npx shadcn@latest add @snapcn/logo-assemble @snapcn/wordmark-cut
一个约6秒的开场：照片环绕并汇聚到标记上，然后硬切到文字标记。它按编写的方式通过类型检查并渲染，使用public/中的文件：
import { Series, staticFile } from "remotion";
import { LogoAssemble } from "@/components/snap-cn/logo-assemble";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";
// 一个约6秒的Logo动画：照片环绕并汇聚到标记上，然后硬切到文字标记。
// 你的Logo放在public/中（透明PNG或SVG）。切勿重新绘制它。
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));
export const LogoAnimation: React.FC = () => (
<Series>
<Series.Sequence durationInFrames={108}>
<LogoAssemble
logoSrc={staticFile("logo.png")}
brandName="Acme"
middleText={"自动对账\n的账单"}
images={shots}
/>
</Series.Sequence>
<Series.Sequence durationInFrames={66}>
<WordmarkCut word="acme." />
</Series.Sequence>
</Series>
);
注册时设置：durationInFrames={174}，fps={30}，width={1280}，height={720}。
渲染前检查
npx remotion still LogoAnimation out/mark.png --frame=100
npx remotion render LogoAnimation out/logo.mp4 --codec=h264 --crf=18
- 标记是你的Logo，清晰且未拉伸。使用正方形或紧密裁剪的文件。
- 任何帧中都没有snapcn默认的文本或标记。
- 最后一帧干净地保持住，供剪辑师剪切。
- 浅色背景上的白色Logo会消失：使用
mode="dark"或深色Logo。
规则
- 一个开场，一个创意。 不要串联三个Logo场景；选择一个揭示和一个保持。
- 预算好总时长。 在第100帧之前剪掉
logo-flicker会中断闪烁过程。 - 保持你的添加低调。 不要添加发光、标记背后的渐变或全大写的名称。
snapcn Pro
Pro增加了Logo场景，如lockup-reveal（Logo在构建网格上打开，然后变成一个窗口）和app-reveal（文字标记折叠到你的应用中），以及模板和snapcn MCP，它让你的智能体读取每个组件的真实props：
claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY。一旦components.json发送了你的密钥（https://snapcn.dev/account?ref=skill-logo），Pro组件就像免费组件一样安装。价格方案：https://snapcn.dev/docs/pricing?ref=skill-logo
还没准备好用Pro？一个Pro组件Manifesto，对于已确认邮箱的用户是免费的：https://snapcn.dev/docs/pricing?ref=skill-logo#free
致谢
“切勿重新绘制Logo，使用真实文件”的规则以及克制规则改编自
liamrjohnston/remotion-motion-graphics-skill
(MIT，© 2026 Promptible)。分类优先的选择改编自HeyGen的
hyperframes motion-graphics技能
(Apache-2.0)。参见THIRD_PARTY_NOTICES.md。