remocn logoremocn

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

It's just props

Tweak it live

Every component is plain React driven by the Remotion API. Drag a number, click a color — the props are the controls, and the frame re-renders instantly.

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

export function Hero() {
  return (
    <Typewriter
      text=
      fontSize={}
      color="#171717"
      fontWeight={}
      cursor={}
    />
  )
}
Drag or click values to edit

The registry

A registry of motion

Transitions, primitives and text reveals — production-ready, autoplaying, and one command away.

Browse all

AI Generation Canvas

From prompt to UI in a single composition

Shimmer Sweep

Light pass across text for AI accents

Ecosystem Constellation

Orbits of integration logos around your brand

Grid Pixelate Wipe

The screen breaks into squares and reassembles into a new scene

Frosted Glass Wipe

An elegant transition through a sheet of glass

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.

1

Start with Remotion

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

$ pnpm create video@latest
2

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
4

Render your video

Drop the component into a composition and export an mp4 — no editor required.

$ pnpm dlx remotion render
3

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/blur-reveal
import { Typewriter } from "@/components/remocn/typewriter";

export function Hero() {
  return (
    <Typewriter
      text="Hello, world"
      fontSize={72}
      color="#171717"
      fontWeight={700}
      cursor={true}
    />
  )
}
blur-revealshimmer-sweepfrosted-glass-wipegrid-pixelate-wipe+ more

Sponsors

Backed by the community

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

Shadcnblocks.com
Become a sponsor

Stop fighting keyframes. Start writing code.

Install your first component and render a video today. It's open source, all the way down.