snapcn

Copy-paste components for Remotion videos. Components install via

shadcn

and land in

components/snap-cn/

— you own the code.

Installation

Prerequisites: a Remotion project (

npx create-video@latest

bash

# Add any component (namespaced shadcn registry)
shadcn add @snap-cn/blur-out-up

# Component lands at 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.

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.

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
```
.

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` …)

Component patterns

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

Animation tier (

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.

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.

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

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>

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.

Design defaults — avoid AI-slop

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

Gotchas (snapcn-specific)

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.

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.

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.

snapcn

NPX Install

Tags

SKILL.md Content

snapcn

Installation

Dependencies install automatically

Two tiers

Component categories

Component patterns

Animation tier (
`snapcn`
)

UI Primitives (
`snap-cn-ui`
)

Animation API

Composition structure

Canvas & timing

Design defaults — avoid AI-slop

Gotchas (snapcn-specific)

Composing a video

Reference

snapcn

NPX Install

Tags

SKILL.md Content

snapcn

Installation

Dependencies install automatically

Two tiers

Component categories

Component patterns

Animation tier (snapcn)

UI Primitives (snap-cn-ui)

Animation API

Composition structure

Canvas & timing

Design defaults — avoid AI-slop

Gotchas (snapcn-specific)

Composing a video

Reference

Animation tier (
`snapcn`
)

UI Primitives (
`snap-cn-ui`
)