Introduction

remocn is shadcn for Remotion. It is a registry of copy-paste video components (text animations, transitions, backgrounds, UI blocks, icons) that you add to a Remotion project with the shadcn CLI, plus an agent skill that teaches AI coding agents how to compose a video from them. Everything is MIT, and the code lands in your repo, not in node_modules.

If you searched for "remotion shadcn" or "shadcn remotion", this is the thing you were looking for.

npx shadcn@latest add @remocn/soft-blur-in

If you know shadcn/ui

The workflow is the one you already use. There is a components.json, there is npx shadcn add, and each component is a .tsx file copied into components/remocn/ that you own and edit. remocn is a namespaced registry, so components are addressed as @remocn/<name>.

What changes is the runtime. A shadcn button responds to a click. A remocn component is a pure function of useCurrentFrame(): it renders the same pixels for the same frame every time, which is what Remotion's headless renderer needs. There is no useState, no event handler, no CSS transition. Timing is expressed in frames, and every component page tells you how many frames its motion takes so you can budget a Sequence.

remocn ships two tiers of components:

• Animation tier (remocn): text reveals, scene transitions, shader and canvas backgrounds, UI-block simulations, icons that draw themselves in.
• UI tier (remocn-ui): familiar shadcn primitives (Button, Input, Checkbox, Select, Dialog) rebuilt so their states are scripted on the timeline instead of driven by the user.

If you know Remotion

npx create-video gives you a blank canvas and the right APIs. remocn gives you the parts that every product video needs and that you would otherwise rebuild each time: a blur-in for the headline, a push transition between scenes, a background that moves, a terminal that types. Each one already uses interpolate() and spring() correctly and avoids the traps that break deterministic rendering, such as Math.random() inside a frame.

The agent skill is the other half. It reads the component index live from this site, picks components by their use and avoid signals, budgets the timeline, and composes scenes in a consistent style. If you build videos with Claude Code, Cursor or a similar agent, the skill is the difference between "generate a Remotion video" and a video that looks shipped.

What remocn is not

• Not After Effects or a video editor. There is no timeline UI to drag things around in. You write or prompt code, and Remotion Studio previews the result.
• Not a hosted service. Nothing runs on remocn servers. No account, no runtime, no usage limits. Rendering happens on your machine or wherever you run Remotion.
• Not a fork of Remotion. Remotion is a prerequisite, and remocn is a set of components written against its public API. Remotion keeps its own license; remocn's own code is MIT.
• Not only AI chat components. The AI section recreates chat composers and CLI screens because product demos need them often, but it is one category among text, transitions, backgrounds, layout, UI blocks and templates.

remocn is an independent project. It is not affiliated with shadcn or with Remotion; it builds on the shadcn CLI and the Remotion library.

Quick start

You need a Remotion project. If you do not have one:

npx create-video@latest

Then initialize shadcn (if the project has no components.json) and add a component:

npx shadcn@latest init
npx shadcn@latest add @remocn/soft-blur-in

If you work through an AI agent, install the skill too:

npx skills add Remocn/remocn --skill remocn --yes

The Installation page covers the full flow, including the one-shot command that installs every component and the Add to Studio button for a running Remotion Studio.

remocn vs raw Remotion

Nothing here replaces Remotion. If you already have a component library of your own, remocn is a set of files to borrow from; if you are starting from a blank create-video, it is the fastest way to a first scene.

FAQ

Do I need to know how to code? Not necessarily, if you work through an AI coding agent. The guides walk through building a video with prompts. Without an agent, you need to be comfortable with React and TypeScript.

Do I need After Effects or a video editor? No. Everything happens in your editor and a browser preview.

Is it free? remocn is MIT licensed. Components copy onto your machine and stay yours.

Does it work with any AI agent? The skill installs through skills.sh into agents that load skills, Claude Code among them. The components themselves are plain Remotion code and work with any agent or no agent at all.

Is this the official shadcn registry for Remotion? No. It is a community registry that uses the shadcn CLI and registry format. shadcn and Remotion are separate projects with their own maintainers.

What's next

• Installation: add remocn to an existing Remotion project
• Agent Skill: teach your AI agent to compose videos with remocn
• Components: every component, grouped by category
• Homepage: see the kind of video remocn is built for