snapcn 是做什么的？

用于 Remotion 视频的可复制粘贴组件。组件通过 shadcn 安装并存入 components/snap-cn/ 目录 —— 代码由你完全掌控。

安装

前提：一个 Remotion 项目 (npx create-video@latest)。

# 添加任意组件（带命名空间的 shadcn 注册表）
shadcn add @snapcn/text-reveal

# 组件安装至 components/snap-cn/text-reveal.tsx

@snapcn/<name> 是标准的命名空间形式。无需在 registries 中额外配置 —— 命名空间已包含在 shadcn 注册表目录中。普通注册表 URL https://snapcn.dev/r/<name>.json 同样有效。

依赖自动安装

许多组件通过 registryDependencies 拉取其他组件 —— shadcn 会递归安装它们。例如，shadcn add @snapcn/search-typing 同时会安装 @snapcn/snap-cn-ui、@snapcn/input 和 @snapcn/caret。

@snapcn/snap-cn-ui 是共享核心库（时间线折叠 hook、主题上下文、颜色计算）。大多数 UI 原语都依赖它。你极少需要直接安装它。

两个层级

snapcn 包含两种组件 —— 它们的 API 不同：

Animation 层级 (snapcn) —— 文字动画、转场、背景、UI 模块模拟、品牌/社交卡片、完整场景。基于帧驱动。共享属性：speed（时间倍速），以及针对文字的：fontSize、color、fontWeight。
UI Primitives (snap-cn-ui) —— 时间线驱动的 shadcn 风格原语。目前提供两个：input 和 caret。基于状态的属性（state、style、size、theme）—— 打开/输入状态是时间线的纯函数。没有 speed 属性。 构建于 @snapcn/snap-cn-ui 之上。

组件类别

根据你要构建的内容进行选择。目录按每个组件一个文件分布在 references/components/ 下。从 references/components/index.md 开始 —— 这是一个按类别分组的路由表，包含每个组件的 Use for / Avoid for 信号。浏览它，选择候选组件，然后只打开你需要的 references/components/<name>.md 文件（包含完整属性、示例以及所有使用/不使用说明）。不要读取每个文件。

类别	层级	组件
文字与标题	`snapcn`	`text-reveal`, `type-morph`, `text-swell`, `text-highlight`, `text-swap`, `text-build`, `text-rewrite`, `text-select`, `word-flip`, `punch-lines`, `word-gather`, `word-wheel`
字幕	`snapcn`	`word-captions`, `karaoke-captions`
AI 聊天输入	`snapcn`	`prompt-send`, `search-typing`, `prompt-zoom`, `answer-stream`, `answer-highlight`, `agent-steps`
屏幕与设备	`snapcn`	`phone-frame`, `laptop-frame`, `terminal-simulator`, `screen-recording`, `cursor-track`
Logo	`snapcn`	`logo-assemble`, `logo-flicker`, `logo-collapse`, `logo-drift`, `block-wordmark`, `wordmark-cut`
场景	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`, `count-grid`, `roster-grant`, `orb-swarm`, `reel-collage`, `card-rail`
社交证明	`snapcn`	`follower-rush`, `channel-thread`
效果	`snapcn`	`pulsing-border`
UI Primitives	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`，共享核心库)

这就是完整的免费注册表 —— 47 个项目（最新列表始终为 https://snapcn.dev/llms.txt?ref=skill-snapcn；另外 50 个为 Pro 版，见下文）。没有着色器、没有独立的转场组件、没有图表或社交卡片组件，也没有除 input 和 caret 之外的 shadcn 原语。如果场景需要其中一个，请自行构建（references/anatomy.md §1）—— 不要对此表中未包含的名称执行 shadcn add。references/components/index.md 映射了不再可安装的旧名称。

组件模式

约定因层级而异 —— 不要在原语上假设 Animation 层级的属性。

Animation 层级 (`snapcn`)

每个组件有命名的 Props 接口（例如 TextRevealProps）。
speed?: number —— 全局时间倍速（默认为 1），应用为 frame * speed。
文字组件：fontSize、color、fontWeight。
场景之间的转场 不在此注册表中 —— 请使用 Remotion 自己的 @remotion/transitions（slide、wipe、fade、flip）放在 <TransitionSeries> 内部。
根元素上可添加 className?: string。

UI Primitives (`snap-cn-ui`)

基于状态，非speed 驱动：state（例如 "open" / "closed"）、style、variant、size、theme?: Partial<SnapCnTheme>。
打开/关闭/激活状态是时间线的纯函数（关键帧预设）。
使用触发器元素组合模态层原语（dialog、alert-dialog、drawer）—— 参见每个组件的示例。

动画 API

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
const scale = spring({ fps, frame, config: { damping: 12, mass: 1, stiffness: 100 } });

// 确定性随机（绝对不要使用 Math.random()）
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

场景组合结构

import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <TextReveal text="Ship it in React" />
</Sequence>

<Series>
  <Series.Sequence durationInFrames={60}><SceneA /></Series.Sequence>
  <Series.Sequence durationInFrames={60}><SceneB /></Series.Sequence>
</Series>

画布与时间

标准画布： 1280×720 @ 30fps。组件为此布局设计。
让每个 Sequence 的预算与组件的自然时长匹配 —— 参见 components/index.md 中的 Length 列（以及每个文件的 Natural length）。预算不足会截断动画；预算过多会产生空白时间。
色调匹配： 每个目录条目带有一个 vibe 标签（tech/premium/data/clean/playful/social）—— 选择色调符合品牌的组件。
调色板与字体： 保持在库的令牌范围内（references/design.md → tokens），这样你自己的元素就不会冲突。

