snapcndev/snapcn

Remotion 发布视频，由 snapcn 构建

将发布简介变成 Remotion 中 15–30 秒的发布影片。每一帧都是一个 snapcn 组件：手工调校、基于渲染帧测量的 Remotion 场景，可通过 shadcn CLI 安装并作为你拥有的代码直接放入项目。

为什么用 snapcn，而非手写动画。 代理从头开始制作动画时，最终效果总是千篇一律：渐变色背景上居中的文字、所有元素淡入、结尾一个 Logo。snapcn 的场景是逐帧对照真实发布影片构建的，因此动画的节奏、字体和镜头已经具备了让发布看起来“昂贵”的特质。你的工作是选择场景并填写属性，而不是凭空创造运动。

snapcn 规则

1. 每一节拍都使用 snapcn 组件，除非没有合适的。 在你为某个镜头写任何 interpolate() 或 spring() 之前，先查看目录： https://snapcn.dev/llms-components.txt?ref=skill-launch 列出了每个可安装组件及其用途和运行时长。任何组件页面在追加 .md 后都会返回 Markdown 格式，例如 https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch。
2. 切勿发明组件名称。 @snapcn/<name> 仅对该列表中的名称有效。如果没有组件适合某个节拍，请如实说明，并使用排版组件（@snapcn/text-reveal）承载该节拍，而不是猜测一个名称。
3. 填写属性，不要重写组件。 通过属性更改文字、颜色和图片。编辑已安装 snapcn 文件内部的动画会破坏针对渲染帧调校好的节奏。

有关完整目录、编排规则和质量标准，还请安装总纲技能：npx skills add snapcndev/snapcn --skill snapcn。

前提条件

• 一个 Remotion 项目（npx create-video@latest）。画布：1280×720 @ 30fps，这是每个 snapcn 场景预设的尺寸。
• shadcn CLI。如果项目没有 components.json 文件，请运行 npx shadcn@latest init。
• @remotion/transitions 用于场景间的切换：npm i @remotion/transitions。
• 发布文案：产品名称、标题、副标题、一个可证明的数字，以及真实的截图或屏幕录制。

工作流程

1. 收集输入

在编写任何代码之前，请获取以下内容：

• 简介：发布帖子、着陆页或单页文档。提取标题、副标题、一个差异化功能、证明数字和语气。
• 品牌：Logo（SVG 路径或 PNG）、主色调、字体。snapcn 场景通过属性（titleColor、logoSrc、symbolPath、fontFamily、theme）接受这些信息。
• 真实产品截图：截图或 30–60 秒的录制。镜像真实的 UI 文案。 切勿发明标签、功能或数字；这是让发布显得虚假的最快方式。

2. 在编写任何代码之前先画故事板

首先编写镜头列表，并将每个节拍映射到 snapcn 组件：

节拍	时间	snapcn 组件	帧数	承载内容
钩子	0–3 秒	type-morph 或 text-reveal	94 / 90	观众的问题，转化为承诺
名称	3–9 秒	announce-title	170	引子、产品名称、副标题、标志
产品	9–15 秒	hero-launch、laptop-frame、phone-frame	170 / 240 / 240	真实屏幕，在设备上显示
证明	15–17 秒	count-grid、follower-rush	47 / 300	一个真实数字
结尾	17–20 秒	wordmark-cut、block-wordmark、logo-flicker、logo-assemble	66 / 150 / 100 / 108	名称，仅此而已

一些可以避免重复渲染的规则：

• 以观众的问题开头，而非产品名称。
• 在名称出现后 3 秒内展示产品。
• 将最多的屏幕时间给予产品独有的那个时刻。 不要将运行时均匀分配给各个功能。
• 将每个序列的时长设定为组件的自然长度（帧数列，也见 llms-components.txt）。设定过短会剪掉动画；设定过长会导致无内容空档。
• 把文字烧录进视频。 大多数社交媒体观看是静音的。

3. 安装场景

npx shadcn@latest add @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

每个组件都会安装到 components/snap-cn/<name>.tsx，其依赖项也会一并安装。

4. 编排

一个 TransitionSeries，每个节拍一个序列，它们之间有短淡入淡出。此编排类型检查通过并按原样渲染，在 public/ 中有四张截图：

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/snap-cn/announce-title";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { HeroLaunch } from "@/components/snap-cn/hero-launch";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// 1280×720 @ 30fps。每个 Sequence 的时长设定为组件的自然长度。
const T = linearTiming({ durationInFrames: 12 });
// 真实产品截图放在 public/ 中。如果没有这些截图，场景将回退到 snapcn 的示例图片。
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. 钩子：观众的问题，转化为承诺 */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="你的发布视频 "
        emphasis="需要一周时间。"
        morphTo="只需一个提示。"
        finally_="一个提示。"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 产品命名 */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="隆重推出"
        title="Acme 2.0"
        tagline="自动对账的账单。"
        symbolPath="" // 你的标志作为 SVG 路径，位于 0 0 100 100 的盒子内；"" 表示不显示
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. 展示产品：两张真实截图（图片、视频或 CSS 渐变占位） */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="每张发票，自动匹配。"
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. 证明：一个真实数字 */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="团队" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. 以名称结尾 */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

