remocn

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

remocn

Copy-paste components for Remotion videos. Components install via

shadcn

and land in

components/remocn/

— you own the code.

使用remocn构建Remotion视频——从shadcn注册表中复制粘贴动画组件和时间线驱动的UI原语。组件通过

shadcn

安装，会存放在

components/remocn/

目录下——代码完全由你掌控。

The catalog lives at remocn.dev

组件目录托管在remocn.dev

This skill does not carry a copy of the component catalog. There are ~240 components and they change; a bundled copy goes stale silently. Read the live docs instead.

Start every component search here:

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

One table per category, every installable component, each row carrying

Use for

Avoid for

, natural length, vibe, tier, dependencies, and a link to its full page. Scan it, shortlist, then fetch only the pages you shortlisted.

One component's full reference — props with descriptions, worked examples, all use / don't-use notes — is the docs URL with

.md

appended:

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

The index gives you the exact URL per component — don't guess the section from the name, several components live somewhere non-obvious.

Fetch with whatever your environment provides (a web-fetch tool,

curl

WebFetch

). If the network is unavailable, say so and stop — do not invent props, defaults, or durations from memory, and do not substitute a component you have not read. A wrong prop name fails at build; an invented duration silently clips the animation.

本技能并未携带组件目录的副本。目前有约240个组件，且会持续更新；本地捆绑的副本会悄无声息地过时。请直接查阅在线文档。

从这里开始所有组件搜索：

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

每个类别对应一个表格，包含所有可安装的组件，每行都标注了“适用场景/避用场景”、自然时长、风格、层级、依赖项以及指向完整页面的链接。先浏览该列表，选出候选组件，再仅获取候选组件的详情页。

单个组件的完整参考文档——含属性说明、示例、所有适用/不适用注意事项——是在文档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

）。若网络不可用，请告知并停止操作——不要凭记忆编造属性、默认值或时长，也不要替换未查阅过的组件。错误的属性名称会导致构建失败；编造的时长会悄无声息地截断动画。

Installation

安装步骤

