emocn
GitHub1.7k
Get started

Introduction

Remocn is shadcn/ui for video: a shadcn registry of 932 MIT-licensed Remotion components, plus an agent skill. Add them with the shadcn CLI; the code lives in your repo.

Copy-paste components

shadcn/ui-style UI primitives, text animations, transitions, backgrounds 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.

shadcn/ui for video

Remocn works for video the way shadcn/ui works for interface components. It ships two tiers, and both install with npx shadcn@latest add @remocn/<name>.

UI tier

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

Animation tier

remocn

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.

  1. 1Reads the component index live from this site
  2. 2Picks components by their use and avoid signals
  3. 3Budgets the timeline
  4. 4Composes scenes in a consistent style
The skill is the difference between“generate a Remotion video”a video that looks shipped

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. 1

    Start from a Remotion project

    You need one. If you do not have it yet, create it:
    $ npx create-video@latest
  2. 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. 3

    Install the agent skill

    Optional. Do it if you work through an AI agent.
    $ npx skills add Remocn/remocn --skill remocn --yes
  4. 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

Remocn vs raw Remotion

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

Is there something like shadcn/ui but for video?

Yes. Remocn is shadcn/ui for video: a shadcn registry of Remotion components that you add with npx shadcn@latest add @remocn/<name>, the same way shadcn/ui works for interface components. The files are copied into your project under MIT, and the result renders as video with Remotion. It makes videos rather than playing them, so it is not a video player component library.

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 there a Remocn MCP server?

Yes. The Remocn MCP server is hosted at https://remocn.dev/mcp with no auth. It lets Claude Code, Cursor, Codex and other MCP clients search components, read their docs, plan a video and preview a component. It does not render video.

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