将其注册为 durationInFrames={512}（序列总帧数减去 4 × 12 帧重叠），fps={30}，width={1280}，height={720}。

将渐变替换为真实截图或剪辑：image1={staticFile("shot-1.png")}，并将文件放在 public/ 中。

5. 渲染-审查循环

在渲染完整视频之前，先渲染单帧：

# 每节拍一帧：每个序列的中点，以及每个切换点前后
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

将这些静态帧拼成一张接触表，在渲染完整视频前进行检查：

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

检查每一帧：

• 无文本被裁剪，无黑帧出现在切换点，无内容在其场景开始前显示。
• 屏幕上显示的每个字符串都来自真实简介。
• 产品在其名称出现后 3 秒内展示。

6. 审查

经过两三次自我审查后，渲染大约 20 帧（高峰时刻和每个切换点前后），并让四位评论员或四个并行子代理（如果你的系统支持）进行审查：

1. 设计/布局：对齐、裁剪、比例。
2. 可读性：在手机上以 720p 分辨率清晰可见，对比度，拼写错误。
3. 节奏：每个节拍是否值得其时长；结尾是否有力？
4. 品牌：颜色、字体和 UI 是否与真实产品匹配？

在下次渲染之前，将他们的修复列表合并为一个修订计划。

7. 针对平台发布

在渲染之前询问视频将在哪里发布。为每种宽高比制作一个编排，而不是后期裁剪。

平台	宽高比	尺寸
X / LinkedIn 动态	16:9	1920×1080（或直接渲染 1280×720 主版本）
X 竖版、Reels、Shorts、TikTok	9:16	1080×1920
LinkedIn / Instagram 动态	1:1 或 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 可将 1280×720 主版本放大至 1920×1080，而无需重新编排任何场景。

来之不易的经验

• 切勿发明产品 UI 标签。 截取真实应用的屏幕截图并镜像其文案。
• 结尾卡片只有一个标题和一个行动号召。 使用着陆页的真实副标题。
• 将钩子建立在观众无需解释就能识别的事物上。 如果需要一句话来解释，那这个钩子就太抽象了。
• 前后节拍同时出现。 让“之前”状态持续大约一秒，然后切换到“之后”状态。
• 不要将 snapcn 场景与你自己的淡出效果粘合在一起。 切换效果属于 TransitionSeries；每个场景自己的退出淡出会导致双重淡出。
• 你自己的添加要保持克制：使用句子大小写，不要装饰性的字间距，不要发光或渐变文字。snapcn 中带有发光的场景（announce-title）会保留它；那是效果本身，而不是装饰。

snapcn Pro：成品影片，以及一个了解所有属性的代理

对于需要超越免费场景的发布：

• 50 个为发布构建的 Pro 场景，包括 version-drop（发布号下拉）、library-flight、app-reveal、gallery-push（更新日志墙）、screen-wall、checkout-push、tally-rise、ticker-climb 和 thank-you-swarm。
• 模板（从 2026 年 10 月 20 日开始）：成品发布影片、功能讲解和更新日志剪辑。放入你的文案并渲染：https://snapcn.dev/docs/templates?ref=skill-launch
• snapcn MCP：你的代理可以用通俗英语搜索注册表，读取每个组件的真实属性，并将一行简介变成逐节拍的计划和 TransitionSeries 骨架。 claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

一旦 components.json 发送了你的密钥（三行代码在 https://snapcn.dev/account?ref=skill-launch），Pro 组件的安装方式与免费组件完全相同。定价：https://snapcn.dev/docs/pricing?ref=skill-launch

还没准备好用 Pro？一个 Pro 组件 Manifesto（宣言）对已验证邮箱的用户免费提供：https://snapcn.dev/docs/pricing?ref=skill-launch#free

归属

工作流程结构（输入 → 故事板 → 构建 → 渲染审查 → 多评论员审查 → 平台表格）以及部分来之不易的经验改编自 everyinc/product-launch-video（MIT 许可证，© 2026 Every Media, Inc.）。接触表审查以及“在设计任何外观前先搜索目录”的规则改编自 HeyGen 的 hyperframes product-launch-video 技能（Apache-2.0 许可证）。两者均已为 Remotion 和 snapcn 组件重写；所有 snapcn 特有内容均为 snapcn 自身所有。