snapcn

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

snapcn

Copy-paste components for Remotion videos. Components install via

shadcn

and land in

components/snap-cn/

— you own the code.

用于Remotion视频的可复制粘贴组件。组件通过

shadcn

安装，最终会存放在

components/snap-cn/

目录下——代码完全归你所有。

Installation

安装

Prerequisites: a Remotion project (

npx create-video@latest

bash

undefined

前提条件：已有一个Remotion项目（可通过

npx create-video@latest

创建）。

bash

undefined

Add any component (namespaced shadcn registry)

添加任意组件（命名空间式shadcn注册表）

shadcn add @snap-cn/blur-out-up

Component lands at components/snap-cn/blur-out-up.tsx

组件将被安装到 components/snap-cn/blur-out-up.tsx


`@snap-cn/<name>` is the canonical namespaced form. It needs no `registries` entry — the
namespace is in the shadcn registry directory. The plain registry URL
`https://snapcn.dev/r/<name>.json` also works.


`@snap-cn/<name>`是标准的命名空间格式，无需配置`registries`条目——命名空间已包含在shadcn注册表目录中。直接使用注册表URL`https://snapcn.dev/r/<name>.json`同样有效。

Dependencies install automatically

依赖将自动安装

Many components pull others via

registryDependencies

—

shadcn

installs them transitively. For example,

shadcn add @snap-cn/claude-chat

also pulls

@snap-cn/snap-cn-ui

and

@snap-cn/caret

@snap-cn/snap-cn-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 @snap-cn/claude-chat

时，还会自动安装

@snap-cn/snap-cn-ui

和

@snap-cn/caret

。

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

Two tiers

两个组件层级

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

Animation tier (
```
snapcn
```
) — 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 (
```
snap-cn-ui
```
) — timeline-driven shadcn-style primitives (button, dialog, select, command-menu, tooltip…). State-based props (
```
state
```
,
```
style
```
,
```
variant
```
,
```
theme
```
). No
speed
prop. Built on
```
@snap-cn/snap-cn-ui
```
.

snapcn包含两类组件——它们的API完全不同：

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

Component categories

组件分类

Pick by what you're building. The catalog is split one file per component under

references/components/

. Start at
references/components/index.md
— a router table grouped by these categories with a

Use for

Avoid for

signal per component. Scan it, pick candidates, then open only the

references/components/<name>.md

files you need (full props, example, all use / don't-use notes). Don't read every file.

Category	Tier	Use for
Text Animations	`snapcn`	Reveal/replace/emphasize text ( `text-reveal` , `blur-out-up` , `tracking-in` , `rolling-number` , `shimmer-sweep` …)
Backgrounds & Effects	`snapcn`	Animated foundations, one-shot effects ( `mesh-gradient-bg` , `dynamic-grid` , `confetti` , `backdrop` )
Shaders	`snapcn`	WebGL shader backdrops, frame-driven for deterministic renders ( `shader-mesh-gradient` , `shader-warp` , `shader-voronoi` , `shader-god-rays` , `shader-metaballs` …)
Transitions & Wipes	`snapcn`	Swap between two scenes ( `directional-wipe` , `frosted-glass-wipe` , `spatial-push` , `zoom-through-transition` …)
UI Blocks	`snapcn`	Interface sims for product demos ( `terminal-simulator` , `glass-code-block` , `animated-bar-chart` …)
AI & Social Cards	`snapcn`	Brand/product card scenes ( `claude-chat` , `v0` , `github-stars` , `x-follow-card` …)
UI Primitives	`snap-cn-ui`	shadcn-style primitives for video ( `button` , `dialog` , `select` , `command-menu` , `tooltip` …)

根据你的需求选择组件。组件目录按单个组件拆分，存放在

references/components/

下。从
references/components/index.md
开始——这是一个按分类分组的路由表，每个组件都标注了「适用场景」/「避用场景」。浏览该文件筛选候选组件，然后仅打开你需要的

references/components/<name>.md

文件（包含完整属性、示例、所有适用/避用说明），无需逐个阅读所有文件。

分类	层级	适用场景
文本动画	`snapcn`	文本的显示/替换/强调效果（ `text-reveal` 、 `blur-out-up` 、 `tracking-in` 、 `rolling-number` 、 `shimmer-sweep` 等）
背景与特效	`snapcn`	动画基础层、一次性特效（ `mesh-gradient-bg` 、 `dynamic-grid` 、 `confetti` 、 `backdrop` ）
着色器	`snapcn`	WebGL着色器背景，基于帧驱动实现确定性渲染（ `shader-mesh-gradient` 、 `shader-warp` 、 `shader-voronoi` 、 `shader-god-rays` 、 `shader-metaballs` 等）
转场与擦除效果	`snapcn`	两个场景之间的切换（ `directional-wipe` 、 `frosted-glass-wipe` 、 `spatial-push` 、 `zoom-through-transition` 等）
UI模块	`snapcn`	产品演示的界面模拟（ `terminal-simulator` 、 `glass-code-block` 、 `animated-bar-chart` 等）
AI与社交卡片	`snapcn`	品牌/产品卡片场景（ `claude-chat` 、 `v0` 、 `github-stars` 、 `x-follow-card` 等）
UI原语	`snap-cn-ui`	适用于视频的shadcn风格原语（ `button` 、 `dialog` 、 `select` 、 `command-menu` 、 `tooltip` 等）

Component patterns

组件模式

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

不同层级的组件遵循不同的约定——不要想当然地认为动画层级的属性适用于原语组件。

Animation tier (

snapcn

)

动画层级（

snapcn

）

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: take
```
from
```
/
```
to
```
as
```
ReactNode
```
(the two scenes), plus
```
transitionDuration
```
.
```
className?: string
```
on the root.

每个组件都有命名为
```
Props
```
的接口（例如
```
BlurOutUpProps
```
）。
```
speed?: number
```
——全局时间倍数（默认值为1），计算方式为
```
frame * speed
```
。
文本组件：包含
```
fontSize
```
、
```
color
```
、
```
fontWeight
```
属性。
转场组件：接收
```
from
```
/
```
to
```
作为
```
ReactNode
```
（两个场景），以及
```
transitionDuration
```
属性。
根元素支持
```
className?: string
```
属性。

UI Primitives (

snap-cn-ui

)

UI原语（

snap-cn-ui

）

State-based, not

speed

-based:

state

(e.g.

"open"

"closed"

style

variant

size

theme?: Partial<SnapCnTheme>

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<SnapCnTheme>

属性。

打开/关闭/激活状态是时间线的纯函数（关键帧预设）。
组合模态层原语（对话框、警示对话框、侧边栏）时需搭配触发元素——参考每个组件的示例。

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}>
  <TextReveal text="Ship it in React" />
</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}>
  <TextReveal text="Ship it in React" />
</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.
Budget each Sequence around the component's natural length — the
```
Length
```
column in
```
components/index.md
```
(and each file's
```
Natural length
```
). Under-budgeting clips the animation; over-budgeting leaves dead air.
Tone matching: each catalog entry carries a
```
vibe
```
tag (
```
tech
```
/
```
premium
```
/
```
data
```
/
```
clean
```
/
```
playful
```
/
```
social
```
) — pick components whose vibe fits the brand.
Palette & fonts: stay within the library's tokens (
```
references/design.md
```
→ tokens) so your own elements don't clash.

