create-remotion-geist

by vercel

Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's… npx skills add https://github.com/vercel-labs/skill-remotion-geist --skill create-remotion-geist Download ZIPGitHub22

Create Remotion Geist Video

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

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

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 Design Tokens (Quick Reference)

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

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)

Spacing (4px base)

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

Animation Utilities

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

Scene Structure Pattern

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

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

 return (
 
 

## 
 Title
 

 
 );
}

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)

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

Font Loading (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 */

Quick Start

Scaffold 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 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:

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