Remocn

remocn is a copy-paste component library for building videos in Remotion. Instead of writing every fade, wipe, and kinetic title from scratch, you npx shadcn add a polished primitive into your project and own the code. Built for solo builders and small teams who need a product demo video shipped today, not next week.

Rather direct the video than write it? Remocn Studio is a free, open-source macOS app where your own coding agent (Claude Code, Codex, GitHub Copilot or Grok) builds the video from remocn components while you watch the live preview.

Why remocn

Production-ready Remotion code: every component uses useCurrentFrame(), interpolate(), and spring() correctly. No Math.random() traps that break rendering. Own your code: components are copied into your project, not installed as a dependency. Tweak them however you like. Live previews: each component page mounts a real @remotion/player you can scrub frame-by-frame

Installation

Remotion is a prerequisite — set up a Remotion project first if you don't have one (npx create-video@latest). Then add any component from the registry:

npx shadcn@latest add @remocn/blur-reveal

Setup with AI

You need two things: an AI coding agent and an empty folder.

1. Get an agent. We recommend Claude Code, also works with ChatGPT, Opencode and others. 2. Open the agent in an empty folder and paste:

Set up a new Remotion video project in this folder, then install the remocn agent skill: npx skills add Remocn/remocn --yes. When you're done, start the preview studio so I can watch the video while we work

When a browser tab opens with an empty video player, you're ready. Pick a guide and make it yours.

Plugin for Claude Code and Codex

The remocn plugin bundles the skill with a /remocn:video workflow: brief → storyboard → install → compose → visual check → open in Remocn Studio.

/plugin install remocn --marketplace Remocn/remocn

In Codex: codex plugin marketplace add Remocn/remocn, then codex plugin add remocn@remocn.

Sponsors

remocn is free and MIT-licensed. These sponsors keep the registry growing and the renders fast.

Become a sponsor to get your logo on the landing page, in the docs sidebar and here.