remocn

remocn

适用于 Remotion 视频的复制粘贴组件。组件通过 shadcn 安装，并放在 components/remocn/ 中——代码由你掌控。

目录位于 remocn.dev

此技能不包含组件目录的副本。组件约有 240 个，且会不断变化；打包附带的副本会悄无声息地过时。请改为阅读在线文档。

每次搜索组件都从这里开始：

https://remocn.dev/llms-components.txt

每个类别各有一张表，列出所有可安装组件。每一行都包含 Use for / Avoid for、自然时长、风格、层级、依赖项，以及指向完整页面的链接。先浏览并选出候选组件，再仅获取入选组件的页面。

单个组件的完整参考文档——包含带说明的 props、示例以及所有适用 / 不适用说明——可通过在文档 URL 后追加 .md 获取：

https://remocn.dev/docs/typography/blur-out-up.md
https://remocn.dev/docs/transitions/whip-pan.md
https://remocn.dev/docs/ui/components/dialog.md

索引会提供每个组件的准确 URL——不要根据名称猜测所在章节，有些组件位于不太容易想到的位置。

使用环境提供的任意方式获取（网页抓取工具、curl、WebFetch）。如果网络不可用，请说明这一点并停止——不要凭记忆编造 props、默认值或时长，也不要用你未阅读过的组件替代。错误的 prop 名称会导致构建失败；编造的时长则会悄悄截断动画。

安装

前提条件：Remotion 项目（npx create-video@latest）。

shadcn add @remocn/blur-out-up

@remocn/<name> 是规范的命名空间形式（在 components.json 的 registries 下配置）。普通注册表 URL https://remocn.dev/r/<name>.json 也可以使用。

依赖项会自动安装

许多组件会通过 registryDependencies 引入其他组件——shadcn 会传递安装这些组件。 例如，shadcn add @remocn/typewriter 也会引入 @remocn/remocn-ui 和 @remocn/caret。

• @remocn/remocn-ui 是共享核心库（时间轴折叠 hook、主题上下文、颜色计算）。 大多数 UI 基元都依赖它。你很少需要直接安装它。

两个层级

remocn 有两类组件——它们的 API 不同：

• 动画层级（remocn）——文字动画、转场、背景、UI 区块模拟、品牌 / 社交卡片、完整合成。由帧驱动。共享 props：speed（时间倍率），文字组件还包括 fontSize、color、fontWeight。
• UI 基元（remocn-ui）——由时间轴驱动的 shadcn 风格基元（按钮、对话框、选择器、命令菜单、工具提示等）。基于状态的 props（state、style、variant、theme）。 没有 speed prop。 基于 @remocn/remocn-ui 构建。

索引中的 Tier 列会在你打开页面前告诉你组件所属的层级。

组件模式

不同层级的约定各不相同——不要将动画层级的 props 用在基元上。

动画层级（remocn）

• 每个组件都有一个命名的 Props 接口（例如 BlurOutUpProps）。
• speed?: number——全局时间倍率（默认值为 1），按 frame * speed 计算。
• 文字组件：fontSize、color、fontWeight。
• 转场：小写工厂函数（例如 whipPan(props)），返回一个 TransitionPresentation——通过 presentation 传给 TransitionSeries.Transition，并使用 linearTiming / springTiming 控制节奏。
• 根元素上有 className?: string。

归在转场类别下的内容不一定都是 presentation：slide-swap 和 spring-settle 是场景编排器，接收 scenes 数组并负责整个时间轴。页面会说明你遇到的是哪一种。

UI 基元（remocn-ui）

• 基于状态，而非基于 speed：state（例如 "open" / "closed"）、style、variant、 size、theme?: Partial<RemocnTheme>。
• 打开 / 关闭 / 活跃状态是时间轴的纯函数（由关键帧预设决定）。
• 将模态层基元（对话框、警告对话框、抽屉）与触发元素组合使用——请参阅每个组件的示例。

动画 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 } });

// Deterministic randomness (NEVER Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

合成结构

import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <Typewriter text="npm install remocn" />
</Sequence>

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

画布与时长

• 画布标准： 1280×720 @ 30fps。组件均针对该标准布局。
• Length 表示组件自身的动画时长，而非整个节拍的时长。 对于转场，它是传入 linearTiming / springTiming 的值；对于其他情况，它是动画结束时所在的帧。将其视为 Sequence 的最低时长，并在元素稳定后仍需留在屏幕上时增加停留时间。state-driven 表示组件根据其 state 属性渲染，且自身没有时长。
• 匹配调性： 每个条目都带有一个 vibe 标签（tech/premium/data/clean/playful/social/paper）——请选择调性符合品牌的组件。paper 是定格动画套件：采用量化的每秒约 10 帧的时钟、手写效果和墨迹。这些组件呈现出统一的风格，因此应彼此搭配，而不要与其他流畅动画风格混用。

