Back to Details

snapcn

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

snapcn

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)

Add any component (namespaced shadcn registry)

shadcn add @snapcn/text-reveal
shadcn add @snapcn/text-reveal

Component lands at components/snap-cn/text-reveal.tsx

Component lands at components/snap-cn/text-reveal.tsx


`@snapcn/<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.

`@snapcn/<name>` 是规范的命名空间形式。它不需要 `registries` 条目——该命名空间
位于 shadcn registry 目录中。普通 registry URL
`https://snapcn.dev/r/<name>.json` 同样可用。

Dependencies install automatically

依赖项自动安装

Many components pull others via 
registryDependencies
— 
shadcn
installs them transitively. For example, 
shadcn add @snapcn/search-typing
also pulls 
@snapcn/snap-cn-ui
, 
@snapcn/input
and 
@snapcn/caret
.
  • @snapcn/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 @snapcn/search-typing
还会引入 
@snapcn/snap-cn-ui
、
@snapcn/input
和 
@snapcn/caret
。
  • @snapcn/snap-cn-ui
     是共享核心库（timeline-fold hook、theme context、color math）。 大多数 UI Primitives 都依赖它。你很少需要直接安装它。

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. Two ship today: 
    input
    and 
    caret
    . State-based props (
    state
    , 
    style
    , 
    size
    , 
    theme
    ) — the open/typing state is a pure function of the timeline. No 
    speed
    prop.     Built on 
    @snapcn/snap-cn-ui
    .
snapcn 包含两类组件——它们的 API 不同：
  • 动画层级（
    snapcn
    ）——文字动画、转场、背景、UI 区块模拟、 品牌/社交卡片、完整 composition。帧驱动。共享 props：
    speed
    （时间倍增器）， 文字组件还支持：
    fontSize
    、
    color
    、
    fontWeight
    。
  • UI Primitives（
    snap-cn-ui
    ）——由时间线驱动的 shadcn 风格 primitive。目前提供两个： 
    input
    和 
    caret
    。基于状态的 props（
    state
    、
    style
    、
    size
    、
    theme
    ）——打开/输入状态 是时间线的纯函数。没有 
    speed
    prop。     基于 
    @snapcn/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.
CategoryTierComponents
Text & Titles
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
Captions
snapcn
word-captions
, 
karaoke-captions
AI Chat Input
snapcn
prompt-send
, 
search-typing
, 
prompt-zoom
, 
answer-stream
, 
answer-highlight
, 
agent-steps
Screens & Devices
snapcn
phone-frame
, 
laptop-frame
, 
terminal-simulator
, 
screen-recording
, 
cursor-track
Logos
snapcn
logo-assemble
, 
logo-flicker
, 
logo-collapse
, 
logo-drift
, 
block-wordmark
, 
wordmark-cut
Scenes
snapcn
announce-title
, 
hero-launch
, 
orbit-gallery
, 
moodboard-reveal
, 
status-cycle
, 
count-grid
, 
roster-grant
, 
orb-swarm
, 
reel-collage
, 
card-rail
Social Proof
snapcn
follower-rush
, 
channel-thread
Effects
snapcn
pulsing-border
UI Primitives
snap-cn-ui
input
, 
caret
(+ 
snap-cn-ui
, the shared core lib)
That is the whole free registry — 47 items (the live list is always 
https://snapcn.dev/llms.txt?ref=skill-snapcn
; 50 more are Pro, see below). There are no shaders, no standalone transition components, no chart or social-card components, and no shadcn primitive beyond 
input
and 
caret
. If a scene needs one, build it (
references/anatomy.md
§1) — do not emit a 
shadcn add
for a name that is not in this table. 
references/components/index.md
maps the older names that no longer install.
根据你要构建的内容进行选择。目录采用每个组件一个文件的形式，位于 
references/components/
下。请从 
references/components/index.md
开始——它是一张按 以下类别分组的路由表，每个组件都附有 适用场景 / 避免用于 提示。先浏览它， 挑选候选组件，然后只打开所需的 
references/components/<name>.md
文件（完整 props、 示例以及所有适用/不适用说明）。不要读取每个文件。
类别层级组件
文字与标题
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
）
以上就是全部免费 registry——共 47 项（实时列表始终为 
https://snapcn.dev/llms.txt?ref=skill-snapcn
；另外还有 50 个 Pro 组件，详见下文）。这里没有 shader、 没有独立转场组件、没有图表或社交卡片组件，除 
input
和 
caret
外也没有其他 shadcn primitive。 如果场景需要其中某类组件，请自行构建（
references/anatomy.md
§1）——不要为表中不存在的名称 生成 
shadcn add
命令。
references/components/index.md
映射了已无法安装的旧名称。

Component patterns

组件模式

