Remocn

A shadcn-style registry of copy-paste video components for Remotion — animations, transitions, backgrounds, and full scene compositions you npx shadcn add into a Remotion project and own as source. Built for solo builders shipping product demo videos fast.

Remocn (Remocn/remocn, 822 GitHub stars at 2026-07-03 source check) applies the shadcn/ui model to programmatic video: instead of hand-writing every fade, wipe, and kinetic title with Remotion's frame APIs, you install a polished primitive and edit the code in your repo. By Dima Kapish (@kapish_dima). The June 2026 reintroduction frames it as ready-to-use cinematic video components for React/Remotion, installable through shadcn and usable by AI agents with included agent skills. Source: remocn.dev, https://remocn.dev, 2026-07-03 Source: GitHub Remocn/remocn, https://github.com/Remocn/remocn, 2026-07-03 Source: X/@kapish_dima, 2026-06-26

What it includes

110+ components across animation and UI-primitive tiers: Source: GitHub Remocn/remocn README, 2026-06-30

Install

Remotion is a prerequisite (npx create-video@latest), then add components with the standard shadcn CLI: Source: remocn.dev/docs, 2026-06-12

npx shadcn@latest init                       # once, for path aliases
npx shadcn@latest add @remocn/blur-out-up     # lands in components/remocn/

import { Composition } from "remotion"
import { BlurOutUp } from "@/components/remocn/blur-out-up"

export const RemotionRoot = () => (
  <Composition id="HelloWorld" component={BlurOutUp} durationInFrames={90} fps={30} width={1280} height={720} defaultProps={{ text: "Hello, world" }} />
)

Render with npx remotion render HelloWorld out.mp4. Source: remocn.dev/docs/getting-started/installation, 2026-06-12

Executable Skills

Deep review found two source-owned skill folders in the repo and imported both into Kevin's shared skill tree:

This makes Remocn more than a component-library page: a new agent can load the actual source-owned rules before generating a product video. Source: GitHub Remocn/remocn, 2026-06-30

Version Snapshot

Checked 2026-07-03:

The April launch video was reviewed through local frames: it opens on the Remocn title card and then catalogs component/scene primitives including Cursor Flow, Brush Stroke Simulator, Bounding Box Selector, Mesh Gradient Background, Spotlight Card, Terminal Simulator, Code Diff Wipe, and AI Generate Overlay. The June 12 remocn/ui bookmark video was reviewed through a contact sheet: it cycles through shadcn-like video primitives including button, radio, progress, accordion, dialog, and sheet states. The June 26 bookmark video separately opens on a Claude Code v2.0.0-style terminal, demonstrates shadcn add @remocn, shows a generated UI card/input scene, and ends on a GitHub-love traction frame. Treat the videos as product-positioning proof, while GitHub is the source authority. Source: X bookmark media, 2026-04-08, 2026-06-12, and 2026-06-26; GitHub API/ref check, 2026-07-03

Why it matters

• Correct Remotion code — every component uses useCurrentFrame(), interpolate(), and spring() properly, with no Math.random() traps that break deterministic rendering. Source: remocn.dev/docs/getting-started/introduction, 2026-06-12
• Own the source — components are copied in, not installed as a runtime dependency, so they're agent-editable (Cursor/Codex can tweak scenes).
• Live previews — each component page mounts a real @remotion/player to scrub frame-by-frame.

How it compares

• vs Remotion + Claude Code Marketing Demos — that page is the workflow (Claude Code authors Remotion scenes from scratch); Remocn is the component library you drop into that workflow to skip the blank canvas.
• vs React Bits / marketing registries — same shadcn-CLI distribution, but Remocn outputs video (mp4 via Remotion), not DOM UI.
• Author's sibling registries — Dima Kapish also ships soundcn (700+ UI sound effects, ~661★), fonttrio (font-pairing registry, ~389★), and dialectcn (shadcn presets) — a cluster of single-command shadcn registries. Source: GitHub kapishdima, 2026-06-12

Launch thread: 696 likes, 949 bookmarks; demo video (1080p). Source: X/@kapish_dima, 2026-04-08

---

Timeline

• 2026-07-03 | Refreshed current source authority (Remocn/remocn, MIT, 811 stars, 43 forks, main HEAD 57c0e0b5a9861649c1b6000653285f4cc28eead4, no public tags found) and deep-reviewed the April launch video frames: Cursor Flow, Brush Stroke Simulator, Bounding Box Selector, Mesh Gradient Background, Spotlight Card, Terminal Simulator, Code Diff Wipe, and AI Generate Overlay. Source: GitHub API/ref check and X media review, 2026-07-03
• 2026-07-03 | Deep-reviewed the June 12 remocn/ui video contact sheet: shadcn-style video primitives for button, radio, progress, accordion, dialog, and sheet states. Refreshed GitHub count to 820 stars, same main HEAD 57c0e0b5a9861649c1b6000653285f4cc28eead4, no tags. Source: raw/x-bookmarks/enriched/2065482813252526405.json; GitHub Remocn/remocn, 2026-07-03
• 2026-07-03 | Closed source review for the companion site-link bookmark and refreshed current source authority: Remocn/remocn, MIT, 822 stars, 43 forks, main HEAD 57c0e0b5a9861649c1b6000653285f4cc28eead4, no public tags, and no public remocn / @remocn/registry npm packages. Source: raw/x-bookmarks/enriched/2070131098168762836.json; GitHub and npm registry checks, 2026-07-03
• 2026-06-30 | Deep review verified current source (Remocn/remocn, MIT, 764 stars, main HEAD 2704cecfa104855c2e4848e8d67522c2b21d14c4, no tags/releases/npm package), reviewed the bookmark video frames, and imported upstream skills/remocn plus .agents/skills/remotion-best-practices into Kevin's executable skill tree. Source: GitHub/X bookmark artifacts, 2026-06-30
• 2026-06-26 | Bookmark re-sync captured Remocn's updated framing: cinematic video components for React, installable through shadcn, with AI-agent compatibility and agent skills. Source: X/@kapish_dima, 2026-06-26
• 2026-06-30 | Added the companion thread reply anchor that links the Remocn site. Source: X/@kapish_dima, 2026-06-26
• 2026-06-12 | @kapish_dima re-introduced the project as remocn/ui ("@shadcn components, but for @Remotion video") — add a component, turn it into video; demoed form-filling and button-click UI recordings as components. 342 likes, 410 bookmarks; demo video (1080p). Source: X/@kapish_dima, 2026-06-12
• 2026-04-08 | Remocn introduced — shadcn registry of ready-made Remotion animations, transitions, typography, and complete scenes "for solo builders who don't have the budget to produce a full demo." @kapish_dima, 696 likes / 949 bookmarks. Source: X/@kapish_dima, 2026-04-08
• 2026-06-12 | Wiki page created from React/Next bookmark absorption; resolved remocn.dev + GitHub README (~526 stars, 64+ components). Source: remocn.dev + GitHub kapishdima/remocn, 2026-06-12