create-remotion-geist by vercel-labs/skill-remotion-geist
npx skills add https://github.com/vercel-labs/skill-remotion-geist --skill create-remotion-geist使用 Vercel 的 Geist 设计系统创建 Remotion 视频 - 深色背景、弹簧动画、Geist 字体和 10 级色阶。
@geist-ui/icons 包中正确的 Geist 图标registerRoot() 的 src/index.tsx,而不是 .ts搭建项目结构:
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 # 用于正确的图标
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
创建核心文件(模板请参考 references/project-setup.md):
remotion.config.ts - 启用 Tailwindtailwind.config.js - Geist 颜色和字体src/styles.css - 从 CDN 加载字体src/index.tsx - 使用 registerRoot() 的根合成src/Root.tsx - 合成定义src/utils/animations.ts - 弹簧动画构建场景,遵循 references/scene-patterns.md 中的模式
渲染:
npx remotion studio # 在 localhost:3000 预览
npx remotion render MyComp out/video.mp4
| 令牌 | 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](常规字重)space-2: 8px | space-4: 16px | space-6: 24px | space-8: 32px使用基于弹簧的动画以实现 Geist 流畅的美学效果:
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 } });
}
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>
);
}
@geist-ui/icons 导入图标(例如,import { Code, Folder, Check } from '@geist-ui/icons')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-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;
}
/* 添加 Medium (500)、SemiBold (600)、Bold (700) 字重 */
每周安装量
232
代码仓库
GitHub 星标数
20
首次出现
2026 年 1 月 29 日
安全审计
已安装于
opencode200
gemini-cli193
codex193
github-copilot182
claude-code176
cursor163
Create Remotion videos styled with Vercel's Geist design system - dark backgrounds, spring animations, Geist fonts, and the 10-step color scale.
@geist-ui/icons packagesrc/index.tsx with registerRoot(), not .tsScaffold the project:
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 Tailwindtailwind.config.js - Geist colors and fontssrc/styles.css - Font loading from CDNsrc/index.tsx - Root composition with registerRoot()src/Root.tsx - Composition definitionssrc/utils/animations.ts - Spring animationsBuild scenes following the pattern in references/scene-patterns.md
Render:
npx remotion studio # Preview at localhost:3000
npx remotion render MyComp out/video.mp4
| 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 |
text-heading-{72|64|56|48|40|32|24|20|16|14} (semibold, tight tracking)text-label-{20|18|16|14|13|12}[-mono] (normal weight)text-copy-{24|20|18|16|14|13}[-mono] (normal weight)space-2: 8px | space-4: 16px | space-6: 24px | space-8: 32pxUse spring-based animations for Geist's smooth aesthetic:
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>
);
}
@geist-ui/icons (e.g., import { Code, Folder, Check } from '@geist-ui/icons')references/project-setup.md - Complete file templatesreferences/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 scalereferences/geist-typography.md - All typography classes with specsreferences/geist-components.md - Component props and patternsreferences/scene-patterns.md - Scene templates for common contentreferences/storyboard-template.md - Planning video structure@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 */
Weekly Installs
232
Repository
GitHub Stars
20
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode200
gemini-cli193
codex193
github-copilot182
claude-code176
cursor163
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
39,800 周安装