Remocn: 350+ Copy-paste Video Components for Remotion

Remocn is a React component registry for creating videos with Remotion.

It currently includes 350+ copy-paste components for text animations, shader backgrounds, scene transitions, scripted UI interactions, captions, andmore.

Install components through the shadcn CLI, edit their TypeScript source, and render product demos or launch videos.

Features

• Animated typography, transitions, shaders, effects, filters, and icons.
• Scripted UI primitives for frame-controlled forms, dialogs, and application demos.
• Timed caption styles that animate individual words from a transcript.
• Complete video templates for product launches, brand showcases, and workflows.
• Editable TypeScript source files installed through the shadcn registry.
• Live component previews with frame-by-frame playback.
• Optional Agent skill with component references and video composition recipes.

Available Components

How To Use It

1. Create a Remotion Project

Run the Remotion project generator if you do not already have a project:

npx create-video@latest

2. Set Up the shadcn Registry CLI

If the project has no components.json, initialize it first. Remocn uses this configuration for component aliases and file placement.

npx shadcn@latest init

3. Install a Video Component

Install the Soft Blur In text animation. The CLI writes soft-blur-in.tsx to components/remocn/ or the directory resolved from your components.json aliases. Review the file list before overwriting local edits on later installations.

npx shadcn@latest add @remocn/soft-blur-in

4. Basic Usage

Register an animation in your Remotion root file. This example reveals a product headline over a dark background for two seconds at 30 fps.

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
const ProductHeadline = () => (
  <AbsoluteFill
    style={{
      backgroundColor: "#0b1220",
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <SoftBlurIn
      text="Your analytics, in one place."
      blur={12}
      fontSize={64}
      fontWeight={600}
      color="#ffffff"
    />
  </AbsoluteFill>
);
export const RemotionRoot = () => (
  <Composition
    id="ProductHeadline"
    component={ProductHeadline}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

5. Preview and Render

Launch Remotion Studio to inspect the composition:

npx remotion studio

Render the composition to MP4:

npx remotion render ProductHeadline out.mp4

Advanced Example: Script a Button Demo

Remocn’s remocn-ui tier recreates common UI components for video scenes. A Button can show idle, hover, press, loading, and success states at authored frame numbers.

Install Button. Its registry dependencies also install Spinner, lib/remocn-ui/, and the Button transition hook.

npx shadcn@latest add @remocn/button

Frame-Controlled States

Use useCurrentState for immediate state changes at exact frame numbers. For interpolated changes between states, use the Button-specific useButtonTransition hook in the following example.

import { Button } from "@/components/remocn/button";
import { useCurrentState } from "@/lib/remocn-ui";
export const ReportExportScene = () => {
  // State changes happen at exact, composition-local frames.
  const state = useCurrentState(
    [
      { at: 12, state: "hover" },
      { at: 24, state: "press" },
      { at: 32, state: "loading" },
      { at: 82, state: "success" },
    ],
    "idle"
  );
  return <Button label="Export report" state={state} />;
};

Animated State Transitions

import { Button } from "@/components/remocn/button";
import { useButtonTransition } from
  "@/components/remocn/use-button-transition";
export const AnimatedExportScene = () => {
  const style = useButtonTransition([
    { at: 12, state: "hover" },
    { at: 24, state: "press" },
    { at: 32, state: "loading", duration: 8 },
    { at: 82, state: "success", duration: 12 },
  ]);
  return <Button label="Export report" style={style} />;
};

Add Word-Synchronized Captions

Remocn caption components read Caption[] from @remotion/captions. Each word needs accurate millisecond timestamps from a voiceover transcript. Transcribe the audio before rendering and save the word timing data to JSON.

Install the caption runtime and the Karaoke component:

npx remotion add @remotion/captions
npx shadcn@latest add @remocn/caption-karaoke

Basic Caption Usage

Put captions.json next to the scene file. Caption timestamps are relative to the surrounding Remotion Sequence. Position the text-only CaptionKaraoke component inside your composition, and set the final video duration from the last word’s endMs plus its hold time.

import { AbsoluteFill } from "remotion";
import { CaptionKaraoke } from
  "@/components/remocn/caption-karaoke";
import captions from "./captions.json";
export const ProductWalkthroughCaptions = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 100,
      paddingInline: 120,
    }}
  >
    <CaptionKaraoke
      captions={captions}
      fontSize={54}
      holdMs={600}
      activeColor="#facc15"
    />
  </AbsoluteFill>
);

Use a Complete Video Template

Remocn has complete compositions alongside individual animation components. For example, Product Showcase contains its own shots, camera moves, product demo screens, and scene timing.

Install Product Showcase:

npx shadcn@latest add @remocn/launch-anything

Product Showcase renders 1,600 frames at 60 fps. Its chrome introduction requires WebGL2. Change the template’s product screens, branding, copy, and music in its source files or documented props. Register the composition with its exported timing and size constants:

import { Composition } from "remotion";
import {
  ProductShowcase,
  LAUNCH_FRAMES,
  LAUNCH_FPS,
  LAUNCH_WIDTH,
  LAUNCH_HEIGHT,
} from "@/components/remocn/templates/launch-anything";
export const RemotionRoot = () => (
  <Composition
    id="ProductShowcase"
    component={ProductShowcase}
    durationInFrames={LAUNCH_FRAMES}
    fps={LAUNCH_FPS}
    width={LAUNCH_WIDTH}
    height={LAUNCH_HEIGHT}
    defaultProps={{}}
  />
);

Build Videos with an AI Coding Agent

The optional Remocn skill teaches compatible coding agents how to choose components, plan video timing, and construct scenes from reusable motion elements. It reads the current component reference from the Remocn website, so the agent needs access to remocn.dev.

Install the skill in your existing coding-agent environment:

npx skills add Remocn/remocn --skill remocn --yes

For an agent-led project setup, use this prompt:

Set up a Remotion project for a 20-second SaaS analytics demo. Install the Remocn skill and use its components for the title, animated dashboard, export-button interaction, scene transitions, and closing message. Keep animation timing frame-based, register the composition, and start Remotion Studio for review.

File Placement and Customization

A project using the text animation, Button, and captions from the examples has the following relevant files. Paths depend on the aliases in components.json:

components/
└── remocn/
    ├── soft-blur-in.tsx
    ├── button.tsx
    ├── use-button-transition.ts
    └── caption-karaoke.tsx
lib/
└── remocn-ui/
    └── ... shared timeline, theme, color, and motion files

Component Timing

Use Remotion’s useCurrentFrame(), interpolate(), and spring() when editing animation behavior. Place a scene inside <Sequence> to control its start frame and duration. The remocn-ui timeline hooks interpret authored frame numbers relative to the surrounding sequence.

UI Themes

The scripted UI components accept a theme prop. Use concrete hex, RGB, or OKLCH colors for animated transitions; JavaScript interpolation does not resolve CSS var(...) expressions. Static styles can use CSS custom properties. Apply shared theme values through RemocnUIProvider:

import { RemocnUIProvider } from "@/lib/remocn-ui";
import { Button } from "@/components/remocn/button";
export const BrandedButton = () => (
  <RemocnUIProvider
    mode="dark"
    theme={{ primary: "oklch(0.6 0.22 260)" }}
  >
    <Button label="Export report" state="loading" />
  </RemocnUIProvider>
);

Alternatives and Related Resources

• Copy-Paste Video Components with Editframe and Shadcn – framecn
• Build AI-powered Video Web Apps – AI Video Kit