Snapcn

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

# Add any component (namespaced shadcn registry)
shadcn add @snapcn/text-reveal

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

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.

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.

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.

That is the whole registry — 27 items. 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.

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

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

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

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

Gotchas (snapcn-specific)

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

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.

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.