remocn

remocn

Copy-paste components for Remotion videos. Components install via shadcn and land in components/remocn/ — you own the code.

Installation

Prerequisites: a Remotion project (npx create-video@latest).

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

# Component lands at components/remocn/blur-out-up.tsx

@remocn/<name> is the canonical namespaced form (configured under registries in components.json). The plain registry URL https://remocn.dev/r/<name>.json also works.

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.

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.

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	remocn	Reveal/replace/emphasize text (typewriter, blur-out-up, tracking-in, rolling-number, shimmer-sweep…)
Backgrounds & Effects	remocn	Animated foundations, cursors, one-shot effects (simulated-cursor, confetti, backdrop)
Shaders	remocn	WebGL shader backdrops, frame-driven for deterministic renders (shader-mesh-gradient, shader-warp, shader-voronoi, shader-god-rays, shader-metaballs…)
Transitions	remocn	TransitionSeries presentations between two scenes (whip-pan, push-through, focus-pull, grain-dissolve, wave-wipe…)
UI Blocks	remocn	Interface sims for product demos (terminal-simulator, glass-code-block, animated-bar-chart, progress-steps…)
AI & Social Cards	remocn	Brand/product card scenes (chat-gpt, claude-code, v0, github-stars, x-follow-card…)
UI Primitives	remocn-ui	shadcn-style primitives for video (button, dialog, select, command-menu, tooltip…)