create-remotion-geist

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Create Remotion Geist Video

创建Remotion Geist视频

Create Remotion videos styled with Vercel's Geist design system - dark backgrounds, spring animations, Geist fonts, and the 10-step color scale.

创建采用Vercel Geist设计系统风格的Remotion视频——深色背景、弹性动画、Geist字体和10阶调色板。

When to Use

使用场景

Creating any Remotion video that should look like Vercel
Building motion graphics with Geist's dark theme aesthetic
Making animated content using Geist typography and colors
Producing videos that need the polished Vercel visual style

创建需要具有Vercel风格的Remotion视频
制作采用Geist深色主题美学的动态图形
使用Geist排版和色彩制作动画内容
生成需要精致Vercel视觉风格的视频

Critical Rules

核心规则

NEVER use emojis - Use proper Geist icons from
```
@geist-ui/icons
```
package
Use official brand assets - Download from official sources, don't hand-craft SVGs
Entry point must be .tsx - Use
```
src/index.tsx
```
with
```
registerRoot()
```
, not
```
.ts
```
Use prism-react-renderer for code - Do NOT use regex-based syntax highlighting

绝对不要使用表情符号 - 使用
```
@geist-ui/icons
```
包中的官方Geist图标
使用官方品牌资源 - 从官方渠道下载，不要手动制作SVG
入口文件必须为.tsx - 使用
```
src/index.tsx
```
并调用
```
registerRoot()
```
，不能使用.ts文件
使用prism-react-renderer处理代码 - 禁止使用基于正则的语法高亮

Quick Start

快速开始

Scaffold the project:

bash

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

Create core files (see
```
references/project-setup.md
```
for templates):
- ```
remotion.config.ts
```
  - Enable Tailwind
- ```
tailwind.config.js
```
  - Geist colors and fonts
- ```
src/styles.css
```
  - Font loading from CDN
- ```
src/index.tsx
```
  - Root composition with
```
registerRoot()
```
- ```
src/Root.tsx
```
  - Composition definitions
- ```
src/utils/animations.ts
```
  - Spring animations
Build scenes following the pattern in
```
references/scene-patterns.md
```

Render:

bash

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

搭建项目：

bash

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

创建核心文件（可参考
```
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
```
  - 弹性动画工具
按照
references/scene-patterns.md
中的模式构建场景

渲染：

bash

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

Geist Design Tokens (Quick Reference)

Geist设计令牌（快速参考）

Colors (Dark Theme)

色彩（深色主题）

Token	CSS Variable	Value	Usage
background-100	--ds-background-100	#0a0a0a	Primary background
background-200	--ds-background-200	#171717	Secondary/elevated
gray-400	--ds-gray-400	#737373	Default borders
green-700	--ds-green-700	#46A758	Success
red-700	--ds-red-700	#E5484D	Error
amber-700	--ds-amber-700	#FFB224	Warning
blue-700	--ds-blue-700	#0070F3	Info/accent

令牌	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	信息/强调色

Typography Classes

排版类

Headings:

text-heading-{72|64|56|48|40|32|24|20|16|14}

(semibold, tight tracking)

Labels:
```
text-label-{20|18|16|14|13|12}[-mono]
```
(normal weight)
Copy:
```
text-copy-{24|20|18|16|14|13}[-mono]
```
(normal weight)

标题：

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]
```
（常规字重）

Spacing (4px base)

间距（以4px为基准）

```
space-2
```
: 8px |
```
space-4
```
: 16px |
```
space-6
```
: 24px |
```
space-8
```
: 32px

```
space-2
```
: 8px |
```
space-4
```
: 16px |
```
space-6
```
: 24px |
```
space-8
```
: 32px

Animation Utilities

动画工具

Use spring-based animations for Geist's smooth aesthetic:

typescript

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 } });
}

使用基于弹性的动画实现Geist的流畅美学：

typescript

import { spring, interpolate } from 'remotion';

// 带延迟的淡入效果
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' });
}

// 弹性缩放效果
export function springIn(frame: number, fps: number, delay = 0) {
  return spring({ frame: frame - delay * fps, fps, config: { damping: 200 } });
}

Scene Structure Pattern

场景结构模式

tsx

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>
  );
}

tsx

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>
  );
}

Key Principles

核心原则

NEVER use emojis - Import icons from

@geist-ui/icons

(e.g.,

import { Code, Folder, Check } from '@geist-ui/icons'

)

Success = Green - Geist uses green for success states (--ds-green-700)
Borders = gray-400 - Default border color (--ds-gray-400)
Inputs use bg-100 - Primary background, not secondary
Spring animations - Smooth, damped motion (damping: 200)
Tight letter-spacing - Headings have negative tracking
Use official brand assets - Download logos from official sources (see references/geist-icons.md)

绝对不要使用表情符号 - 从

@geist-ui/icons

导入图标（例如：

import { Code, Folder, Check } from '@geist-ui/icons'

）

成功状态使用绿色 - Geist使用绿色表示成功状态（--ds-green-700）
边框使用gray-400 - 默认边框颜色为gray-400
输入框使用bg-100 - 使用主背景，而非次级背景
弹性动画 - 流畅的阻尼运动（阻尼值：200）
紧凑字距 - 标题使用负字距
使用官方品牌资源 - 从官方渠道下载Logo（参考references/geist-icons.md）

References

参考资料

```
references/project-setup.md
```
- Complete file templates
```
references/geist-icons.md
```
- Icons and brand assets (MUST READ)
```
references/code-blocks.md
```
- Syntax-highlighted code blocks (use prism-react-renderer)
```
references/geist-colors.md
```
- Full 10-step color scale
```
references/geist-typography.md
```
- All typography classes with specs
```
references/geist-components.md
```
- Component props and patterns
```
references/scene-patterns.md
```
- Scene templates for common content
```
references/storyboard-template.md
```
- Planning video structure

```
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
```
- 视频结构规划模板

Font Loading (jsDelivr CDN)

字体加载（jsDelivr CDN）

css

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

css

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