设计默认规范 — 避免 AI 垃圾感

你自己添加的内容（文字、场景装饰、卡片——而非预置组件）应保持克制：使用默认字距、句式大小写、纯色文字和微妙的 1px 立体效果——不要使用装饰性字距、全大写、渐变文字填充或发光阴影。切勿移除那些本身就以这类效果为特色的组件的特征（tracking-in、社交卡片渐变、设计好的立体效果）。

完整的实践与避免示例、设计令牌、动画原则和反模式列表见 Craft 部分：

https://remocn.dev/docs/craft/design-defaults.md
https://remocn.dev/docs/craft/motion-principles.md
https://remocn.dev/docs/craft/anti-patterns.md

注意事项（remocn 特有）

• 终端滚动会瞬间完成——使用阶跃函数 translateY，滚动时绝不要使用弹簧或缓动效果。
• 拆分布局使用 overflow: hidden——避免宽度动画期间内容错乱。
• 光标闪烁具有确定性——使用 Math.floor(frame / 15) % 2 === 0，不要使用定时器。
• 静态文件放入 public/——通过 staticFile('cursor.svg') 加载，而不要使用导入。
• 社交卡片可离线渲染——avatarUrl="" / coverUrl="" 会回退为渐变；不会发起获取请求。

通用 Remotion 规则（不使用 Math.random()、不使用 setInterval、动画应使用 transform 而非 top/left、渲染前加载字体）见 remotion-best-practices 技能。

与 Remotion 技能协同工作

remocn 是构建在 Remotion 之上的组件层，而不是第二份 Remotion 指南。安装了 Remotion 自带的技能（remotion-create、remotion-render、remotion-best-practices）后，应由这些技能解答 Remotion 的工作方式——项目设置、动画 API、渲染、配置——并使用本技能来决定屏幕上显示什么：选用哪个 remocn 组件、运行多久、各节拍如何衔接。此处或你的回答中都不要重述 Remotion API 文档；请指向这些技能或 remotion.dev。

编排视频

不要堆砌组件，而要编排成一个完整的故事。收到制作完整视频的请求（“制作产品演示”“更新日志视频”“为我的落地页制作介绍视频”）时，如果已安装 remocn 插件中的 video 技能，请按其流程执行：依次完成需求简报 → 故事板 → 安装 → 编排 → 审核，并将结果交给 Remocn Studio。否则：

1. 确定策略——选择现成模板、使用组件编排，还是构建新组件。参见 references/anatomy.md §1。
2. 遵循节拍——产品演示的结构为 Hook → 定位 → 产品亮相 → 功能 → 佐证 → CTA（最后两项可选）。参见 references/anatomy.md §2。
3. 使用配方——references/archetypes/index.md 会引导你使用对应原型的构建方案：内容约定（推断 → 询问 → 占位内容）、时长变体、节拍→组件槽位，以及完整示例 <TransitionSeries> 骨架。
4. 为每个节拍选择组件，从 https://remocn.dev/llms-components.txt 中挑选；使 vibe 标签符合品牌风格，并根据上文的画布与时长，为其 Sequence 分配时长。
5. 为语音添加字幕——如果视频包含配音或人物口播，请将其转录为文字（https://remocn.dev/docs/captions/getting-started/get-a-transcript.md），从组件索引的 Captions 表中选择一个 caption-*，并按照 https://remocn.dev/docs/captions/getting-started/positioning.md 放置字幕。没有音频的屏幕文字脚本应使用排版处理。
6. 检查质量标准——只用一种强调色、动态字体采用句首字母大写格式、内容真实、不使用光晕，也不逐条罗列功能。参见 references/anatomy.md §3。

参考资料

随此技能附带——适用于所有组件、不随组件变化的判断依据：

• references/anatomy.md — 完整视频的编排：策略（模板／编排／新建）、产品演示的节拍，以及优质内容与低质内容的判断标准。
• references/archetypes/index.md — 各原型构建方案的索引（产品演示旗舰版 + 更新日志、功能公告、开源展示、CLI 工具演示、用户评价集锦、年度回顾、定价揭晓、Logo 片头）：内容约定、时长变体、节拍→槽位映射。

从 remocn.dev 获取——所有与组件相关的资料：

• https://remocn.dev/llms-components.txt — 组件索引。始终从这里开始。
• https://remocn.dev/docs/<section>/<name>.md — 单个组件的完整参考资料。
• https://remocn.dev/docs/craft/design-defaults.md — 防低质内容默认设置和设计令牌。
• https://remocn.dev/docs/craft/motion-principles.md — 针对 remocn 调整的动态效果原则。
• https://remocn.dev/docs/craft/anti-patterns.md — 常见生成错误及其修正方法。
• https://remocn.dev/llms.txt — 整套文档的索引，供查找其他资料。