Cinematic video components,
now copy-pasteable

Production-ready Remotion animations, transitions and backgrounds. Install with the shadcn CLI and own every line of code.

Browse components

Why remocn

You want the video, not the ordeal.

Motion usually costs tokens, an afternoon, a designer's invoice, and a weekend lost in After Effects. remocn hands you the animation — copy, paste, render.

The usual bill

What a video normally costs you

With remocn

Just one command

Teaching an AI to keyframe

~40k tokensIncluded

Inventing the animation

An afternoonAlready built

Hiring a motion designer

$600+$0

Learning After Effects

A weekendSkip it

Total, the remocn way — one line.

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

What's inside

Five kinds of building blocks

Every remocn component belongs to one of these families. Compose them on the Remotion timeline to build a full video, one scene at a time.

Motion

Typography

Text that animates itself in — blur-ins, line reveals, kinetic builds.

Shaders

GPU backgrounds — animated noise, gradients, and meshes.

Transitions

Scene-to-scene cuts — pushes, dissolves, and shader wipes.

Animated Icons

Lucide icons redrawn for video, each with its own action.

UI Primitives

shadcn components scripted on the frame — buttons, switches, dialogs.

Get started

Ship your first frame in minutes

If you know shadcn/ui, you already know remocn. Three commands and you're rendering — the code lands in your repo, yours to tweak.

Start with Remotion

Already have a Remotion project? Skip ahead. Otherwise scaffold one in seconds.

$ pnpm create video@latest

Set up shadcn

Run the shadcn init once so the CLI knows where to drop component files in your project.

$ pnpm dlx shadcn@latest init

Add a component

Pull any primitive or composition straight into your project with the shadcn CLI — the code lands in your repo, yours to tweak.

$ pnpm dlx shadcn@latest add remocn/soft-blur-in

import { Typewriter } from "@/components/remocn/typewriter";

export function Hero() {
  return (
    <Typewriter
      text="Hello, world"
      fontSize={72}
      color="#171717"
      fontWeight={700}
      cursor={true}
    />
  )
}