Remocn — Copy-Paste Components for Remotion Videos

Making a product demo video is usually a week-long project: fiddling with fades, wipes, and kinetic titles in an editor, fighting with keyframes, and exporting a dozen times before it looks right.

Remocn exists to make that a same-day task. It’s a copy-paste component library for Remotion ↗ — the React-based video framework — with production-ready animations, transitions, backgrounds, and scenes that you add with a single command and then own completely.

What is 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 add a polished primitive into your project with npx shadcn add, and the code becomes yours.

It’s built for solo builders and small teams who need a product demo video shipped today, not next week.

Why Remocn?#

Production-Ready Code#

Every component uses useCurrentFrame(), interpolate(), and spring() correctly. No Math.random() traps that break rendering when frames change. The components are engineered to work reliably in Remotion’s deterministic render pipeline.

Own Your Code#

Components are copied into your project, not installed as a dependency. There’s no black box — tweak them however you like. Change colors, timing, easing, layout — everything is right there in your codebase.

Live Previews#

Each component page mounts a real @remotion/player that you can scrub frame-by-frame. You see exactly what the animation does before you add it — no surprises after install.

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

The component — and its dependencies — are copied directly into your project, ready to tweak.

Setup with AI#

Remocn is designed to work with AI coding agents. You need two things: an AI coding agent and an empty folder.

1. Get an agent (Claude Code, ChatGPT, OpenCode, and others all work)
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.

This workflow is a great example of the modern “AI-native” dev loop: the agent scaffolds the project, installs the skill, starts the preview studio, and iterates on the video with you watching in real time.

What’s In the Library#

The Remocn registry includes production-ready components for:

• Transitions — fades, wipes, and scene transitions
• Animations — kinetic titles, reveals, and motion primitives
• Backgrounds — animated background scenes
• Scenes — complete reusable scene templates

Each one is a shadcn-style registry entry: add it, own it, customize it.

How It Compares#

Why It Matters#

Video is the highest-converting medium in marketing, but producing product demo videos has always been slow, expensive, and hard to iterate on. Remocn removes the friction:

• Same-day shipping — a polished demo video without a week of keyframe work
• Full code ownership — no dependency lock-in, everything is tweakable
• Deterministic and testable — videos are code, so they can be versioned, reviewed, and rebuilt
• AI-native workflow — the included agent skill makes “build me a product demo” a prompt away

For product teams, founders, and solo builders, Remocn turns video production from a project into a task.

References#

• Remocn GitHub Repository ↗
• Remotion — React Video Framework ↗
• shadcn/ui — Copy-Paste Component Registry ↗