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 initPick 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-inThis 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/rush-type @remocn/extrude-pop @remocn/fade-through @remocn/shared-axis-y @remocn/shared-axis-z @remocn/short-slide-right @remocn/kinetic-morph-text @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-mesh-gradient-dusk @remocn/shader-mesh-gradient-lagoon @remocn/shader-mesh-gradient-peach @remocn/shader-mesh-gradient-aurora @remocn/shader-mesh-gradient-lavender @remocn/shader-mesh-gradient-ember @remocn/shader-mesh-gradient-mint @remocn/shader-mesh-gradient-synthwave @remocn/shader-mesh-gradient-ink @remocn/shader-grain-gradient @remocn/shader-grain-gradient-sunrise @remocn/shader-grain-gradient-nebula @remocn/shader-grain-gradient-orb @remocn/shader-grain-gradient-horizon @remocn/shader-grain-gradient-blush @remocn/shader-grain-gradient-tide @remocn/shader-grain-gradient-arcade @remocn/shader-grain-gradient-dune @remocn/shader-grain-gradient-ultraviolet @remocn/shader-warp @remocn/shader-warp-silk @remocn/shader-warp-sunset @remocn/shader-warp-ocean @remocn/shader-warp-marble @remocn/shader-warp-acid @remocn/shader-warp-cream @remocn/shader-warp-deep-sea @remocn/shader-warp-rose-gold @remocn/shader-warp-storm @remocn/shader-swirl @remocn/shader-swirl-candy @remocn/shader-swirl-sunburst @remocn/shader-swirl-hypno @remocn/shader-swirl-neon @remocn/shader-swirl-tide @remocn/shader-swirl-citrus @remocn/shader-swirl-ember @remocn/shader-swirl-lilac @remocn/shader-swirl-retro @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/radial-burst @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/search-reveal @remocn/cursor-gravity @remocn/type-fossil @remocn/shader-seam @remocn/shader-text-reveal @remocn/inline-word-roll @remocn/shader-light-tunnel @remocn/shader-spiral-pass @remocn/truchet-flip @remocn/mondrian-split @remocn/bauhaus-build @remocn/squiggle @remocn/speed-lines @remocn/trim-burst @remocn/keystroke @remocn/code-morph @remocn/agent-run @remocn/selection-snap @remocn/echo-stack @remocn/type-wall @remocn/ring-text @remocn/period-drop @remocn/outline-trace @remocn/glyph-anatomy @remocn/stripe-type @remocn/path-ride @remocn/type-repeater @remocn/caption-core @remocn/caption-karaoke @remocn/caption-highlight-box @remocn/caption-active-pop @remocn/caption-word-pop @remocn/caption-bounce-in @remocn/caption-blur-in @remocn/caption-rise @remocn/caption-typewriter @remocn/caption-slot @remocn/caption-subtitle @remocn/caption-dim-progress @remocn/caption-underline @remocn/caption-scramble @remocn/caption-weight @remocn/caption-emoji @remocn/caption-speaker @remocn/caption-stack @remocn/caption-outline @remocn/caption-marker @remocn/caption-stamp @remocn/caption-handwrite @remocn/caption-redact @remocn/caption-prosody @remocn/caption-timeline @remocn/caption-teleprompter @remocn/caption-knockout @remocn/caption-slice @remocn/caption-cube @remocn/caption-split-flap @remocn/caption-label-maker @remocn/caption-drop @remocn/iris-wipe @remocn/venetian-blinds @remocn/paper-tear @remocn/pixel-sort @remocn/light-leak @remocn/orbit-lock @remocn/puzzle-snap @remocn/spotlight @remocn/neon-sign @remocn/inflate @remocn/liquid-fill @remocn/accordion-unfold @remocn/anamorphic-flare @remocn/pendulum-wave @remocn/flow-field @remocn/isometric-build @remocn/life-grid @remocn/string-art @remocn/topo-lines @remocn/phyllotaxis @remocn/hyperspace @remocn/parallax-depth @remocn/dolly-zoom @remocn/turntable @remocn/gravity-pile @remocn/cloth-reveal @remocn/exploded-view @remocn/tiny-planet @remocn/impact-shake @remocn/riso-print @remocn/line-boil @remocn/blueprint @remocn/duotone-beat @remocn/comic-panels @remocn/long-shadow @remocn/synthwave @remocn/brick-mosaic @remocn/x-ray-scan @remocn/gsh @remocn/toolbar-unfurl @remocn/glyph-relay @remocn/press-warp-dive @remocn/giant-mark-backdrop @remocn/macro-tab-name @remocn/cta-collapse-mark @remocn/node-trail @remocn/graph-relayout @remocn/letter-gate @remocn/device-grows-around @remocn/send-fountain @remocn/glow-born-card @remocn/multi-file-drop @remocn/rim-draw-card @remocn/heat-drain-reveal @remocn/tile-snake-loader @remocn/photo-caret @remocn/flank-roll-swap @remocn/light-burn-to-line @remocn/hot-slab-morph @remocn/noise-forge-sting @remocn/glyph-block-decode @remocn/word-burst-cards @remocn/cooling-type @remocn/focus-front-swap @remocn/macro-letter-pan @remocn/focus-pan-text @remocn/card-swipe-cover @remocn/caret-collapse @remocn/bloom-ring @remocn/beam-sweep @remocn/disc-pop @remocn/strobe-montage @remocn/band-open @remocn/headline-to-line @remocn/word-gap-media @remocn/caret-dolly @remocn/card-push-line @remocn/phrase-list-bridge @remocn/word-pullback @remocn/figure-reels @remocn/figure-to-label @remocn/drop-upload @remocn/macro-click @remocn/calendar-pick @remocn/button-to-card @remocn/prompt-swell @remocn/grid-to-app @remocn/leaderboard-climb @remocn/phone-trio @remocn/photo-halo @remocn/cover-ring @remocn/card-fan @remocn/tilt-settle-list @remocn/shards-to-grid @remocn/stat-rail @remocn/panel-split @remocn/flood-sting @remocn/riddle-clues @remocn/coy-denial @remocn/peek-shut @remocn/no-buts @remocn/in-proportion @remocn/exactly @remocn/which-means @remocn/chore-fold @remocn/name-gloss @remocn/price-page @remocn/free-as-in @remocn/the-tab @remocn/not-yet @remocn/moves-up @remocn/half-built @remocn/what-sticks @remocn/tldr-on-top @remocn/factor-out @remocn/post-script @remocn/rsvp @remocn/your-name-here @remocn/verbed @remocn/pitch-blanks @remocn/we-call-it @remocn/crunch @remocn/overnight @remocn/story-dip @remocn/out-of-context @remocn/answer-first @remocn/double-take @remocn/turnabout @remocn/run-on @remocn/loop-break @remocn/crew-of-one @remocn/they-are-you @remocn/and-you @remocn/edit-ripple @remocn/script-cut @remocn/known-terms @remocn/changed-mind @remocn/said-who @remocn/overheard @remocn/baton-word @remocn/cue-word @remocn/cut-off @remocn/beta-thanks @remocn/embargo-lift @remocn/plain-license @remocn/keep-words @remocn/whole-page @remocn/fine-print-up @remocn/looks-like-this @remocn/shot-answers @remocn/up-close @remocn/yes-run @remocn/week-shipped @remocn/a-to-z @remocn/carry-count @remocn/chunk-stack @remocn/spell-out @remocn/feather-settle @remocn/churn-count @remocn/bug-dock @remocn/two-hit @remocn/absorb-stack @remocn/layover @remocn/nonstop @remocn/on-approach @remocn/negation-drop @remocn/weight-cut @remocn/hook-uncurl @remocn/diminuendo @remocn/core-sum @remocn/cool-down @remocn/idea-set @remocn/row-count @remocn/spine-turn @remocn/packed-count @remocn/less-more @remocn/times-turn @remocn/stripe-count @remocn/window-trail @remocn/fuchidori-count @remocn/ruby-press @remocn/tategaki-turn @remocn/pitch-over @remocn/hot-stage @remocn/first-light @remocn/flash-count @remocn/pull-in @remocn/gear-shift @remocn/slide-doors @remocn/lean-count @remocn/shed-weight @remocn/serif-rise @remocn/module-count @remocn/roman-edition @remocn/single-stroke @remocn/slim-count @remocn/squeeze-out @remocn/edge-fit @remocn/smash-count @remocn/sequel-numeral @remocn/menu-pick @remocn/press-stat @remocn/unmask-line @remocn/point-hop @remocn/mono-settle @remocn/uncomment-line @remocn/enhance-count @remocn/mono-voice @remocn/beat-count @remocn/magnitude-push @remocn/prompt-restyle @remocn/block-swap @remocn/rewrite-bars @remocn/long-vowel @remocn/compact-stat @remocn/plus-open @remocn/res-climb @remocn/filler-cut @remocn/stem-stretch @remocn/pulse-line @remocn/lumen-count @remocn/width-lock @remocn/tall-count @remocn/pinned-word @remocn/zero-stretch @remocn/wake-wipe @remocn/comet-headline @remocn/indent-steps @remocn/point-expand @remocn/layout-swap @remocn/acronym-expand @remocn/diff-swap @remocn/heat-trace @remocn/thin-slab @remocn/stat-inline @remocn/launch-days @remocn/cut-stat @remocn/slash-wipe @remocn/light-signature @remocn/studio-reflection @remocn/flick-swap @remocn/introducing @remocn/feature-headline @remocn/before-after @remocn/feature-trio @remocn/magnet-letters @remocn/ruler-align @remocn/scissors-cut @remocn/tittle-drop @remocn/cursor-frame @remocn/caret-letter @remocn/point-intro @remocn/grid-cell @remocn/spotlight-text @remocn/border-beam @remocn/walkout-name @remocn/ko-count @remocn/play-of-the-game @remocn/t-minus @remocn/max-q @remocn/landing-confirmed @remocn/drop-timer @remocn/sold-out @remocn/got-em @remocn/ipo-open @remocn/candle-rally @remocn/chevron-run @remocn/high-score @remocn/boss-bar @remocn/achievement-pop @remocn/kill-feed @remocn/mvp-card @remocn/bracket-win @remocn/timing-tower @remocn/shot-clock @remocn/speed-trap @remocn/crash-zoom @remocn/pov-setup @remocn/speedrun-timer @remocn/round-slam @remocn/level-up @remocn/combo-counter @remocn/hook-punch @remocn/milestone-roll @remocn/duet-split @remocn/intelligence-glow @remocn/ghost-complete @remocn/query-cascade @remocn/liquid-word @remocn/oval-type @remocn/live-ticker @remocn/ticker-tape @remocn/price-slate @remocn/score-bug @remocn/versus-split @remocn/replay-wipe @remocn/bass-drop @remocn/escalate-cards @remocn/flip-sting @remocn/lights-out @remocn/italic-speed @remocn/split-flash @remocn/dynamic-letter @remocn/snap-click @remocn/scrub-reveal @remocn/aspect-slit @remocn/parallax-lockup @remocn/deadpan-box @remocn/stripe-mask @remocn/full-bleed-type @remocn/rep-stack @remocn/title-converge @remocn/macro-pan @remocn/split-match @remocn/bounce-logo @remocn/glyph-matrix @remocn/ndot-resolve @remocn/shape-morph-o @remocn/axis-flex @remocn/blink-cut @remocn/word-acts @remocn/depth-headline @remocn/speed-ramp-word @remocn/pass-swap @remocn/photo-fill-type @remocn/bracket-index @remocn/select-replace @remocn/wrapped-squash @remocn/rubberband-word @remocn/story-text @remocn/anagram-shuffle @remocn/word-ladder @remocn/hidden-word @remocn/column-reflow @remocn/word-insert @remocn/typo-fix @remocn/font-cycle @remocn/case-flip @remocn/path-text @remocn/ellipsis-resolve @remocn/letter-relay @remocn/stack-letters @remocn/weight-wave @remocn/kerning-snap @remocn/baseline-drop @remocn/scan-reveal @remocn/beam-split @remocn/strobe-words @remocn/torn-edge @remocn/squircle-wave @remocn/ring-burst @remocn/band-shift @remocn/tile-wave @remocn/glass-capsule @remocn/dot-type @remocn/flock-form @remocn/ring-align @remocn/word-stack @remocn/split-word @remocn/counter-reveal @remocn/slit-scan @remocn/moire-reveal @remocn/thread-weave @remocn/fourier-sum @remocn/cell-divide @remocn/hex-fill @remocn/log-rescale @remocn/off-the-charts @remocn/shape-pack @remocn/pattern-tile @remocn/line-cascade @remocn/hatch-shade @remocn/path-search @remocn/transit-lines @remocn/slope-chart @remocn/ridgeline @remocn/beeswarm @remocn/chart-morph @remocn/dumbbell-shift @remocn/stacked-shift @remocn/tally-marks @remocn/abacus-count @remocn/fraction-split @remocn/balance-beam @remocn/domino-run @remocn/spring-bars @remocn/dot-sort @remocn/flow-arrow @remocn/dot-map @remocn/sankey-flow @remocn/branch-tree @remocn/chord-ring @remocn/waterfall-chart @remocn/galton-stack @remocn/bubble-pack @remocn/treemap-split @remocn/venn-merge @remocn/fluted-glass @remocn/frosted-clear @remocn/embossed-mark @remocn/halftone-cut @remocn/column-slide @remocn/ring-cut @remocn/quadtree-mark @remocn/raster-paint @remocn/pixel-bars @remocn/bracket-focus @remocn/crosshair-lock @remocn/measure-dim @remocn/three-steps @remocn/number-split @remocn/radial-bars @remocn/radar-compare @remocn/concentric-scale @remocn/changelog-scroll @remocn/waveform-title @remocn/line-relief @remocn/sparkline-thread @remocn/area-compare @remocn/rank-climb @remocn/time-breakdown @remocn/index-list @remocn/grid-snap-poster @remocn/spec-sheet @remocn/toggle-on @remocn/rotary-dial @remocn/uptime-strip @remocn/quadrant-plot @remocn/streamgraph @remocn/clock-sweep @remocn/ruler-scrub @remocn/timer-duel @remocn/contribution-heatmap @remocn/distribution-shift @remocn/share-donut @remocn/unit-grid @remocn/led-ticker @remocn/ripple-mark @remocn/poster-crop @remocn/collab-lockup @remocn/tagline-justify @remocn/shape-cut @remocn/hairline-open @remocn/diagonal-split @remocn/slit-reveal @remocn/wireframe-to-final @remocn/dot-field-morph @remocn/feature-chips-flow @remocn/version-hero @remocn/benchmark-race @remocn/dot-globe @remocn/waitlist-swarm @remocn/signal-resolve @remocn/keycap-press @remocn/launch-date @remocn/light-trail-write @remocn/color-bars @remocn/grid-montage @remocn/stat-sequence @remocn/quote-hero @remocn/activity-rings @remocn/glass-lens @remocn/pill-morph @remocn/layered-cutout @remocn/neural-pulse @remocn/bokeh-title @remocn/block-city @remocn/flash-sweep @remocn/logo-construct @remocn/ink-bloom @remocn/gravity-grid @remocn/number-mosaic @remocn/growth-line @remocn/countdown @remocn/paper-plane @remocn/chaos-to-order @remocn/notification-avalanche @remocn/phone-scroll @remocn/screenshot-tour @remocn/ui-callout @remocn/theme-flip @remocn/testimonial-stack @remocn/upvote-burst @remocn/bento-build @remocn/pricing-reveal @remocn/url-bar-cta @remocn/table-filter @remocn/flow-builder @remocn/multiplayer-cursors @remocn/channel-reactions @remocn/deploy-pipeline @remocn/live-dashboard @remocn/file-dropzone @remocn/calendar-booking @remocn/ai-image-grid @remocn/device-morph @remocn/pr-merge @remocn/status-page @remocn/video-call @remocn/invite-team @remocn/timeline-editor @remocn/ride-tracking @remocn/mobile-paywall @remocn/sheet-formula @remocn/whats-new-modal @remocn/money-send @remocn/stock-scrub @remocn/card-create @remocn/reels-feed @remocn/swipe-deck @remocn/streak-reward @remocn/rating-laurel @remocn/ai-answer-sources @remocn/now-playing @remocn/year-in-review @remocn/video-watch-page @remocn/voice-agent @remocn/prompt-to-app @remocn/browser-extension @remocn/app-store-listing @remocn/live-activity @remocn/home-widget @remocn/cart-add @remocn/coupon-apply @remocn/invoice-paid @remocn/roadmap-timeline @remocn/analytics-funnel @remocn/world-signups @remocn/social-scheduler @remocn/feature-flag-rollout @remocn/audit-core @remocn/redline-measure @remocn/audit-boxes @remocn/scan-fix @remocn/token-tags @remocn/layout-guides @remocn/design-audit @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/select-menu @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-flowAdd 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.