Installation · remocn

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/line-by-line-slide @remocn/per-word-crossfade @remocn/fade-through @remocn/shared-axis-y @remocn/shared-axis-z @remocn/short-slide-right @remocn/kinetic-center-build @remocn/short-slide-down @remocn/typewriter @remocn/inline-highlight @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/mesh-gradient-bg @remocn/dynamic-grid @remocn/simulated-cursor @remocn/directional-wipe @remocn/device-mockup-zoom @remocn/zoom-through-transition @remocn/chat-to-preview-layout @remocn/animated-line-chart @remocn/animated-bar-chart @remocn/terminal-simulator @remocn/terminal-cursor-zoom @remocn/code-diff-wipe @remocn/drag-and-drop-flow @remocn/progress-steps @remocn/data-flow-pipes @remocn/code-accordion @remocn/glass-code-block @remocn/glass-code-walk @remocn/spotlight-card @remocn/perspective-marquee @remocn/frosted-glass-wipe @remocn/spatial-push @remocn/grid-pixelate-wipe @remocn/chromatic-aberration-wipe @remocn/hero-device-assemble @remocn/ecosystem-constellation @remocn/ai-generation-canvas @remocn/live-code-compilation @remocn/landing-code-showcase @remocn/dashboard-populate @remocn/terminal-to-browser-deploy @remocn/browser-flow @remocn/pricing-tier-focus @remocn/infinite-bento-pan @remocn/tool-menu-slide-in @remocn/image-expand-to-fullscreen @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/confetti @remocn/backdrop @remocn/logo-enter @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.