create-remotion-geist

创建 Remotion Geist 视频

创建采用 Vercel Geist 设计系统风格的 Remotion 视频：深色背景、弹簧动画、Geist 字体和 10 阶色彩刻度。

适用场景

• 创建任何希望呈现 Vercel 风格的 Remotion 视频
• 使用 Geist 的深色主题美学制作动态图形
• 使用 Geist 字体和色彩制作动画内容
• 制作需要呈现精致 Vercel 视觉风格的视频

关键规则

1. 绝不使用表情符号——使用 @geist-ui/icons 包中的 Geist 图标
2. 使用官方品牌素材——从官方来源下载，不要手工制作 SVG
3. 入口文件必须是 .tsx——使用带有 registerRoot() 的 src/index.tsx，而不是 .ts
4. 使用 prism-react-renderer 处理代码——不要使用基于正则表达式的语法高亮

快速开始

1. 搭建项目脚手架：

   mkdir -p src/{scenes,components,utils} out
   npm init -y
   npm install remotion @remotion/cli @remotion/tailwind react react-dom
   npm install -D tailwindcss typescript @types/react
   npm install @geist-ui/icons  # For proper icons
   

2. 创建核心文件（模板见 references/project-setup.md）：

   • remotion.config.ts - 启用 Tailwind
   • tailwind.config.js - Geist 色彩和字体
   • src/styles.css - 从 CDN 加载字体
   • src/index.tsx - 使用 registerRoot() 的根合成
   • src/Root.tsx - 合成定义
   • src/utils/animations.ts - 弹簧动画

3. 按照 references/scene-patterns.md 中的模式构建场景

4. 渲染：

   npx remotion studio          # Preview at localhost:3000
   npx remotion render MyComp out/video.mp4
   

Geist 设计令牌（快速参考）

色彩（深色主题）

令牌	CSS 变量	值	用途
background-100	--ds-background-100	#0a0a0a	主背景
background-200	--ds-background-200	#171717	次级/凸起背景
gray-400	--ds-gray-400	#737373	默认边框
green-700	--ds-green-700	#46A758	成功
red-700	--ds-red-700	#E5484D	错误
amber-700	--ds-amber-700	#FFB224	警告
blue-700	--ds-blue-700	#0070F3	信息/强调

字体排版类

• 标题： text-heading-{72|64|56|48|40|32|24|20|16|14}（半粗体，紧凑字距）
• 标签： text-label-{20|18|16|14|13|12}[-mono]（常规字重）
• 正文： text-copy-{24|20|18|16|14|13}[-mono]（常规字重）

间距（以 4px 为基准）

• space-2：8px | space-4：16px | space-6：24px | space-8：32px

动画工具

使用基于弹簧的动画，呈现 Geist 流畅的视觉风格：

import { spring, interpolate } from 'remotion';

// Fade in with delay
export function fadeIn(frame: number, fps: number, delay = 0, duration = 0.4) {
  const delayFrames = delay * fps;
  const durationFrames = duration * fps;
  return interpolate(frame, [delayFrames, delayFrames + durationFrames], [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
}

// Spring scale
export function springIn(frame: number, fps: number, delay = 0) {
  return spring({ frame: frame - delay * fps, fps, config: { damping: 200 } });
}

场景结构模式

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

  const titleOpacity = fadeIn(frame, fps, 0, 0.4);
  const titleScale = springIn(frame, fps, 0);

  return (
    <AbsoluteFill className="bg-background-100 flex flex-col items-center justify-center">
      <h2 style={{ opacity: titleOpacity, transform: `scale(${titleScale})` }}>
        Title
      </h2>
    </AbsoluteFill>
  );
}

核心原则

1. 绝不使用表情符号——从 @geist-ui/icons 导入图标（例如，import { Code, Folder, Check } from '@geist-ui/icons'）
2. 成功 = 绿色——Geist 使用绿色表示成功状态（--ds-green-700）
3. 边框 = gray-400——默认边框颜色（--ds-gray-400）
4. 输入框使用 bg-100——使用主背景，而非次级背景
5. 弹簧动画——流畅、带阻尼的运动（damping: 200）
6. 紧凑字距——标题采用负字距
7. 使用官方品牌素材——从官方来源下载徽标（参见 references/geist-icons.md）

参考资料

• references/project-setup.md - 完整文件模板
• references/geist-icons.md - 图标和品牌素材（必须阅读）
• references/code-blocks.md - 语法高亮代码块（使用 prism-react-renderer）
• references/geist-colors.md - 完整的 10 阶色彩刻度
• references/geist-typography.md - 所有字体排版类及其规格
• references/geist-components.md - 组件属性和模式
• references/scene-patterns.md - 常见内容的场景模板
• references/storyboard-template.md - 视频结构规划

字体加载（jsDelivr CDN）

@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
}
/* Add Medium (500), SemiBold (600), Bold (700) weights */