remocn

Overview

remocn is the first copy-paste component library designed specifically for programmatic video generation using Remotion and AI coding agents. Drawing direct inspiration from the shadcn/ui registry model, remocn eliminates the friction of handcrafting complex interpolation curves, spring physics, and timeline math from scratch. Solo builders and teams can simply describe their product vision to an AI agent (like Claude Code or Cursor) and assemble polished, studio-grade promotional videos directly in code and browser preview studios.

Key Features

• Production-Ready Remotion Primitives: All components adhere strictly to Remotion's pure rendering architecture with rock-solid frame interpolation and spring timing.
• Agent-First Workflow: Ships with an official AI coding agent skill (npx skills add Remocn/remocn), enabling agents to read video scripts and compose scenes autonomously.
• Copy-and-Paste Ownership: Distributed via the shadcn CLI format. Components are copied directly into your repository with zero external runtime dependencies.
• Modular Component Families: Features ready-to-use SaaS typography effects, app UI screen mockups, kinetic shaders, dynamic transitions, and animated icons.

Installation & Quick Start

# Install the remocn agent skill in an empty video project
npx skills add Remocn/remocn --yes

# Or install individual components directly via shadcn CLI
npx shadcn@latest add @remocn/blur-reveal

import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
import { BlurReveal } from '@/components/remocn/blur-reveal';

export function DemoScene() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill className="bg-neutral-950 flex items-center justify-center">
      <BlurReveal
        text="Ship Product Demos in Minutes"
        delay={10}
        className="text-6xl font-bold tracking-tight text-white font-sans"
      />
    </AbsoluteFill>
  );
}

Why Choose remocn?

1. Zero Motion Design Overhead: Eliminate expensive design agency contracts and tedious timeline editing—ship promotional product videos in an afternoon using code.
2. True Git Versioning: Video assets live directly inside your software codebase as declarative React components, making revisions, diffs, and localization instant.