Conventions differ by tier — don't assume animation-tier props on a primitive.
不同层级的约定不同——不要将动画层级的 props 套用于 primitive。

Animation tier (
snapcn
)

动画层级（
snapcn
）

  • Named 
    Props
    interface per component (e.g. 
    TextRevealProps
    ).
  • speed?: number
    — global time multiplier (default 
    1
    ), applied as 
    frame * speed
    .
  • Text components: 
    fontSize
    , 
    color
    , 
    fontWeight
    .
  • Scene-to-scene transitions are not in this registry — use Remotion's own 
    @remotion/transitions
    (
    slide
    , 
    wipe
    , 
    fade
    , 
    flip
    ) inside a 
    <TransitionSeries>
    .
  • className?: string
    on the root.
  • 每个组件都定义命名的 
    Props
    interface（例如 
    TextRevealProps
    ）。
  • speed?: number
    ——全局时间倍增器（默认值为 
    1
    ），按 
    frame * speed
    应用。
  • 文字组件：
    fontSize
    、
    color
    、
    fontWeight
    。
  • 场景之间的转场 不在 此 registry 中——请在 
    <TransitionSeries>
    内使用 Remotion 自带的 
    @remotion/transitions
    （
    slide
    、
    wipe
    、
    fade
    、
    flip
    ）。
  • 根节点支持 
    className?: string
    。

UI Primitives (
snap-cn-ui
)

UI Primitives（
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>
    。
  • 打开/关闭/激活状态是时间线的纯函数（关键帧预设）。
  • 将模态层 primitive（dialog、alert-dialog、drawer）与触发元素组合——请参阅 每个组件的示例。

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

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

Composition structure

Composition 结构

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
    中的 
    Length
    列（以及每个文件中的 
    Natural length
    ）。时长不足会截断动画； 时长过长会留下无效空白。
  • **风格匹配：**每个目录条目都带有一个 
    vibe
    标签（
    tech
    /
    premium
    /
    data
    /
    clean
    / 
    playful
    /
    social
    ）——选择与品牌风格相符的组件。
  • **调色板与字体：**遵循组件库的 tokens（
    references/design.md
    → tokens），避免你自己的 元素产生视觉冲突。

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 — 
word-flip
's gradient word, 
block-wordmark
's colour deck, 
announce-title
's glow, 
pulsing-border
itself, and the caption presets' heavy outlines 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
    / ALL-CAPS    ——优先采用 sentence case（使用 
    Launch
    ，而不是 
    LAUNCH
    ）。
  • 不要使用渐变文字填充或装饰性渐变蒙层——仅将渐变有意用于背景。
  • 不要使用发光、彩色投影或较大的模糊半径（
    blur > ~24px
    、spread、多层阴影）——仅使用轻微的 1px elevation。
**例外：**如果某项效果本身就是组件的核心，不要将其移除——
word-flip
的渐变文字、 
block-wordmark
的色块组合、
announce-title
的发光效果、
pulsing-border
本身， 以及字幕预设的粗描边都属于合理效果。这些规则只约束 你的新增内容， 而不是组件库本身。
完整的推荐/避免示例见 
references/design.md
。有关动效质量（时间节奏、预备动作、 编排、缓动），请参阅 
references/motion-principles.md
。

Gotchas (snapcn-specific)

注意事项（snapcn 特有）

  • No transition components ship — a scene change is 
    <TransitionSeries.Transition>
    from 
    @remotion/transitions
    , not a snapcn component. 
    text-swap
    swaps a line, not a scene.
  • 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 Remotion's own skills, not this one: 
npx skills add remotion-dev/skills
.
  • 不提供转场组件——场景切换应使用 
    @remotion/transitions
    提供的 
    <TransitionSeries.Transition>
    ，而不是 snapcn 组件。
    text-swap
    替换的是 一行文字，而不是场景。
  • 终端滚动是瞬时的——使用阶跃函数 
    translateY
    ，绝不要用 spring/ease 实现滚动。
  • 分栏布局需要 
    overflow: hidden
    ——防止宽度动画期间内容布局损坏。
  • 光标闪烁必须是确定性的——使用 
    Math.floor(frame / 15) % 2 === 0
    ，不要使用 interval。
  • 静态文件应放在 
    public/
    中    ——通过 
    staticFile('cursor.svg')
    加载，不要使用 import。
  • 社交卡片可离线渲染——
    avatarUrl=""
    / 
    coverUrl=""
    会回退为渐变；不会发起 fetch。
