Snapcn
专为 React 打造的 Remotion 视频动效组件库，通过 shadcn CLI 快速安装文字揭示、卡拉OK字幕、设备样机与整段视频场景代码。
项目概述
Snapcn 是一个面向 React 开发者的开源 Remotion 视频组件注册表。它将 shadcn/ui 的源码分发与复制即用理念引入到程序化视频开发领域，提供包括动态文字揭示、精准音频歌词字幕、3D 设备样机展示和 Logo 动画片头等丰富的模块化视频组件。
核心特性
- 🎬 原生 Remotion 架构底座：深度结合 Remotion 与 React 体系，支持精确到帧的动画控制与服务端无头自动化批量渲染。
- 📋 零依赖锁定的源码模式：通过标准 shadcn CLI 命令直接将组件源码安装到本地工程，自由修改样式与时间轴逻辑。
- 📱 开箱即用的多媒体动效：内置移动端与桌面端设备样机包裹器、音频反应频谱、电影级转场效果与字幕动效。
- ⚡ Tailwind 与 TypeScript 深度整合：使用熟悉的实用类快速定制视觉尺寸，配合完备的类型定义保证组件安全接入。
快速上手与示例代码
npx shadcn@latest add https://snapcn.dev/r/text-reveal
# 或安装设备样机动效组件
npx shadcn@latest add https://snapcn.dev/r/device-mockupimport React from 'react';
import { Composition } from 'remotion';
import { TextReveal } from '@/components/snapcn/text-reveal';
export const PromoVideo: React.FC = () => {
return (
<Composition
id="PromoVideo"
component={() => (
<div className="flex h-full w-full items-center justify-center bg-neutral-950 text-white font-bold text-6xl">
<TextReveal text="用 React 代码轻松打造震撼视频" delay={15} />
</div>
)}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
);
};技术选型建议与适用场景
- 非常适合：SaaS 软件宣传片制作、社媒自动化短视频生成工作流、程序化视频渲染平台以及前端工程师主导的视频项目。
- 与传统方案对比：无需导出繁琐的 AE 预设或依赖剪辑软件，视频时间线与动效元素均作为声明式 React 代码进行版本管理。
讨论与评价
分享你对该组件库的上手体验、优缺点或建议...
暂无讨论。欢迎分享你对该组件库的上手体验、优缺点或建议！
相关组件推荐
基于同类与技术栈推荐
Kinetics (Colorion)
614
基于真实弹簧物理建模的现代 Web 微交互动效库，收录 150+ 交互案例，同时提供纯 CSS 贝塞尔曲线、React 代码与 AI 智能体提示词。
动效动画CLI 工具源码拷贝+2
动效动画详情
23rd
192
由 radiumcoders 打造的开源 shadcn/ui 组件注册表，提供 WebGL 着色器、趣味 404 与交互式展示组件，Copy-Paste 装进仓库即装即改。
动效动画源码拷贝React+2
动效动画详情
Great UI
273
基于 Tailwind CSS v4、Motion 与 TypeScript 构建的高交互开源 React 组件库，主打创意转场、微动效与源码免依赖复制。
动效动画源码拷贝React+2
动效动画详情