What it does
remocn is a shadcn-style component registry for Remotion — 64+ production-ready animations, transitions, and full scene compositions you install with npx shadcn add and own outright. Text reveals, chromatic wipes, terminal simulators, product trailers — the kind of things you'd otherwise spend an afternoon hand-tuning.
Why I starred it
Remotion is brilliant for programmatic video, but it ships exactly zero UI primitives. Every project starts from scratch: interpolate, useCurrentFrame, a lot of easing math. The community has blog posts and Discord snippets, but nothing you'd call a component library.
remocn fills that hole with the same philosophy shadcn brought to React UI — copy the code into your repo, edit it freely, no runtime dependency. That's the right call for Remotion specifically, because video components tend to need heavy tweaking per project. Locking them behind an npm package would be friction, not help.
How it works
The repo is a Next.js site that doubles as both the showcase/docs and the registry endpoint. When you run npx shadcn@latest add @remocn/blur-reveal, the shadcn CLI hits /r/[name] and pulls the component source into components/remocn/.
The internal structure is worth walking through. Every component lives in registry/remocn/<name>/ with two files: index.tsx (the actual Remotion component) and config.ts (metadata for the web customizer). The config drives a live preview panel with typed controls — sliders, color pickers, text inputs — defined via a ControlConfig type in lib/customizer-config.ts:
// lib/customizer-config.ts
export type ControlType =
| { type: "text"; default: string; label: string }
| { type: "number"; default: number; min: number; max: number; step: number; label: string }
| { type: "color"; default: string; label: string }
| { type: "select"; default: string; options: string[]; label: string }
| { type: "boolean"; default: boolean; label: string };A smart detail in registry/__index__.tsx: after all components are registered, a single loop merges SHARED_CONTROLS (just a speed knob for now) into every component's config:
for (const { config } of Object.values(registry)) {
config.controls = { ...config.controls, ...SHARED_CONTROLS };
}That means every animation in the customizer exposes the same speed control without any component needing to declare it. Obvious in hindsight, but it's the kind of consistency that saves you from having to audit 64 files.
The components themselves are clean. BlurReveal in registry/remocn/blur-reveal/index.tsx is 50 lines: take useCurrentFrame, multiply by speed, run two interpolate calls for opacity and blur radius, done. No wrapper components, no context, no magic.
The more interesting ones show more thought. ChromaticAberrationWipe (registry/remocn/chromatic-aberration-wipe/index.tsx) applies drop-shadow CSS filters during the peak transition window to simulate the red/cyan channel split you see in glitchy footage:
const inPeak = frame >= peakStart && frame <= peakEnd;
const filter = inPeak
? `drop-shadow(-${aberrationOffset}px 0 0 rgba(255,0,0,0.8)) drop-shadow(${aberrationOffset}px 0 0 rgba(0,255,255,0.8))`
: "none";It's a CSS trick, not a shader, which keeps it dependency-free and renders correctly in Remotion's headless pipeline.
The TerminalSimulator (registry/remocn/terminal-simulator/index.tsx) has a detail I appreciated: the scroll behavior is a step function, not interpolated. Each line that overflows snaps the buffer up by exactly one lineHeight on the frame it begins. The comment in the source is explicit:
// STEP-FUNCTION scroll. Each overflowing line snaps the buffer up by
// exactly one lineHeight on the frame it begins. No interpolation, no
// easing — terminals do not glide.
That's correct. A smoothly scrolling terminal looks wrong in video. Someone thought about this.
Using it
Prereq: an existing Remotion project. Then:
npx create-video@latest my-video
cd my-video
npx shadcn@latest add @remocn/blur-revealThe component lands at components/remocn/blur-reveal.tsx. Use it in any Remotion composition:
import { BlurReveal } from "@/components/remocn/blur-reveal";
export const MyComposition = () => (
<AbsoluteFill>
<BlurReveal
text="Ship it."
fontSize={96}
blur={20}
color="#ffffff"
speed={1.5}
/>
</AbsoluteFill>
);For the terminal simulator with custom lines:
import { TerminalSimulator } from "@/components/remocn/terminal-simulator";
const lines = [
{ text: "pnpm build", type: "command" as const, delay: 0 },
{ text: "Compiling...", type: "log" as const, delay: 8 },
{ text: "Done in 3.1s", type: "success" as const, delay: 20 },
];
export const BuildScene = () => (
<TerminalSimulator lines={lines} title="~/my-project" />
);Rough edges
No tests. Not one. For a component library this size, that's a gap — nothing validates that interpolate ranges produce the expected values or that config defaults match component prop types.
The dependency tree is heavy for a registry site. The package.json includes @react-three/fiber, three, ogl, postprocessing, and @react-three/postprocessing — presumably for WebGL-based previews on some components. Those don't land in your project (you only copy the component source), but it means the registry site itself is a large bundle.
Recent git activity is sparse — last few commits are sponsor updates and a components page addition. The library looks complete rather than actively growing, but it's early enough (190 stars at time of writing) that maintenance intent is unclear.
The docs at remocn.dev are functional but thin on composition guidance. The individual component previews are useful; there's nothing explaining how to sequence multiple components across a multi-scene video.
Bottom line
If you're building product demo videos or launch trailers in Remotion, remocn saves real time — not on the simple stuff, but on the transitions and full compositions that take an afternoon to get right. The code-you-own model is the right fit for Remotion's use case.