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

Claude Code v2.0.0

Welcome back Meaghan!

Opus 4.8 • Max 20x

/users/meaghan/code/apps

What's new

/agents to create subagents

/security-review for review agent

ctrl+b to background bashes

... /help for more

> Try "edit <filepath> to ..."

Claude Code

A live agent session — typed prompt and all

remocn

@remocn

Building the collaborative video toolkit for small teams. Ship demos faster with ready-made motion.

Tunisiaremocn.tnJoined January 2024

Posts

Replies

Media

Likes

remocn@remocn · 2d

Shipping something new today. Built entirely with Remotion and a lot of coffee. More soon.

1248312

Following

X Follow Card

A profile card that follows itself on cue

Wordspushleft.

Kinetic Center Build

Words push left as each new one builds from the center

Andre Vitorio

Sarah Chen

followed you · 7h

@remocn

1,709Followers

X Followers

Names cycle, then the total lands with confetti

Shader Swirl

Twisting bands of color churn behind your scene

remocn-ui

shadcn, on the timeline

The shadcn primitives you already know — Button, Input, Select, Dialog — but their states are scripted on the Remotion frame. No useState, no event handlers: every pixel is a pure function of the timeline.

button input checkbox switch select dialog toast command-menu tabs slider tooltip stepper message-bubble typing-indicator + more

Create an account

Enter your information below to create your account

Full Name

John Doe

m@example.com

We'll use this to contact you.

Password

••••••••

Must be at least 8 characters long.

Select

Panel reveals, then an item check lands

you@example.com

Input

Focus ring and a typed value reveal

Enable notifications

Switch

Track fill with a sliding thumb

Type a command or search…

Command Menu

⌘K palette opens, then filters

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}
    />
  )
}