Prerequisites: a Remotion project (

npx create-video@latest

bash

shadcn add @remocn/blur-out-up

@remocn/<name>

is the canonical namespaced form (configured under

registries

components.json

). The plain registry URL

https://remocn.dev/r/<name>.json

also works.

前提条件：已创建Remotion项目（执行

npx create-video@latest

）。

bash

shadcn add @remocn/blur-out-up

@remocn/<name>

是标准的命名空间格式（在

components.json

的

registries

中配置）。直接使用注册表URL

https://remocn.dev/r/<name>.json

也可完成安装。

Dependencies install automatically

依赖会自动安装

Many components pull others via

registryDependencies

—

shadcn

installs them transitively. For example,

shadcn add @remocn/typewriter

also pulls

@remocn/remocn-ui

and

@remocn/caret

@remocn/remocn-ui
is the shared core lib (timeline-fold hook, theme context, color math). Most UI Primitives depend on it. You rarely install it directly.

许多组件会通过

registryDependencies

引入其他依赖——

shadcn

会自动安装这些传递依赖。例如，执行

shadcn add @remocn/typewriter

时，同时会安装

@remocn/remocn-ui

和

@remocn/caret

。

**
```
@remocn/remocn-ui
```
**是共享核心库（包含时间线折叠钩子、主题上下文、颜色计算工具）。大多数UI原语都依赖它。你很少需要直接安装它。

Two tiers

两个组件层级

remocn has two kinds of components — they have different APIs:

Animation tier (
```
remocn
```
) — text animations, transitions, backgrounds, UI-block sims, brand/social cards, full compositions. Frame-driven. Shared props:
```
speed
```
(time multiplier), and for text:
```
fontSize
```
,
```
color
```
,
```
fontWeight
```
.
UI Primitives (
```
remocn-ui
```
) — timeline-driven shadcn-style primitives (button, dialog, select, command-menu, tooltip…). State-based props (
```
state
```
,
```
style
```
,
```
variant
```
,
```
theme
```
). No
speed
prop. Built on
```
@remocn/remocn-ui
```
.

The index's

Tier

column tells you which one you are looking at before you open the page.

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

动画层级（
```
remocn
```
）——文本动画、转场效果、背景、UI块模拟、品牌/社交卡片、完整合成内容。基于帧驱动。共享属性：
```
speed
```
（时间乘数），文本组件额外包含
```
fontSize
```
、
```
color
```
、
```
fontWeight
```
。
UI原语（
```
remocn-ui
```
）——时间线驱动的shadcn风格原语（按钮、对话框、选择器、命令菜单、提示框等）。基于状态的属性（
```
state
```
、
```
style
```
、
```
variant
```
、
```
theme
```
）。无
speed
属性。基于
```
@remocn/remocn-ui
```
构建。

索引中的“层级”列会在你打开详情页前告知你组件所属的层级。

Component patterns

组件模式

Conventions differ by tier — don't assume animation-tier props on a primitive.

不同层级的组件遵循不同的约定——不要假设动画层级的属性适用于原语组件。

Animation tier (

remocn

)

动画层级（

remocn

）

Named
```
Props
```
interface per component (e.g.
```
BlurOutUpProps
```
).
```
speed?: number
```
— global time multiplier (default
```
1
```
), applied as
```
frame * speed
```
.
Text components:
```
fontSize
```
,
```
color
```
,
```
fontWeight
```
.

Transitions: lowercase factories (e.g.

whipPan(props)

) returning a

TransitionPresentation

— pass to

TransitionSeries.Transition

via

presentation

, pace with

linearTiming

springTiming

```
className?: string
```
on the root.

Not everything filed under transitions is a presentation:

slide-swap

and

spring-settle

are scene sequencers that take a

scenes

array and own the whole timeline. The page says which one you have.

每个组件都有对应的命名
```
Props
```
接口（例如
```
BlurOutUpProps
```
）。
```
speed?: number
```
——全局时间乘数（默认值为
```
1
```
），计算方式为
```
frame * speed
```
。
文本组件：
```
fontSize
```
、
```
color
```
、
```
fontWeight
```
。

转场效果：小写工厂函数（例如

whipPan(props)

）返回

TransitionPresentation

——通过

presentation

传递给

TransitionSeries.Transition

，使用

linearTiming

springTiming

控制节奏。

根元素支持
```
className?: string
```
。

并非所有归类为转场的内容都是演示组件：

slide-swap

和

spring-settle

是场景序列器，接受

scenes

数组并掌控整个时间线。详情页会说明组件类型。

UI Primitives (

remocn-ui

)

UI原语（

remocn-ui

）

State-based, not

speed

-based:

state

(e.g.

"open"

"closed"

style

variant

size

theme?: Partial<RemocnTheme>

The opened/closed/active state is a pure function of the timeline (keyframed presets).
Compose modal-layer primitives (dialog, alert-dialog, drawer) with a trigger element — see each component's example.

基于状态，不基于

speed

：

state

（例如

"open"

"closed"

）、

style

、

variant

、

size

、

theme?: Partial<RemocnTheme>

。

打开/关闭/激活状态是时间线的纯函数（关键帧预设）。
将模态层原语（对话框、警告对话框、抽屉）与触发元素组合使用——请查看每个组件的示例。

Animation API

动画API

tsx

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}`);

tsx

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}`);

Composition structure

合成内容结构

tsx

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>

tsx

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>

Canvas & timing

画布与计时

Canvas standard:
```
1280×720 @ 30fps
```
. Components are laid out for it.
Length
is the component's own motion, not the whole beat. For a transition it is the value to pass to
```
linearTiming
```
/
```
springTiming
```
; for everything else it is the frame the animation finishes on. Treat it as the floor for the
```
Sequence
```
and add hold time when the element should stay on screen after it settles.
```
state-driven
```
means the component renders from its
```
state
```
prop and has no duration of its own.
Tone matching: each entry carries a
```
vibe
```
tag (
```
tech
```
/
```
premium
```
/
```
data
```
/
```
clean
```
/
```
playful
```
/
```
social
```
/
```
paper
```
) — pick components whose vibe fits the brand.
```
paper
```
is the stop-motion kit: a quantized ~10-poses-per-second clock, handwriting and ink. Those components read as one world, so mix them with each other rather than with the smooth tiers.

