Shadcn Registries Make Video Motion Copy-Pasteable
shadcn registry pattern could give joelclaw owned Remotion primitives for product demos, visual explainers, and video pipeline outputs
remocn takes the shadcn copy-paste ownership model and points it at Remotion. That’s the clever bit. Video motion usually turns into a pile of bespoke interpolate() calls, timing tweaks, and animation fiddling. Here, the primitives are shipped as source code you add with npx shadcn add, then own.
The useful part isn’t just “a component library for video.” It’s that Remotion gets the same escape hatch that made shadcn/ui work for app interfaces: no runtime dependency, no black box, no begging a package maintainer to support your weird case. Pull in a Blur Reveal, Terminal Simulator, Browser Flow, Code Diff Wipe, or full product launch composition, then mutate the damn thing until it fits.
The repo is also a useful self-hosting receipt. remocn.dev is a Next.js 16 app with React 19, Tailwind CSS 4, Fumadocs, and a shadcn registry endpoint at /r/[name]. The /stars generator renders MP4 server-side with @remotion/renderer, headless Chromium, and pre-bundled Remotion entries, with deployment notes for Coolify, Nixpacks, Docker, and Hetzner.
For joelclaw, this maps cleanly to the video side of the system: quick product demos, changelog clips, launch trailers, and agent-generated visual explainers that don’t look like raw screen recordings wearing a sad little hat. The pattern is worth remembering because the registry is the product boundary. The output is owned code.
Key Ideas
- remocn applies the shadcn source-owned component model to Remotion animations, transitions, backgrounds, scenes, and UI blocks.
- The registry gives Remotion a batteries-included layer without creating a runtime dependency or lock-in problem.
- The catalog includes text animations, visual primitives, transitions, UI blocks, and full compositions for product demos, changelog clips, launch videos, and feature walkthroughs.
- The hosted app doubles as a practical reference for running a shadcn registry inside a Next.js documentation site.
- The server-side render path is a useful deployment receipt for
@remotion/renderer, Chrome Headless Shell, Coolify, Nixpacks, and Docker. - The deeper pattern: a copy-paste registry can turn polished media primitives into owned local code, which is exactly what agent-generated video tooling needs if it wants to stay editable.