标准画布：
```
1280×720 @ 30fps
```
。所有组件均基于该规格布局。
为每个Sequence分配与组件自然时长匹配的预算——
```
components/index.md
```
中的「时长」列（以及每个组件文件中的「自然时长」）。预算不足会截断动画；预算过多会出现空白片段。
风格匹配： 每个目录条目都带有
```
vibe
```
标签（
```
tech
```
/
```
premium
```
/
```
data
```
/
```
clean
```
/
```
playful
```
/
```
social
```
）——选择与品牌风格匹配的组件。
调色板与字体： 遵循库中的设计令牌（
```
references/design.md
```
→ 令牌），避免自定义元素与组件风格冲突。

Design defaults — avoid AI-slop

设计默认规则——避免AI式粗糙设计

When you write your own text, scene chrome, or cards (not the prebuilt components), keep it restrained:

No decorative
letter-spacing
on body/heading text you add.
No
text-transform: uppercase
/ ALL-CAPS defaults — prefer sentence case (
```
Launch
```
, not
```
LAUNCH
```
).
No gradient text-fills or decorative gradient washes — gradients only as intentional backgrounds.
No glow / colored drop-shadows or large blur radii (
```
blur > ~24px
```
, spread, multi-layer) — subtle 1px elevation only.

Exception: never strip these from components whose essence is the effect —

tracking-in

(letter-spacing),

mesh-gradient-bg

and social cards (gradients), and intentional elevation are all legitimate. The rules govern your additions, not the library.

Full do/avoid examples:

references/design.md

. For motion quality (timing, anticipation, staging, easing), see

references/motion-principles.md

当你编写自定义文本、场景框架或卡片（而非使用预构建组件）时，需保持克制：

不要为自定义正文/标题文本添加装饰性
letter-spacing
。
不要默认使用
text-transform: uppercase
/全大写——优先使用句首大写（例如
```
Launch
```
，而非
```
LAUNCH
```
）。
不要使用渐变文本填充或装饰性渐变图层——渐变仅可作为有意设计的背景。
不要使用发光/彩色投影或大模糊半径（
```
blur > ~24px
```
、扩散效果、多层投影）——仅可使用细微的1px层级效果。

例外情况： 不要移除那些以特效为核心的组件的相关属性——

tracking-in

（字符间距）、

mesh-gradient-bg

和社交卡片（渐变）、以及有意设计的层级效果均属合理用法。上述规则仅适用于你添加的自定义内容，而非库中组件。

完整的示例与避用说明请查看

references/design.md

。关于动效质量（时间控制、预备动作、场景布局、缓动效果），请查看

references/motion-principles.md

。

Gotchas (snapcn-specific)

常见陷阱（snapcn专属）

