Installation

Add remocn to an existing Remotion project

remocn assumes you already have Remotion installed. If you don't, run npx create-video@latest first.

1. Initialize shadcn

If your project doesn't already have a components.json, run:

npx shadcn@latest init

Pick the defaults: remocn components are framework-agnostic and only need the path aliases.

2. Add a component

$ pnpm dlx shadcn@latest add @remocn/soft-blur-in

This copies soft-blur-in.tsx into components/remocn/ (or wherever your components.json points).

Install everything

Want the whole library at once? Copy this command to add every remocn component in a single run.

$ pnpm dlx shadcn@latest add @remocn/soft-blur-in @remocn/per-character-rise @remocn/bottom-up-letters @remocn/top-down-letters @remocn/spring-scale-in @remocn/micro-scale-fade @remocn/scale-down-fade @remocn/blur-out-up @remocn/focus-blur-resolve @remocn/lens-zoom @remocn/line-by-line-slide @remocn/per-word-crossfade @remocn/word-stream @remocn/word-push @remocn/sheen-slide-in @remocn/squeeze-in @remocn/fog-rise @remocn/caret-swap @remocn/zoom-words @remocn/centered-word-build @remocn/inline-pill-takeover @remocn/typed-split-wipe @remocn/shadow-sweep-text @remocn/outline-fill-track-text @remocn/gradient-scale-cut-text @remocn/extrude-pop @remocn/fade-through @remocn/shared-axis-y @remocn/shared-axis-z @remocn/short-slide-right @remocn/kinetic-warp @remocn/kinetic-center-build @remocn/short-slide-down @remocn/typewriter @remocn/inline-highlight @remocn/stretch-in @remocn/strikethrough-replace @remocn/staggered-fade-up @remocn/mask-reveal-up @remocn/tracking-in @remocn/shimmer-sweep @remocn/marker-highlight @remocn/slot-machine-roll @remocn/matrix-decode @remocn/rgb-glitch-text @remocn/infinite-marquee @remocn/shader-mesh-gradient @remocn/shader-grain-gradient @remocn/shader-warp @remocn/shader-swirl @remocn/shader-water @remocn/shader-spiral @remocn/shader-liquid-metal @remocn/shader-color-panels @remocn/shader-neuro-noise @remocn/shader-perlin-noise @remocn/shader-simplex-noise @remocn/shader-voronoi @remocn/shader-dot-orbit @remocn/shader-dithering @remocn/shader-god-rays @remocn/shader-smoke-ring @remocn/shader-metaballs @remocn/shader-pulsing-border @remocn/simulated-cursor @remocn/swirl-dissolve @remocn/dither-dissolve @remocn/perlin-dissolve @remocn/smoke-dissolve @remocn/wave-wipe @remocn/ripple-zoom @remocn/gooey-morph @remocn/grain-dissolve @remocn/warp-dissolve @remocn/whip-pan @remocn/push-through @remocn/focus-pull @remocn/zoom-blur @remocn/rolodex-flip @remocn/value-swap @remocn/chat-to-preview-layout @remocn/animated-line-chart @remocn/animated-bar-chart @remocn/terminal-simulator @remocn/terminal-cursor-zoom @remocn/glass-code-block @remocn/glass-code-walk @remocn/perspective-marquee @remocn/perspective-squeeze @remocn/ecosystem-constellation @remocn/live-code-compilation @remocn/infinite-bento-pan @remocn/github-sponsors @remocn/github-stars @remocn/number-wheel @remocn/rolling-number @remocn/x-follow-card @remocn/x-followers-overview @remocn/claude-chat @remocn/chat-gpt @remocn/v0 @remocn/claude-code @remocn/opencode @remocn/chromatic-wave @remocn/confetti @remocn/backdrop @remocn/drift @remocn/stage @remocn/logo-enter @remocn/handwrite @remocn/ink-underline @remocn/paper-wobble @remocn/ink-arrow @remocn/paper-sticker @remocn/polaroid @remocn/hand-count @remocn/brush @remocn/crumple-toss @remocn/scribble-circle @remocn/check-list @remocn/page-turn @remocn/stop-motion @remocn/ascii-dissolve @remocn/caret-wipe @remocn/icon-scatter @remocn/shader-caustics @remocn/shader-gem-smoke @remocn/shader-strata @remocn/shader-weave @remocn/reel @remocn/scene-motion @remocn/slide-swap @remocn/spring-settle @remocn/canvas-presentation @remocn/ember-burn @remocn/displacement @remocn/hologram @remocn/security-cam @remocn/tv-power-off @remocn/camera-lens @remocn/underwater-ripple @remocn/halftone-print @remocn/ascii-render @remocn/pixelate-region @remocn/sustained-glitch @remocn/crt-screen @remocn/vhs-filter @remocn/grid-wave @remocn/particle-dissolve @remocn/glitch-cut @remocn/remocn-ui @remocn/spinner @remocn/caret @remocn/button @remocn/accordion @remocn/alert-dialog @remocn/dialog @remocn/sheet @remocn/drawer @remocn/checkbox @remocn/radio @remocn/switch @remocn/input @remocn/blur-in @remocn/field @remocn/select-item @remocn/select @remocn/dropdown-menu-item @remocn/tabs @remocn/dropdown-menu @remocn/cursor @remocn/toast @remocn/command-menu-item @remocn/command-menu @remocn/tooltip @remocn/progress @remocn/skeleton-block @remocn/skeleton @remocn/slider @remocn/combobox @remocn/popover @remocn/context-menu @remocn/toggle-group @remocn/stepper @remocn/resizable @remocn/signup-flow @remocn/ai-prompt-flow @remocn/checkout-flow @remocn/onboarding-stepper-flow @remocn/settings-toggle-flow @remocn/message-bubble @remocn/typing-indicator @remocn/chat-flow @remocn/telegram-chat-flow @remocn/imessage-chat-flow

Add straight to Remotion Studio

If a Remotion Studio (4.0.502 or newer) is running locally, most components can skip the CLI entirely. Component pages show an Add to Studio button next to the preview — it finds your running Studio and drops the component into the active composition as source code. The drag handle beside it does the same thing by drag and drop, so you can place the element on the timeline yourself. Icons work the same way from the icons gallery.

Either way the result matches npx shadcn add: the source lands in your project and is yours to edit. On top of that, elements arrive with editable controls — the same knobs each docs page shows (text, colors, timings, speed) appear as native controls in the Studio sidebar, alongside the standard timeline and transform handles. Compositions and components that build on other remocn components install through the CLI only.

3. Use it in a Remotion composition

import { Composition } from "remotion";
import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
 
export const RemotionRoot = () => (
  <Composition
    id="HelloWorld"
    component={SoftBlurIn}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
    defaultProps={{ text: "Hello, world" }}
  />
);

That's it. Render with npx remotion render HelloWorld out.mp4.

Introduction

What remocn is and who it's for

Agent Skill

Install the remocn agent skill with skills.sh so your AI generates better Remotion videos