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

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