Introduction

What Remocn is: a shadcn-style component registry for Remotion plus an agent skill. Copy-paste video components, MIT, code lives in your repo.

Copy-paste components

Text animations, transitions, backgrounds, UI blocks and icons, added to a Remotion project with the shadcn CLI.

Plus an agent skill

Teaches AI coding agents how to compose a video from those components.

MIT, code in your repo

Everything is MIT. Files are copied into your repo, where you own and edit them.

components/remocn/

Add your first component

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

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

If you know shadcn/ui

The workflow is the one you already use. Remocn is a namespaced registry, so components are addressed by name and copied in as files you own and edit.

components.jsonnpx shadcn add @remocn/<name>components/remocn/<name>.tsx

What changes is the runtime

Same button, two runtimes

In the browserContinue

A shadcn button

Responds to a click.

useStateonClicktransition

In the rendererContinueContinueContinue03060

A Remocn button

Same pixels for the same frame, every time.

useCurrentFrame()

Timing is expressed in frames. Every component page tells you how many frames its motion takes, so you can budget a Sequence.

If you know Remotion

A fresh Remotion project gives you a blank canvas and the right APIs. Remocn gives you the parts every product video needs, which you would otherwise rebuild each time.

Each one already uses the Remotion APIs correctly and avoids the traps that break deterministic rendering.

interpolate()spring()Math.random()inside a frame

The agent skill is the other half

For anyone who builds videos with Claude Code, Cursor or a similar agent.

1Reads the component index live from this site
2Picks components by their use and avoid signals
3Budgets the timeline
4Composes scenes in a consistent style

The skill is the difference between“generate a Remotion video”a video that looks shipped

Two tiers of components

Remocn ships two tiers of components. Both install the same way, as files in your repo.

Animation tier

remocn

UI tier

remocn-ui

Familiar shadcn primitives rebuilt so their states are scripted on the timeline instead of driven by the user.

What Remocn is not

Not After Effects or a video editorThere is no timeline UI to drag things around in. You write or prompt code, and Remotion Studio previews the result.
Not a hosted serviceNothing 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 RemotionRemotion 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 componentsThe 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

1
Start from a Remotion project
You need one. If you do not have it yet, create it:
```
$ npx create-video@latest
```
2
Initialize shadcn and add a component
Run init only if the project has no components.json yet.
```
$ npx shadcn@latest init$ npx shadcn@latest add @remocn/soft-blur-in
```
3
Install the agent skill
Optional. Do it if you work through an AI agent.
```
$ npx skills add Remocn/remocn --skill remocn --yes
```
4
Go further with the plugin in Claude Code or Codex
The plugin carries the skill plus a workflow that plans, builds and checks a whole video from a one-line brief.
```
/remocn:video
```

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.

Installation

Raw RemotionRemotion + RemocnStarting pointEmpty compositionComposition plus a catalog of ready componentsAnimation codeWritten per projectCopied in, then edited like any file you ownTimingDecided per elementEach component states its natural length in framesAI agentsGeneric Remotion knowledgeSkill with catalog access, timing rules and scene recipesDependencyRemotionRemotion, same as before. Remocn adds no runtime

Starting pointRaw RemotionEmpty compositionComposition plus a catalog of ready components

Animation codeRaw RemotionWritten per projectCopied in, then edited like any file you own

TimingRaw RemotionDecided per elementEach component states its natural length in frames

AI agentsRaw RemotionGeneric Remotion knowledgeSkill with catalog access, timing rules and scene recipes

DependencyRaw RemotionRemotionRemotion, same as before. Remocn adds no runtime

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 project, 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.