---
name: create-remotion-geist
description: Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's…
---

# create-remotion-geist

Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's…

# create-remotion-geistby 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 ZIPGitHub

## 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

## 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
`
```

## Geist Design Tokens (Quick Reference)

### Colors (Dark Theme)

TokenCSS VariableValueUsagebackground-100--ds-background-100#0a0a0aPrimary backgroundbackground-200--ds-background-200#171717Secondary/elevatedgray-400--ds-gray-400#737373Default bordersgreen-700--ds-green-700#46A758Successred-700--ds-red-700#E5484DErroramber-700--ds-amber-700#FFB224Warningblue-700--ds-blue-700#0070F3Info/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 (
<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)

## 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&#160;protected]/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
font-weight: 400;
}
/* Add Medium (500), SemiBold (600), Bold (700) weights */
`
```

## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

---

**Source**: https://github.com/vercel-labs/skill-remotion-geist/tree/HEAD/skills/create-remotion-geist
**Author**: vercel
**Discovered via**: mcpservers.org