Copy-Paste Motion Primitives for Shipping Videos Faster
copy-paste Remotion primitives could speed joelclaw video-pipeline demos without adding runtime dependencies
remocn takes the shadcn registry idea and points it at Remotion: polished video primitives you copy into your own app with npx shadcn add instead of importing a black-box animation package.
That’s the clever bit. Remotion gives you programmable video, but not a full shelf of batteries-included fades, wipes, kinetic titles, browser demos, terminal scenes, and launch-trailer chunks. remocn turns those into owned source files, which means no runtime dependency, no version lock-in, and no waiting on somebody else’s abstraction to expose the knob you need.
The useful part for joelclaw is speed. If we’re generating product clips, launch assets, changelog bites, or docs-adjacent video from code, a registry of editable Remotion scenes is a better starting point than hand-tuning every interpolate() call like a tiny motion goblin. Copy the primitive, own the code, ship the damn clip.
The repo also documents the boring hard part: server-side MP4 rendering with @remotion/renderer, headless Chromium, pre-bundled Remotion entrypoints, and deploy paths for Coolify via Nixpacks or a Dockerfile. That’s the stuff that usually eats the afternoon.
Key Ideas
- remocn is a shadcn registry for Remotion components, so animations and scenes are copied into your repo instead of shipped as a runtime package.
- The catalog includes text animations, visual backgrounds, transitions, UI blocks, and full compositions like product launch trailers, changelog clips, browser flows, terminal demos, and code showcases.
- The ownership model fits agent-built media well: an agent can add a primitive, edit the local TypeScript or React code, and keep the result inside the project.
- The self-hosting notes cover production rendering details for
@remotion/renderer, headless Chromium, Coolify, Nixpacks, and Docker on a Hetzner CPX42 sized box. - The site stack is a compact modern docs/registry shape: Next.js 16, React 19, Tailwind CSS 4, Fumadocs, Bun, and the shadcn registry format.