remocn

项目概述

remocn 是首个面向 AI 编码智能体（Coding Agents）与现代前端开发者打造的 Remotion 开源视频动效组件库。它借鉴了 shadcn/ui 的代码所有权（Copy-and-Paste）范式，将过去繁琐、复杂的逐帧动画和数学插值计算（useCurrentFrame、interpolate、spring）封装成一系列开箱即用的高阶视频组件。开发者无需学习庞大的 After Effects 剪辑软件，只需向 Claude Code、Cursor 等 AI 智能体输入一条提示词，即可在浏览器中实时预览并渲染出电影级的产品 Demo 视频。

核心特性

• 🎬 Remotion 生产级物理插值：严密遵循 Remotion 规范，杜绝导致视频渲染错乱的非纯函数副作用，提供精准的弹簧物理（Spring）与平滑关键帧转场。
• 🤖 AI 编程智能体原生协同：内置 Agent 专属技能体系（Skill），AI 能够自动识别视频剧本、挑选时间轴组件并完成视听场景拼装。
• 📦 源码直出与零黑盒锁定：遵循 shadcn Registry 规范，通过 CLI 命令直接将干净的 React/TSX 源码复制进项目仓库，拥有 100% 的定制修改权。
• 🧩 五大模块化视频家族：涵盖 SaaS 动态排版（Typography）、视差屏幕模拟（Screen Sims）、动态渐变背景（Shaders）、转场过渡（Transitions）及交互图标库。

快速上手与示例代码

# 1. 向 AI 智能体添加 remocn 技能（在项目空目录中执行）
npx skills add Remocn/remocn --yes

# 2. 或通过 shadcn CLI 按需下载高品质文字模糊揭示动画
npx shadcn@latest add @remocn/blur-reveal

import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
import { BlurReveal } from '@/components/remocn/blur-reveal';

export function DemoScene() {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill className="bg-neutral-950 flex items-center justify-center">
      <BlurReveal
        text="Ship Product Demos in Minutes"
        delay={10}
        className="text-6xl font-bold tracking-tight text-white font-sans"
      />
    </AbsoluteFill>
  );
}

技术选型建议与适用场景

• 非常适合：独立创作者、SaaS 创业团队、希望用代码自动化生成营销 Demo 视频的前端工程师，以及习惯使用 Cursor / Claude Code 等 AI 编程智能体的技术团队。
• 与同类方案对比：相比于昂贵的外包动画设计或上手门槛极高的 AE/剪辑软件，remocn 让视频生产完全代码化、组件化并深度融入 Git 版本管理，迭代改动仅需几秒钟。