remotion-logo-animation

用途

remotion-logo-animation 用于在 Remotion 中制作品牌 logo 动画，属于 snapcn 组件体系。它的目标场景是 2 至 6 秒的 logo 揭示（logo reveal / logo sting）、片头或片尾 bumper、品牌揭示、视频 end card，以及发布活动或 YouTube 频道素材。你提供 logo 与品牌名，运动效果已预先构建。

主要能力

资料列出的 snapcn logo 场景包括：

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。

选择建议：片头 bumper 用 logo-flicker 或 logo-collapse（短、高能）；片尾/end card 用 wordmark-cut 或 block-wordmark（名称在结尾停留）；发布开场用 announce-title（另见 remotion-launch-video 技能）。没有品牌照片时使用 block-wordmark 或 wordmark-cut，它们只需要名称。

使用方式

先选择 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 shadcn@latest add @snapcn/logo-assemble @snapcn/wordmark-cut

完整目录还可安装总技能：

npx skills add snapcndev/snapcn --skill snapcn

示例代码（约 6 秒动画，照片环绕收拢为商标，再硬切到文字标记）：

import { Series, staticFile } from "remotion"; import { LogoAssemble } from "@/components/snap-cn/logo-assemble"; import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

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={"Billing that\nreconciles itself"} 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 动画的 Remotion 项目，尤其是片头、片尾、发布开场等短视频素材。

限制与规则

一个 sting 只表达一个想法，不要串联三个 logo 场景，选一个揭示加一个停留。按完整长度规划，在 logo-flicker 第 100 帧前剪断会在闪烁中途结束。保持添加内容克制：商标后不加光晕、不加渐变，名称不用全大写。

snapcn Pro 增加 logo 场景，例如 lockup-reveal（logo 在构造网格上展开，然后变成窗口）和 app-reveal（文字标记折叠进你的 app），以及模板和 snapcn MCP，后者让 agent 读取每个组件的真实 props：

claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

当 components.json 发送你的 key 后，Pro 组件安装方式与免费组件相同。价格方案见 https://snapcn.dev/docs/pricing?ref=skill-logo。一个 Pro 组件 Manifesto 可通过确认邮箱免费获取。

技能介绍

用途

主要能力

使用方式

适用场景

限制与规则

署名