标准画布规格：
```
1280×720 @ 30fps
```
。所有组件均为此规格布局。
“时长”指组件自身的运动时长，而非整个节拍的时长。对于转场效果，该值需传递给
```
linearTiming
```
/
```
springTiming
```
；对于其他组件，该值是动画结束的帧编号。将其作为
```
Sequence
```
的最小时长，若元素在动画结束后需保持在屏幕上，可添加停留时间。“状态驱动”意味着组件根据
```
state
```
属性渲染，自身无固定时长。
风格匹配：每个组件都带有
```
vibe
```
标签（
```
tech
```
/
```
premium
```
/
```
data
```
/
```
clean
```
/
```
playful
```
/
```
social
```
/
```
paper
```
）——选择风格与品牌匹配的组件。
```
paper
```
是定格动画套件：约每秒10个关键帧的量化时钟、手写体和墨水效果。这些组件属于同一风格体系，应相互搭配使用，而非与平滑风格的组件混合。

Design defaults — avoid AI-slop

设计默认值——避免AI生成的劣质内容

Your own additions (text, scene chrome, cards — not the prebuilt components) stay restrained: default tracking, sentence case, solid text color, subtle 1px elevation — no decorative letter-spacing, ALL-CAPS, gradient text-fills, or glow shadows. Never strip these traits from a component whose essence is the effect (

tracking-in

, social-card gradients, designed elevation).

Full do/avoid examples, design tokens, motion principles and the anti-pattern list live in the Craft section:

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

你自行添加的内容（文本、场景装饰、卡片——不包括预构建组件）需保持克制：默认字间距、句首大写、纯色文本、细微的1px阴影——不要使用装饰性字间距、全部大写、渐变文本填充或发光阴影。但对于本质就是特效的组件（如

tracking-in

、社交卡片渐变、设计好的阴影），不要去除这些特性。

完整的适用/避用示例、设计标记、动效原则和反模式列表可在“技巧”部分查阅：

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

Gotchas (remocn-specific)

注意事项（remocn专属）

Terminal scroll is instant — step-function
```
translateY
```
, never spring/ease the scroll.
overflow: hidden
on split layouts — prevents content breakage during width animations.
Cursor blink is deterministic —
```
Math.floor(frame / 15) % 2 === 0
```
, not intervals.
Static files go in
public/
— load via
```
staticFile('cursor.svg')
```
, not imports.
Social cards render offline —
```
avatarUrl=""
```
/
```
coverUrl=""
```
fall back to gradients; no fetch.

General Remotion rules (no

Math.random()

, no

setInterval

, animate

transform

not

top

left

, load fonts before render) live in the

remotion-best-practices

skill.

