用途:创建遵循 Vercel Geist 设计系统美学的 Remotion 视频,适用于需要 Vercel 视觉风格的动画、动效图形与视频内容。
主要能力:提供 Geist 深色主题的配色令牌(如 background-100 #0a0a0a、gray-400 #737373、green-700 #46A758 等)、排版类(text-heading、text-label、text-copy 系列)、4px 基础间距,以及基于 spring 的动画工具(fadeIn、springIn)。要求使用 @geist-ui/icons 图标、官方品牌资源、prism-react-renderer 做代码高亮,入口必须为 src/index.tsx 并使用 registerRoot()。
使用方式:先搭建项目结构并安装依赖,命令包括 npm install remotion @remotion/cli @remotion/tailwind react react-dom、npm install -D tailwindcss typescript @types/react、npm install @geist-ui/icons。随后创建 remotion.config.ts、tailwind.config.js、src/styles.css、src/index.tsx、src/Root.tsx、src/utils/animations.ts 等核心文件,再按场景模式构建。预览用 npx remotion studio,渲染用 npx remotion render MyComp out/video.mp4。字体通过 jsDelivr CDN 加载。
适用场景:制作 Vercel 风格的产品演示、动效图形、动画内容。
限制:禁止使用 emoji,须用 Geist 图标;禁止手绘 SVG,须用官方品牌资源;代码高亮不得用正则实现。其余细节暂未提供。