通用 Remotion 规则（禁止使用 
Math.random()
、禁止使用 
setInterval
、动画应作用于 
transform
而非 
top
/
left
、 渲染前加载字体）位于 Remotion 自身的 skills 中，而不在本 skill 中： 
npx skills add remotion-dev/skills
。

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"):
  1. Decide the strategy — ready template vs compose from components vs build a new component. See 
    references/anatomy.md
    §1.
  2. Follow the beats — a product demo is Hook → Positioning → Product reveal → Features → Proof → CTA (last two optional). See 
    references/anatomy.md
    §2.
  3. 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.
  4. 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.
  5. Check the quality bar — one accent, sentence-case kinetic type, real content, no glow halos, no feature-list enumeration, no decorative gradient wash behind the type. See 
    references/anatomy.md
    §3.
不要堆砌组件——应编排成一个完整叙事。当用户要求构建完整视频（“制作产品演示”、 “更新日志视频”、“为落地页制作片头”）时：
  1. 确定策略——使用现成模板、从组件组合，或构建新组件。请参阅 
    references/anatomy.md
    §1。
  2. 遵循节拍——产品演示的结构是：开场钩子 → 定位 → 产品揭晓 → 功能 → 佐证 → 行动号召（最后两项可选）。请参阅 
    references/anatomy.md
    §2。
  3. 使用构建方案——
    references/archetypes/index.md
    会路由到不同类型的构建方案：内容契约 （推断 → 询问 → 占位符）、时长变体、节拍→组件槽位，以及可直接套用的 
    <TransitionSeries>
    skeleton。
  4. 为每个节拍选择组件——从 
    references/components/index.md
    中选择；让 
    vibe
    标签与 品牌保持一致，并为每个 
    <Sequence durationInFrames>
    预留接近其自然长度的时长。
  5. 检查质量标准——单一强调色、采用 sentence case 的动态排版、真实内容、无光晕、 不以清单形式罗列功能、文字背后不使用装饰性渐变蒙层。请参阅 
    references/anatomy.md
    §3。

Workflows

工作流

For a whole video, install the workflow skill for the job. Each one composes these components beat by beat with a composition that typechecks and renders:
  • npx skills add snapcndev/snapcn --skill remotion-launch-video
    : launch films, announcements, Product Hunt / X promos.
  • npx skills add snapcndev/snapcn --skill remotion-product-demo
    : walkthroughs from a real screen recording, CLI and AI-app demos.
  • npx skills add snapcndev/snapcn --skill remotion-motion-graphics
    : kinetic type, logo stings, stats and short openers.
  • npx skills add snapcndev/snapcn --skill remotion-kinetic-typography
    : animated text and title cards.
  • npx skills add snapcndev/snapcn --skill remotion-logo-animation
    : logo reveals, intro and outro stings.
  • npx skills add snapcndev/snapcn --skill remotion-explainer-video
    : narrated explainers with burned-in captions.
对于完整视频，请安装适合具体任务的工作流 skill。每个工作流都会逐个节拍编排这些组件， 并生成可通过类型检查且能够渲染的 composition：
  • 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

snapcn Pro

50 more components (
version-drop
, 
library-flight
, 
read-through
, 
focus-pull
, 
tap-through
, 
checkout-push
, 
comment-storm
, 
tally-rise
and more), the templates, and the snapcn MCP, which lets your agent search the registry and read every component's real props. Pro components install like free ones once 
components.json
sends the key (three lines on https://snapcn.dev/account?ref=skill-snapcn); the MCP is 
claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY
. Plans: https://snapcn.dev/docs/pricing?ref=skill-snapcn
Not ready for Pro? One Pro component, Manifesto, is free for a confirmed email: https://snapcn.dev/docs/pricing?ref=skill-snapcn#free
另外 50 个组件（
version-drop
、
library-flight
、
read-through
、
focus-pull
、 
tap-through
、
checkout-push
、
comment-storm
、
tally-rise
等）、模板以及 snapcn MCP。 你的 Agent 可以通过 MCP 搜索 registry 并读取每个组件的实际 props。在 
components.json
发送密钥后， Pro 组件的安装方式与免费组件相同（只需在 https://snapcn.dev/account?ref=skill-snapcn 中填写三行）； 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

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
    ——编排完整视频：策略（模板/组合/新建）、产品演示节拍，以及“优质与粗制滥造”的质量标准。
  • references/archetypes/index.md
    ——按视频类型路由到具体构建方案（产品演示旗舰版与更新日志、功能公告、OSS 展示、CLI 工具演示、用户证言集锦、年度回顾、价格揭晓、Logo 短片）：内容契约、时长变体、节拍→槽位映射。
  • references/components/index.md
    ——路由表（按类别列出所有组件，并标注 适用场景 / 避免用于）。打开 
    references/components/<name>.md
    可查看单个组件的完整 props、示例以及适用/不适用说明。
  • references/design.md
    ——避免粗制滥造的设计默认值（推荐/避免项）以及设计 tokens（调色板、字体、画布）。
  • references/motion-principles.md
    ——适配 snapcn + Remotion 的动效设计原则。
  • references/anti-patterns.md
    ——常见的生成错误及其修复方式。