终端滚动是即时的——使用阶跃函数
```
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

技能中查阅。

Composing a video

视频合成

Don't dump components — compose one story. When asked to build a full video ("make a product demo", "changelog video", "intro for my landing"):

Decide the strategy — ready template vs compose from components vs build a new component. See
```
references/anatomy.md
```
§1.
Follow the beats — a product demo is Hook → Positioning → Product reveal → Features → Proof → CTA (last two optional). See
```
references/anatomy.md
```
§2.
Use the recipe —
```
references/archetypes/index.md
```
routes to per-archetype builds: content contract (infer → ask → placeholder), duration variants, beat→component slots, and a worked
```
<TransitionSeries>
```
skeleton.
Pick each beat's component from
```
https://remocn.dev/llms-components.txt
```
; match the
```
vibe
```
tag to the brand and budget its
```
Sequence
```
per Canvas & timing above.
Check the quality bar — one accent, sentence-case kinetic type, real content, no glow halos, no feature-list enumeration. See
```
references/anatomy.md
```
§3.

不要堆砌组件——要构建一个完整的故事。当需要制作完整视频（如“制作产品演示”、“更新日志视频”、“着陆页 intro”）时：

确定策略——使用现成模板、从组件合成、还是构建新组件。请查看
```
references/anatomy.md
```
第1节。
遵循节拍——产品演示的结构为：钩子→定位→产品展示→功能→证明→行动号召（最后两个可选）。请查看
```
references/anatomy.md
```
第2节。
使用配方——
```
references/archetypes/index.md
```
提供了不同类型视频的制作指南：内容约定（推断→询问→占位符）、时长变体、节拍→组件映射，以及完整的
```
<TransitionSeries>
```
框架。
从
https://remocn.dev/llms-components.txt
中为每个节拍选择组件；确保
```
vibe
```
标签与品牌匹配，并根据上述“画布与计时”为每个
```
Sequence
```
分配时长。
检查质量标准——单一强调色、句首大写的动态文字、真实内容、无发光光晕、无功能列表枚举。请查看
```
references/anatomy.md
```
第3节。

Reference

参考资料

Bundled with this skill — the judgment that does not change per component:

```
references/anatomy.md
```
— composing a full video: strategy (template/compose/new), the product-demo beats, and the good-vs-slop quality bar.
```
references/archetypes/index.md
```
— router to per-archetype build recipes (product-demo flagship + changelog, feature-announcement, oss-showcase, cli-tool-demo, testimonial-reel, year-in-review, pricing-reveal, logo-bumper): content contract, duration variants, beat→slot map.

Fetched from remocn.dev — everything that tracks the components:

```
https://remocn.dev/llms-components.txt
```
— the component index. Always start here.

https://remocn.dev/docs/<section>/<name>.md

— one component's full reference.

https://remocn.dev/docs/craft/design-defaults.md

— anti-slop defaults and design tokens.

https://remocn.dev/docs/craft/motion-principles.md

— motion principles adapted to remocn.

```
https://remocn.dev/docs/craft/anti-patterns.md
```
— common generation mistakes and their fixes.
```
https://remocn.dev/llms.txt
```
— index of the whole documentation, if you need something else.

本技能包含以下不会随组件更新的判断准则：

```
references/anatomy.md
```
——完整视频合成：策略（模板/合成/新建）、产品演示节拍、优质vs劣质内容的质量标准。
```
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
```
——完整文档索引，若你需要其他内容可查阅。",

remocn

Original

Translation

remocn

remocn

The catalog lives at remocn.dev

组件目录托管在remocn.dev

Installation

安装步骤

Dependencies install automatically

依赖会自动安装

Two tiers

两个组件层级

Component patterns

组件模式

Animation tier (
`remocn`
)

动画层级（
`remocn`
）

UI Primitives (
`remocn-ui`
)

UI原语（
`remocn-ui`
）

Animation API

动画API

Composition structure

合成内容结构

Canvas & timing

画布与计时

Design defaults — avoid AI-slop

设计默认值——避免AI生成的劣质内容

Gotchas (remocn-specific)

注意事项（remocn专属）

Composing a video

视频合成

Reference

参考资料

remocn

Original

Translation

remocn

remocn

The catalog lives at remocn.dev

组件目录托管在remocn.dev

Installation

安装步骤

Dependencies install automatically

依赖会自动安装

Two tiers

两个组件层级

Component patterns

组件模式

Animation tier (remocn)

动画层级（remocn）

UI Primitives (remocn-ui)

UI原语（remocn-ui）

Animation API

动画API

Composition structure

合成内容结构

Canvas & timing

画布与计时

Design defaults — avoid AI-slop

设计默认值——避免AI生成的劣质内容

Gotchas (remocn-specific)

注意事项（remocn专属）

Composing a video

视频合成

Reference

参考资料

Animation tier (
`remocn`
)

动画层级（
`remocn`
）

UI Primitives (
`remocn-ui`
)

UI原语（
`remocn-ui`
）