Transitions wrap two scenes — pass
```
from
```
/
```
to
```
as
```
ReactNode
```
, not as a static instance.
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.

转场组件需包裹两个场景——传递
```
from
```
/
```
to
```
作为
```
ReactNode
```
，而非静态实例。
终端滚动为即时效果——使用阶跃函数
```
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
```
references/components/index.md
```
; match the
```
vibe
```
tag to the brand and budget each
```
<Sequence durationInFrames>
```
around its natural length.
Check the quality bar — one accent, sentence-case kinetic type, real content, no glow halos, no feature-list enumeration, no
```
mesh-gradient-bg
```
. See
```
references/anatomy.md
```
§3.

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

确定策略——使用现成模板、组合组件或构建新组件。查看
```
references/anatomy.md
```
第1节。
遵循节奏框架——产品演示视频的节奏为：钩子→定位→产品展示→功能介绍→证明→行动号召（最后两步可选）。查看
```
references/anatomy.md
```
第2节。
使用对应方案——
```
references/archetypes/index.md
```
提供了不同类型视频的构建指南：内容约定（推导→询问→占位符）、时长变体、节奏→组件映射、以及完整的
```
<TransitionSeries>
```
骨架示例。
从
references/components/index.md
中为每个节奏点选择组件；确保组件的
```
vibe
```
标签与品牌匹配，并为每个
```
<Sequence durationInFrames>
```
分配与组件自然时长匹配的预算。
检查质量标准——仅使用一种强调色、句首大写动态文本、真实内容、无发光光晕、无功能列表枚举、不使用
```
mesh-gradient-bg
```
。查看
```
references/anatomy.md
```
第3节。

Reference

参考文档

```
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.
```
references/components/index.md
```
— router table (all components, grouped by category, with
```
Use for
```
/
```
Avoid for
```
). Open
```
references/components/<name>.md
```
for one component's full props, example, and use / don't-use notes.
```
references/design.md
```
— anti-slop design defaults (do/avoid) + design tokens (palette, fonts, canvas).
```
references/motion-principles.md
```
— motion-design principles adapted to snapcn + Remotion.
```
references/anti-patterns.md
```
— common generation mistakes and their fixes.

```
references/anatomy.md
```
——完整视频合成指南：策略（模板/组合/新建）、产品演示节奏框架、优质vs粗糙设计的质量标准。
```
references/archetypes/index.md
```
——不同类型视频的构建方案路由（旗舰产品演示+更新日志、功能发布、开源项目展示、CLI工具演示、客户见证合集、年度回顾、定价发布、Logo开场）：内容约定、时长变体、节奏→组件映射。
```
references/components/index.md
```
——组件路由表（所有组件按分类分组，标注「适用场景」/「避用场景」）。打开
```
references/components/<name>.md
```
查看单个组件的完整属性、示例及适用/避用说明。
```
references/design.md
```
——反粗糙设计的默认规则（示例与避用）+ 设计令牌（调色板、字体、画布）。
```
references/motion-principles.md
```
——适配snapcn与Remotion的动效设计原则。
```
references/anti-patterns.md
```
——常见生成错误及修复方案。",

snapcn

Original

Translation

snapcn

snapcn

Installation

安装

Add any component (namespaced shadcn registry)

添加任意组件（命名空间式shadcn注册表）

Component lands at components/snap-cn/blur-out-up.tsx

组件将被安装到 components/snap-cn/blur-out-up.tsx

Dependencies install automatically

依赖将自动安装

Two tiers

两个组件层级

Component categories

组件分类

Component patterns

组件模式

Animation tier (
`snapcn`
)

动画层级（
`snapcn`
）

UI Primitives (
`snap-cn-ui`
)

UI原语（
`snap-cn-ui`
）

Animation API

动画API

Composition structure

合成结构

Canvas & timing

画布与时间控制

Design defaults — avoid AI-slop

设计默认规则——避免AI式粗糙设计

Gotchas (snapcn-specific)

常见陷阱（snapcn专属）

Composing a video

视频合成流程

Reference

参考文档

snapcn

Original

Translation

snapcn

snapcn

Installation

安装

Add any component (namespaced shadcn registry)

添加任意组件（命名空间式shadcn注册表）

Component lands at components/snap-cn/blur-out-up.tsx

组件将被安装到 components/snap-cn/blur-out-up.tsx

Dependencies install automatically

依赖将自动安装

Two tiers

两个组件层级

Component categories

组件分类

Component patterns

组件模式

Animation tier (snapcn)

动画层级（snapcn）

UI Primitives (snap-cn-ui)

UI原语（snap-cn-ui）

Animation API

动画API

Composition structure

合成结构

Canvas & timing

画布与时间控制

Design defaults — avoid AI-slop

设计默认规则——避免AI式粗糙设计

Gotchas (snapcn-specific)

常见陷阱（snapcn专属）

Composing a video

视频合成流程

Reference

参考文档

Animation tier (
`snapcn`
)

动画层级（
`snapcn`
）

UI Primitives (
`snap-cn-ui`
)

UI原语（
`snap-cn-ui`
）