设计默认值 —— 避免 AI 通病

当你编写自己的文字、场景装饰或卡片（非预制组件）时，请保持克制：

不要对你添加的正文/标题文字使用装饰性的 letter-spacing。
不要使用 text-transform: uppercase / 全大写默认值 —— 优先使用句子大小写（Launch，而不是 LAUNCH）。
不要使用渐变文字填充或装饰性渐变背景 —— 渐变仅作为有意的背景使用。
不要使用发光/彩色投影或大模糊半径（blur > ~24px、扩展、多层）—— 仅使用微妙的 1px 抬升效果。

例外： 切勿从本质上依赖这些效果的组件中移除它们 —— word-flip 的渐变文字、block-wordmark 的色彩组、announce-title 的发光效果、pulsing-border 本身以及字幕预设的粗轮廓都是合理的。这些规则约束的是你添加的内容，而非库本身。

完整的 do/avoid 示例请参见 references/design.md。关于运动质量（时间、预期、舞台、缓动），请参见 references/motion-principles.md。

注意事项（snapcn 特有）

没有独立的转场组件 —— 场景切换应使用 @remotion/transitions 的 <TransitionSeries.Transition>，而非 snapcn 组件。text-swap 交换的是文字行，而不是场景。
终端滚动是即时的 —— 使用阶跃函数 translateY，永远不要对滚动使用 spring 或 ease。
分割布局上使用 overflow: hidden —— 防止宽度动画期间内容折断。
光标闪烁是确定性的 —— 使用 Math.floor(frame / 15) % 2 === 0，而非定时器。
静态文件放入 public/ —— 通过 staticFile('cursor.svg') 加载，而不是导入。
社交卡片离线渲染 —— avatarUrl="" / coverUrl="" 会回退到渐变色；不会发起网络请求。

通用的 Remotion 规则（无 Math.random()、无 setInterval、使用 transform 而不是 top/left 做动画、渲染前加载字体）存在于 Remotion 自身的技能中，而非本技能： npx skills add remotion-dev/skills。

组合视频

不要堆积组件 —— 讲述一个故事。当被要求构建完整视频（"制作产品演示"、"更新日志视频"、"为我的着陆页制作介绍"）时：

确定策略 —— 使用现成模板、组合组件或构建新组件。参见 references/anatomy.md §1。
遵循节奏 —— 产品演示的节奏是：吸引 → 定位 → 产品展示 → 功能 → 证明 → 行动号召（后两个可选）。参见 references/anatomy.md §2。
使用食谱 —— references/archetypes/index.md 路由到按原型构建的内容：内容协定（推断 → 询问 → 占位符）、时长变体、节奏→组件映射以及一个完整的 <TransitionSeries> 骨架示例。
为每个节奏选择组件 —— 从 references/components/index.md 中挑选；将 vibe 标签与品牌匹配，并根据其自然长度预算每个 <Sequence durationInFrames>。
检查质量标准 —— 一个强调色、句子大小写动态字体、真实内容、无发光光晕、无功能列表枚举、无字体下方的装饰性渐变遮罩。参见 references/anatomy.md §3。

工作流

对于完整视频，安装对应的工作流技能。每个工作流技能按照节奏组合这些组件，并生成一个类型检查和渲染都通过的视频：

npx skills add snapcndev/snapcn --skill remotion-launch-video：启动影片、公告、Product Hunt / X 宣传片。
npx skills add snapcndev/snapcn --skill remotion-product-demo：基于真实录屏、CLI 和 AI 应用演示的教程。
npx skills add snapcndev/snapcn --skill remotion-motion-graphics：动态字体、Logo 片头、统计数据和短开场。
npx skills add snapcndev/snapcn --skill remotion-kinetic-typography：动画文字和标题卡片。
npx skills add snapcndev/snapcn --skill remotion-logo-animation：Logo 展示、片头片尾。
npx skills add snapcndev/snapcn --skill remotion-explainer-video：带内嵌字幕的解说视频。

snapcn Pro

50 个额外组件（version-drop、library-flight、read-through、focus-pull、tap-through、checkout-push、comment-storm、tally-rise 等）、模板以及 snapcn MCP。MCP 让你的代理能搜索注册表并读取每个组件的实际属性。一旦 components.json 发送密钥（在 https://snapcn.dev/account?ref=skill-snapcn 上三行配置），Pro 组件的安装方式与免费组件相同；MCP 使用 claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY。套餐信息：https://snapcn.dev/docs/pricing?ref=skill-snapcn

还没准备好用 Pro？一个 Pro 组件 Manifesto 对于已验证邮箱的用户免费开放：https://snapcn.dev/docs/pricing?ref=skill-snapcn#free

参考资料

references/anatomy.md —— 组合完整视频：策略（模板/组合/新建）、产品演示节奏以及好与劣的质量标准。
references/archetypes/index.md —— 路由到按原型构建的食谱（产品演示旗舰版 + 更新日志、功能公告、开源展示、CLI 工具演示、证言集锦、年度回顾、价格展示、Logo 片头）：内容协定、时长变体、节奏→组件映射。
references/components/index.md —— 路由表（所有组件，按类别分组，带有 Use for / Avoid for 说明）。打开 references/components/<name>.md 获取单个组件的完整属性、示例和使用/不使用说明。
references/design.md —— 反通病设计默认值（do/avoid）+ 设计令牌（调色板、字体、画布）。
references/motion-principles.md —— 适用于 snapcn + Remotion 的运动设计原则。
references/anti-patterns.md —— 常见生成错误及其修复方法。

snapcndev/snapcn

snapcn 是什么？

在你喜欢的 AI 中提问

文档